Power-FIT-Logo

Onboarding

APP

Senior Product Designer
UXD, 
UXR, 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.
iPhone_3

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:
nngroup

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:
statista

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
FitOn-screens

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
Home-Workout-screens

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
FIIT-screens

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
Freeletics-screens

Benchmark Results

Bench-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:
Google_Play
Freeletics-Pain-Points

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.
UX-Bad-journey

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.
Group-112

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.
Site-Map

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:
screen-resolution-US-2020

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:
Wireframes-low-fidelity

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:
01
02
03
04
05
06
07
08
09
10
11
12

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:
prototype

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:
user-flow-navigations

Handoff

Using tools such as Zeplin to hand off APPs to the devs ensures productivity. Experienced designers recognize how those applications increase efficiency and encourage strong working relationships between designers and front-end devs.

Even with all these helpful apps, It’s important to maintain frequent communication with developers. This management strategy encourages colleagues to collaborate on the project and to make sure the product goals are aligned.

Source:

Let's create something together