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.
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.
Sign-up
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.
Wireframes
It was time to put everything in place, including the information required, buttons, and the alternative options to go about the process.
Prototype
Time to connect everything and make sure it was working as intended.
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.
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.
Testing
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:
