Problem Space
With the current log in / sign up flow, certain user groups are unable to log in or sign up. There are multiple types of users with varying amounts of account information that all need to take different actions to sign up or log in. The current sign in / sign up flow only accounts for one user type.
“Soon, Soulframe won’t be invite-only. Everyone will have access to play.”
- Lead Soulframe team
That’s awesome!
Wait… How will everyone sign up?
Current Flow Audit
If users want to sign up to play Soulframe, they need to be invited but the current sign up flow is locked behind an invite email. To be invited, you need to have signed up to reserve your username. Even when you’re signed up, only a small number of those users are invited every week but that functionality will be removed once Soulframe is open to everyone.
Current user journey to sign up for Soulframe
Defining The Audience
To understand exactly how the current log in / sign up flow doesn’t serve our audience, we need to actually define that audience first.
No Account
This user has no account at all. They have never signed up for anything.
No Game Account
This user registered their email address and reserved their username but they don't have a password. They were never invited to Soulframe's play test. This user most likely believes their account is already fully created and when prompted to "finish" their account, could be confused.
Full Account
This user has fully signed up for Soulframe. They registered their email and username, were invited to join Soulframe's play test, and created a password.
The sign up / sign in flow needs to be redesigned in a way that accommodates all user types without confusing users and increasing abandonment rates.
How Success Will Be Measured
To measure any confusion users may have, we’ll be monitoring our customer service tickets that are triggered by this flow.
Brainstorming
The first idea to come to mind is simple; allow users to select which account they currently have and direct them down their respective flow to sign up or log in.
But there’s a problem with that…
Initial idea to solve the problem (not final design)
Brainstorming
Users Don’t Know Which Account Type They Have
We can’t ask users to make a decision because they aren’t fully informed and making a wrong decision can cause confusion and increase abandonment rates. Users who have registered their username and email address don’t know that their account isn’t “complete”.
Looking at the info we have on each user group, they have a common piece of data - email addresses. We can use their email address to identify which account type they have.
If we use their email addresses as a starting point, we’re able to determine what account type they have on the back end and then direct them through their respective flow. This removes the need for the users to make a decision.
New user flow.
Wireframes
I created wireframes for each step in the new sign up / log in flow so we can further examine the user’s journey.
Wireframes for “Continue Signing Up” screen.
Wireframes for entire user flow.
But we found another problem…
Wireframes
Finish Signing Up? I Thought I Was Logging In?
As a user who reserved their username and email address, you’re completely unaware that you don’t have a “full game account”. When you go to log in, receiving an activation email and being prompted to “finish signing up” would be really confusing.
Didn’t I already sign up? Did I use the wrong email address? Was my account deleted?
To avoid this, I included an eye-catching “account found” message on the first screen after a “No Game Account” user enters their email address. This shows the user that they aren’t signing up for a new account, but are completing the registration of their current account.
“Confirm You Email” screen for “No Game Account” users.
Responsive Final Designs
I created the final designs for Soulframe’s new sign up / log in flow. This included designs for ultrawide, desktop, tablet, and mobile sizes as well as any necessary prototypes and success / fail states. I also assisted in maintaining visual consistency and good UX practices by collaborating with the engineering team during the QA process of the fully developed flow.
“Continue Signing Up” final desktop designs.
“Continue Signing Up” final tablet designs.
“Continue Signing Up” final mobile designs.
Final designs for entire user flow.
We launched the redesigned sign up / log in flow with no increase in customer service tickets. At the time of writing, we’ve had over 100,000 users create accounts using this flow.