Consumer  ·  Onboarding  ·  Web & Mobile  ·  Conversion

Spur Onboarding: Registration That Converts & Retains

Redesigned the registration onboarding flow for Spur, a content creation platform, to alleviate confusion between the two user types and boost sign-up conversion.

Spur Onboarding final design

Project Overview & Context

Zighra is a company that specializes in behavioral biometrics and AI-driven solutions to enhance privacy and security in digital interactions. My team at Zighra was focused on building a decentralized content creation platform called Spur to explore this technology and enhance user security and privacy.

During my time at Zighra I was part of the Spur team. Spur is a content creation platform aimed to empower creators by giving them the space to share their content and services, host events, and connect with like-minded individuals to build a community. The platform also has a strong focus on education, with many creators offering services like tutoring and music lessons.

A Long and Confusing Onboarding Journey

Spur's original onboarding flow was severely broken, it was a long and confusing journey. The team initiated a redesign due to these three existing problems within the interface.

01

User Type Uncertainty During Onboarding

New users didn't know what user type they identified with during onboarding. New users were misidentifying themselves and this led to tons of user complaints and a high drop off rate at onboarding.

02

Vague User-Type Terminology

Initially the two main user types were called "Business" as in Creator and "User" as in Learner. However, the existing terminology is vague and inconsistent.

03

Difficulty Navigating to the Sign Up Page

The Creator sign up page is intertwined with the rest of the sign in flow.

Distinct User Categories

New users faced confusion when deciding whether to sign up as a "Creator" or a "Learner." An example of a Creator is a teacher, whereas a Learner represents a student. The distinction between these two account types was not clear to users.

In order to gain insights into the Creator and Learner user categories, we pinpointed the following proto-personas.

Proto-personas for the Creator and Learner user categories

Proto-personas developed to understand the Creator and Learner user categories.

Problem Statement

The question we aimed to answer

"How might we alleviate the confusion between the two user types throughout the sign-up onboarding process?"

Project Goals

Spur's primary goal in the new user onboarding is to enhance user comprehension during sign-up. To gauge how well this goal is met in the new design, we'll assess the following tasks' success rates.

01

Navigate from Landing Page to Sign Up Page: Are new and existing users able to successfully navigate to the Sign Up / Log In page?

02

Select Desired User Type: Are new users able to correctly identify themselves between a Creator and a Learner?

03

Complete Sign Up / Log In Form: Are new and existing users able to complete the Sign Up / Log In flow completely?

Understanding the Broken Flow

Current Design

The original onboarding page of Spur is displayed below, highlighting the main friction points that contribute to the broken onboarding flow.

Current design with annotated friction points

The original onboarding page with its main friction points annotated.

01

First Friction Point

The most significant friction point is related to creating a new account. To create a new account, a registrant must first navigate to the "user" tab and then click the "create an account" button, which is not the primary action on this page. The use of both "Login" and "Create account" buttons as primary and secondary actions is causing confusion.

02

Second Friction Point

Vague user-type terminology: the "user" and "business" user types are shown without any context, definition or examples.

03

Third Friction Point

Limited entry points: an opportunity to increase entry points by incorporating sign-up entry points from the login page.

Heat Map of Current Design

Using Hotjar, we tracked the user movement of 212 users in a 5-day experiment. The heat map provided insight into where users were clicking within the current login page and how frequently areas of the page were visited.

This heatmap validated our team's assumption that people were becoming confused between the two distinct user types. Despite having significantly more business/creator users than user/learner users at this stage, the heat map presented conflicting results. The "business/creator" user type had 80% fewer clicks compared to the "user/learner" user type, which raised concerns.

Hotjar heat map of the current login page

Hotjar heat map tracking 212 users over a 5-day experiment on the current login page.

Current Sign Up & Login Flow

After thorough user testing and research of the user flow, it was found that users are unsure if they are signing up to create and share content or signing up to use and consume the content.

Another key finding within the registration flow was the sign-up process for the Learner user type. In the current design, these Learner users have to enter the login flow to sign up and create an account, which is a completely unexpected and terribly confusing user experience.

Current sign up and login flow diagram

The current sign up and login flow, mapping where users get lost.

Key insight

"The problem lies in users not knowing what they are signing up for, coupled with the challenging navigation in the current sign-up flow"

Competitive Analysis

To identify best practices for the Spur onboarding redesign, a competitive analysis was conducted.

Outcome: A common design pattern I observed was that each company prominently executed a short, quick sign up flow with enough explanation to prevent confusion for the user. I also noticed that most platforms separated the user types from the landing page.

Competitive analysis matrix

Competitive analysis matrix of onboarding patterns across comparable platforms.

User Survey

Although UX writing was not part of the project's scope, the company wanted to conduct an experiment to explore which phrase would be the most appropriate to replace the overly general term "User". 72% of active users chose the phrase "Learner" over the excessively wide term "User" to represent the customer user type.

User survey results, 72% chose Learner

Survey results: 72% of active users chose "Learner" to represent the customer user type.

Low-fi Wireframe Iterations

After my team specified the key features that needed to be included on the sign-up page, we developed three distinct design ideas to address the problem space, based on our research findings.

Wireframe 1

Wireframe 1, with the elements that worked and the ones that didn't.

Wireframe 2

Wireframe 2, exploring a different structure for user type selection.

Wireframe 3

Wireframe 3, the direction that informed the final design.

Three Decisions That Fixed the Flow

01

Improve User Flow

The fundamental action of creating an account is split into its own page. This allows the important action to be visible throughout the whole login/sign-up flow, rather than being hidden in the initially complicated navigation system. In order to improve the user onboarding KPI, it was important to separate the sign up and sign in pages to streamline user registration.

02

Providing Context

The updated design effectively addresses the previous design's challenge of high mental effort by incorporating supporting text, icons, and tooltip functions. These elements collectively enhance user support by providing clearer definitions and examples for different personas.

03

Increase Entry Points

Another improvement area was to establish intuitive entry and exit points in the registration interface. This design enables users to sign in from the sign-up page if they already have an account, and likewise, create an account from the login page. These navigation points will boost new onboarding conversion rates for visitors.

Design decisions annotated on the new sign up page

The three design decisions applied to the new registration interface.

Final Web & Mobile Design

Final web design of the Spur sign up page

The final web design, with account creation split into its own clear page.

Final web design, additional view

Supporting text, icons, and tooltips give each user type clear context.

Final Mobile Design

Final mobile design, screen 1
Final mobile design, screen 2
Final mobile design, screen 3

The final mobile design of the registration onboarding flow.

Validating the Redesign

A remote, moderated usability study based on tasks was conducted with 8 participants to assess the task success rate disparity between the old and new designs. The percentage of users accomplishing tasks successfully in this study is recorded as the success rate. This binary study illustrates a favorable increase in the Task Success Rate for the new design.

+29% Task 1 · Navigate to Sign Up
+23% Task 2 · Select User Type
+13% Task 3 · Complete the Flow
Task success rate chart, old design

Task success rates in the old design.

Task success rate chart, new design

Task success rates in the new design.

Learnings & Outcomes

Embracing Ambiguity

The success of the prototyping and user testing phases created great momentum for prioritizing the onboarding redesign for development. But, due to changes in Spur's roadmap, this project was put on the backlog for the development and design team. Nonetheless, this project taught me a lot about embracing ambiguity, asking the right questions, and how to build products for a rapidly expanding user base, all while still delivering impact.