Onboarding
APP (B2C)
Senior Product Designer
UXD, UXR, and UI Design
I was responsible for the end-to-end Product Design process: UX research, problem mapping, insights and ideation, benchmarking, user journeys, information architecture, wireframes, scenarios, user map flows, UI Design, prototyping and handoff to devs.
Challenge
Design the user registration experience when entering the PowerFit APP for the first time.
Goal
Offer a simple and intuitive onboarding experience for the user.
UX Research
Nielsen Norman Group is the world leader in research-based user experience.
In this article, they discuss mobile-app onboarding: an analysis of components and techniques.
The article's conclusion is:
Keep integration as simple as possible. For most mobile apps, this means placing users directly on the interface. Complex applications with unique interaction patterns may benefit from personalizing and incorporating integration flows. With integration, focus on what users need to succeed in your app, highlight what's new or unknown and keep instructional content brief.
Source:
Benchmarking
Statista is the No.1 Global Data Platform.
This survey lists the leading downloadable APPs for the health and fitness segment on Google Play in January 2021.
The gym companies relevant to us are:
• FitBit
• Planet Fitness Workouts
• Home Workout - No Equipment
• FitOn - Free Fitness Workouts & Personalized Plans
Source:
FitOn
Analysis of results:
Delete: Advertising content
Reduce: Full registration before using the product
Increase:
• Allow use after product registration
• Register with Google API or Facebook API
Add: Product use before payment
Home Workout
Analysis of results:
Delete: Advertising content
Reduce: Full registration after product use
Increase:
• Partial registration after product use
• Register with Google API or Facebook API
• Allow use before product registration
Add: Partial registration before product use
FIIT
Analysis of results:
Delete: Nothing to be deleted
Reduce: Full registration before product use
Increase:
• Partial registration after product use
• Partial registration before product use
Add:
• Allow use before product payment
• Register with Google API or Facebook API
Freeletics
Analysis of results:
Delete: Requirement to pay for the product in order to test it
Reduce: Full registration before product use
Increase:
• Partial registration after product use
• Partial registration before product use
• Register with Google API or Facebook API
Add:
• Allow use before product payment
Benchmark Results
Pain Points
In the app stores, it is possible to see the product rating given by users and also to see comments from dissatisfied users with the UX Design. Here are some of these pain points comments.
Source:
User Journey Map | Bad experience
I mapped a friendly user journey, and also some possible bad user journey scenarios.
This map shows the user's journey through a bad experience and their pain points.
Problems
After:
• study the NN/group article to find best practices for enrolling in mobile APPs
• search for the top fitness apps in the APP stores
• analyze the main gym apps and compare results between them, making a detailed report, summarizing good points and bad practices
• read appropriate comments from users who have explained their pain points in the app stores
The main possible registration problems in gym APPs are listed below:
Full registration before using the product
Requests unnecessary information
Doesn’t have registration functionality using Google API
or Facebook API
Payment required
before registration
People don't
like sign-ups
System doesn’t auto-populate known user information
Lack of engagement
with the user
Doesn’t know the biotype (weird names like ectomorph, endomorph, and mesomorph)
Doesn’t reward the
registration effort
Long registration
flow (boring)
User doesn’t create the habit, doesn’t retain loyalty to the APP
Doesn’t allow use before
product payment
Lack of link with
the product
Doesn’t allow use before
product registration
User doesn’t recognize the product’s importance (workout result)
Problems Prioritization
The problems that may have the greatest impact on the result of the design goal are highlighted with orange cards.
Design goal:
Offer a simple and intuitive registration experience to the user.
Full registration before using the product
Requests unnecessary information
Doesn’t have registration functionality using Google API or Facebook API
Doesn't reward the
registration effort
Ideation | Assumptions
Recalling: what is the design goal?
Offer a simple and intuitive registration experience to the user.
Which problems do I highlight to solve and which directly impact the design goal?
1. Request complete registration before using the product
2. Requesting unnecessary information
3. Not having a basic data record
4. Not rewarding the registration effort
I created some assumptions that could possibly fix user problems, but they will need to be tested.
The assumptions are listed below:
Break the registration steps down during the user's journey
Be strategic when asking the user's information
Use Google API and Facebook APIs to facilitate registration
Allow the user to change the
pre-filled information
Request registration’s information only when needed
Allow to exercise
after registration
Pre-populated information (such as name, email, gender, age) from Google and FB accounts
Do not limit use, create habit and dependence on the product
Let the customer use the product for a few days
for free to create the habit and interest
Use basic registration to have contact
information for Marketing Lead
Assumptions Prioritization
The assumptions that may have the greatest impact on the result of the design goal are highlighted with orange cards.
Design goal:
Offer a simple and intuitive registration experience to the user.
Break the registration steps down during the user's journey
Be strategic when asking the user's information
Request registration’s information only when needed
Allow to exercise
after registration
User Journey Map | Nice experience
This map shows the user's journey with a good user experience and some good UX practices.
Information Architecture | Site Map
Here I worked on a site map to better understand the information architecture, the hierarchy levels of the screens, their structure, and organization.
Interface | Screen Resolution
Before starting to work on the user interfaces, I did a quick investigation about the most usable mobile resolution from the US in the last year.
Source:
Wireframes | Low Fidelity
Working on sketches and wireframes is useful to better understand the concept and the content. It also gives you the ability to have a macro view of the flows. It is important to do, but do not waste too much time on this task.
At this point, it would be reasonable to develop a low fidelity prototype and do a usability test to receive the user’s feedback.
It’s always nice to remember the design goal:
Offer a simple and intuitive onboarding experience to the user.
Figma source:
UI Design
Now it’s time to design the high-fidelity interfaces, creating elements and component’s design system.
It’s time to think about the text style too, typing the content, button’s call to action, and microcopy.
The UI’s goal is to create an attractive look, have visual consistency, and communicate clearly.
Figma source:
Prototype | Interaction
The prototype helps the product team to better understand if the navigations and flows are working well.
At this point, it would be reasonable to do a usability test to receive the user’s feedback.
Always keep in mind the design goal:
Offer a simple and intuitive onboarding experience to the user.
Figma source:
User Map Flow | Navigation
Flow documents are useful to the product team and developers in order to better understand the interaction in different scenarios.
It’s good to leave notes with rules to help frontend developers better understand the project before coding.
Overflow source:
