ACCOUNT CREATION

THE PROJECT

Team: Product Manager, Designer, Copywriter, Mobile Development Team

My Role: Sole designer

Timeframe: July 2019 - Sept. 2019

Goal: Increase conversion rate and overall usage of our app and unify the account creation flow across all entry-points.

Users: Sports media consumers

BR login screen.png
 

BACKGROUND & MOTIVATION

My team, the Growth team, was responsible for increasing the conversion, maintaining retention and boosting overall usage of our native apps. Our KPIs for this project included increasing the the conversion rate of the app and increasing user account verification rate.

The problem: The onboarding flow was a lengthy process for new users and we wondered if there was a way to optimize it for better user conversion.


USER RESEARCH

I conducted a user research study to uncover user pain points around the current onboarding flow. Through an un-moderated test, I asked 10 individual participants to go through our onboarding flow.

Key Findings:

  • Clear copy is important. Users were confused or expressed desire to know WHY they were being asked for personal information, like their birthdate (with the only assurance that they would be sent “recommendations”.

  • Context matters. Users who were trying to view comments on an article expressed frustration about why they were being asked for their profile picture or birthdate when they were only trying to view comments on an article.

  • Help the user finish their goal. Users who were trying to view comments on an article complained that there were too many steps they were being asked to go through before being able to go back and read comments. By the time users got to the end of the flow, they were exasperated by the number of steps and discouraged from creating an account.

  • Forcing registration may alienate some users. While users understood why they would need to have an account in order to write comments, they didn’t understand why they would need one to only read comments. This pattern went against what was a familiar pattern to most of them.


OPTIMIZING THE FLOW

accountcreationflow

Having discovered pain points around the existing onboarding, I created a new flow that mitigated these pain points by:

  1. Requiring users to provide only the information that was essential to create their account.

  2. Keeping all additional nice-to-know information like birth-date and profile picture upload as optional, skippable sections of onboarding.

  3. Removing password creation and using 4-digit verification code instead.

  4. Revising copy to be more clear and intentional.


SOCIAL LOGIN BUTTONS

BR’s original design had no emphasis of the main input field over the social login buttons. To design a sense of visual hierarchy and prioritize the open input field, I explored different variations of smaller social login buttons. We ultimately chose to build the screen on the right, which visually emphasized the mobile phone/email input field.


CTA DESIGN

I explored a few different main call-to-action options, comparing a traditional full-size “Continue” button alongside an inline button that would become enabled when the input field was filled. The visual below shows the explorations taking the interaction— focus state, keyboard display and filled state into account.

CTA button design.png

INTERACTION ACROSS COMPONENTS

After deciding on CTA styling, I checked that the account creation lock-up and keyboard display would work smoothly across the different components we used including full-size screens, modals and pop-up drawer sheets.


VISUAL EXPLORATIONS

Explored different visual stylings including photographs, illustrations and memes.

BR-VisualExplorations.png

ACCOUNT CREATION FLOW

Below is the optimized account creation flow which removes the password, contains clearer copy, and has several “outs” by which the user can return to the content they were browsing before they triggered this flow. This revised flow includes capturing the users’ first and last name, username, 4-digit verification code, social media connections, profile picture and birthdate.

Click to enlarge


ERROR MESSAGES

Lastly, I audited and revised our current error messages, creating new messages for any use cases that weren’t previously accounted for.

Click to enlarge


METRICS AND OUTCOMES

Tracking data over a period of 12 months, our team found that we successfully met both our KPIs by:

1. Increasing our conversion rate from 36% to 49%

2. Increasing our verification by 2%.

Taking time to audit the current experience, conduct user-testing to understand critical friction points in the flow as well as study other apps’ account creation flows were instrumental in helping me design a successful experience on Bleacher Report’s growth team.