The project

The guys from Epic wanted a new, engaging sign-up process for the website of their video game. In their own words:

“We are strongly working on the branding of our game and our intention is to make it feel as premium as possible: every little detail has to be on point. Our current sign-up process is a bit outdated, out of tune with what we’re striving to accomplish, so we’d like you to create something that gets our players talking about it. We’re open to new ideas…”

The role

There were several UX responsibilities including the ideating and testing of the product, but my main focus for this project was as a UI Designer: selecting the colors based on the brand’s identity, deciding on the distribution and spacing between elements, creating digital wireframes, and other UI-related activities.

The old version

As a starting project, Epic didn’t have enough resources to sub-contract the design of their sign-up process, so they created an extremely simple (but functional) on-boarding process that got user from point A (not having an account) to point B (having an account) without much to remark about it.

The old version of the Epic's sign-up process was extremely plain. This was a concern for the team, who wanted something more interesting for their players.

Try the old version

The solution

We had 3 main priorities for this project:

1- Visual Appeal

Epic wanted impacting, yet not overwhelming visuals. It had to catch the eye of users without distracting them from the main goal: creating an account.

2- Simplicity

If it was complicated, many users would leave it before completion. This is where usability testing came handy.

3- Spice

Epic wanted something memorable: a small detail that made players curious about the sign-up process and that would stuck in their minds as something to tell their friends about. We did something interesting about it.


“What about a grenade flying through the screen..?”


Color and Homepage

To simulate the complete experience of a sign-up process, I decided to create a fictional homepage using the brand colors of the video game. This was only a preamble for the real product.

The fictional homepage was just an preamble for the real product. Even when it will never be online, I'm glad I created it because it helped me present the project in a more realistic way.


The design of the sign-up user flow started with research of popular video games on-boarding processes. The goal was to understand industry standards in order to meet the expectations of users

Research wasn’t too heavy since sign-ups tend to be very similar, but it was nice to have a well-defined starting point for the design. 


It was time to put everything in place, including the information required, buttons, and the alternative options to go about the process.

It was important to break the sign-up process in several steps so it was easier for users to digest: a couple clicks and hit "next." It might seem like an minor detail, but I didn't want players to feel overwhelmed at any point of the registration.
At this point of the design process, there were several ideas already coming to my mind in relation to what interesting detail we could add to make the process memorable.


Time to connect everything and make sure it was working as intended.

Users can perfectly go back and forth while in the process, and they have the alternative of signing up with their Google, Xbox, or Playstation accounts.

High Fidelity

The next step was to put colors, icons, and add some life to the wireframes. This was the most fun part of the process.

For the background color, I decided to go with a light brown gradient that faded into deep black at the bottom. It gave the screen an intense, yet not overwhelming sense when you first look at it.

For the main survey box and buttons I opted for the brand’s gray color (#FFFCFC), ensuring the contrast was appropriate and that all users could see information without any trouble.

Intense colors. A deep and intriguing feel. This is the Epic's brand, and it was great making it come alive in the hi-fi prototype.

Time for the "spice"

Now that the hi-fi prototype was almost ready-to-go, it was time to add something creative and memorable for the sign-up process.

For this purpose, I had two main ideas in mind:

– A background video that made the player feel already immersed in the gameplay.

– A cool animation that moved through each step of the sign-up process.

After thinking more deeply about the background video option, I decided it wouldn’t be the best idea; it could be too distracting and I wanted their complete focus on the main task.

So, the solution came clear: it was going to be an animation.

"It's either one soldier shooting another soldier or a grenade"

My favorite idea was to create a moving scene behind the survey the user was filling: in the first step, a soldier pointing with his gun to another. In the second step, after the user hit the button “next”, the first soldier would shoot a bullet to the second one, and said bullet would be seen in the air flying towards its target.

The scene would go until, at the end of the process, in the screen that claimed that the registration was successful, the second soldier would be seen receiving the bullet and falling to the ground. It was nice, but…

I had to be more realistic.

This would’ve been pretty difficult to pull off given the needed imagery for the animation, and since this wasn’t a multi-million dollar project, I decided to go with the second option: a grenade flying through the air and exploding in the final screen.

Try the grenade animation by yourself

(Click “NEXT” to se the grenade moving)

And that was it for the actual creation of the project. Now it was time to test it.


Being part of the gaming community myself, it wasn’t hard for me to find two gamers who would check out the sign-up process and give their opinions.

"It looks pretty good and it's easy to understand, as you would expect from a sign-up process."

 User #1 (Male, 29 years old.)

"I love the grenade that's behind everything. Never seen something like that."

 User #2 (Female, 21 years old.)

Did it work?

After two weeks of implementation, the drop-off rate for the sign-up process of Epic dropped from 15 to 8%. 

This means that, if before the re-design there where 10 drop-offs each month, now there will be only 5. Half of the users who didn’t complete the sign-up process now do complete it (maybe out of curiosity to see what happens with the grenade (?))

Drop-off rate: -50%

Try the final prototype by yourself

(Take a look of the homepage and initiate the registration process. Feel free to click anywhere you want!)

Before and after


What I learned

This was the first time for me creating an animation like that, so I didn’t know if it was going to work as intended.

After a couple animation tutorials online, I saw a clear way to do it, so it was just a matter of executing.

And that was all!

This was the whole project for the Epic sign-up process.

If you would like to contact me, here are the ways you can reach me out: