Mobile app

UX Onboarding

UX solution aimed at helping users onboard a fictional platform smoothly- Sign up, Login and the Authentication process

My Role

UX Design

UX research

UX Design

UX research

UX Design

UX research

Tools

Figma (design)

Protopie (prototype for testing)

Notion (documentation)

Figma

Notion

Figma (design)

Notion

Duration

2 Weeks

June 2022

2 Weeks

June 2022

2 Weeks

June 2022

General Overview

This case study focuses on addressing the frustration users encounter during sign-up and login. My primary objective throughout this project was to prioritize the user and their needs at every stage of the design decision-making process. To ensure I have an understanding of the user's perspective I performed extensive secondary and primary research. This research involved delving into design heuristics and accessibility guidelines to gain insights into the best practices for helping users successfully onboard and creating a visually appealing and user-friendly experience. The overall aim after this onboarding ultimately leads to smoother onboarding and a more enjoyable user experience.

This case study focuses on addressing the frustration users encounter during sign-up and login. My primary objective throughout this project was to prioritize the user and their needs at every stage of the design decision-making process. To ensure I have an understanding of the user's perspective I performed extensive secondary and primary research. This research involved delving into design heuristics and accessibility guidelines to gain insights into the best practices for helping users successfully onboard and creating a visually appealing and user-friendly experience. The overall aim after this onboarding ultimately leads to smoother onboarding and a more enjoyable user experience.

Problem Statement

Google Play Store download research highlights a significant number of apps experience a loss of 77% of users within the first three days of usage. One prominent factor contributing to this high user attrition rate is ambiguous onboarding flows, accounting for approximately 50% of the issue.This research identified several major problems which includes:Ambiguity in authentication process: Many apps do not provide clear and concise instructions during the onboarding, leading to user confusion. The focus often seems to be on gathering as much user information as possible, which can be overwhelming and tedious for users.Lack of error prevention features: Evaluation heuristics, particularly control and freedom, are often overlooked. Apps do not provide adequate measures to prevent user errors or offer error messages to guide users when mistakes occur. As a result, users end up spending more time on the platform trying to rectify errors, leading to frustration and potentially abandonment.Addressing these issues will require a user-centric approach that emphasizes clear communication, straight forward authentication processes, and error prevention measures.

Google Play Store download research highlights a significant number of apps experience a loss of 77% of users within the first three days of usage. One prominent factor contributing to this high user attrition rate is ambiguous onboarding flows, accounting for approximately 50% of the issue.This research identified several major problems which includes:Ambiguity in authentication process: Many apps do not provide clear and concise instructions during the onboarding, leading to user confusion. The focus often seems to be on gathering as much user information as possible, which can be overwhelming and tedious for users.Lack of error prevention features: Evaluation heuristics, particularly control and freedom, are often overlooked. Apps do not provide adequate measures to prevent user errors or offer error messages to guide users when mistakes occur. As a result, users end up spending more time on the platform trying to rectify errors, leading to frustration and potentially abandonment.Addressing these issues will require a user-centric approach that emphasizes clear communication, straight forward authentication processes, and error prevention measures.

Gathering Insight

To properly understand the problem from the user's perspective, I needed to interview some prospective users. In this stage, I identified my target audience and categorized them into user groups, This classification allowed for a more focused and tailored approach to gather information from each user group.

By segmenting the target audience into user groups, I better understood their unique characteristics, preferences, and pain points. This approach enabled me to gather more relevant and specific feedback from each user group, providing insights that helped guide my design decisions and addressed the identified problem

To properly understand the problem from the user's perspective, I needed to interview some prospective users. In this stage, I identified my target audience and categorized them into user groups, This classification allowed for a more focused and tailored approach to gather information from each user group.

By segmenting the target audience into user groups, I better understood their unique characteristics, preferences, and pain points. This approach enabled me to gather more relevant and specific feedback from each user group, providing insights that helped guide my design decisions and addressed the identified problem

Understanding the motivations, thoughts, and pain points of my target audience regarding recent apps they have interacted with informed the decision-making process for this project. By gaining insights into their experiences, i identified their common pain points thereby determining the key factors that motivated or discouraged users. By conducting research and gathering feedback from this individuals, i was able to uncover their preferences, expectations, and frustrations. This information helped me make informed decisions throughout the course of this project, ensuring that all of my design choices are aligned with the needs and desires of the users.Based on the research conducted, several pain points were identified, and a synthesis of the findings was performed to facilitate the resolution of these problems. By distilling the research, the aim was to simplify the process of addressing the identified pain points effectively.

Based on the research conducted, several pain points were identified, and a synthesis of the findings was performed to facilitate the resolution of these problems.

Understanding the motivations, thoughts, and pain points of my target audience regarding recent apps they have interacted with informed the decision-making process for this project. By gaining insights into their experiences, i identified their common pain points thereby determining the key factors that motivated or discouraged users. By conducting research and gathering feedback from this individuals, i was able to uncover their preferences, expectations, and frustrations. This information helped me make informed decisions throughout the course of this project, ensuring that all of my design choices are aligned with the needs and desires of the users.Based on the research conducted, several pain points were identified, and a synthesis of the findings was performed to facilitate the resolution of these problems. By distilling the research, the aim was to simplify the process of addressing the identified pain points effectively.

Based on the research conducted, several pain points were identified, and a synthesis of the findings was performed to facilitate the resolution of these problems.

Gathering Insights

Synthesizing the data from the primary research/interviews helped me identify user behaviors

User Persona

These observations enabled me to create a viable user persona to further make it more relatable.

Empathy Map

The findings gathered from these research enabled me create an empathy map for the user, to further appropriate all of their feelings in a single file to enable problem solving

Solution

This stage was based on the gathered findings. Several strategies were implemented to address the identified pain points, focusing on enhancing the onboarding experience. These solutions include:

Breaking down the authentication process: To prevent overwhelming users, the authentication process was divided into two steps. The first step is capturing the user's name and mobile number. By splitting the process, users can focus on one task at a time, reducing cognitive load and improving the overall user experience.
Highlighting important form fields: To draw attention to crucial information, such as required fields, a visual indicator was added. This helps users easily identify which fields is essential for completion, minimizing errors and confusion during the onboarding process.
Providing a back button: To offer users control and freedom, a back button was added. This allows users to navigate back to the previous step if they need to make changes or revisit their choice. The presence of a back button empowers users to correct any mistakes or review their inputs, enhancing their sense of control.
Third-party signup flow: Recognizing that some users prefer a more streamlined signup process, a third-party signup option was implemented. This allows users to sign up using their existing credentials from popular platforms, offering convenience and reducing friction in the onboarding process.

By implementing these solutions, the aim is to create a more user friendly and error-free onboarding process.

These additions provided users with clear guidance, ensured the creation of strong passwords, and mitigated potential errors, ultimately enhancing the overall onboarding experience

This stage was based on the gathered findings. Several strategies were implemented to address the identified pain points, focusing on enhancing the onboarding experience. These solutions include:

Breaking down the authentication process: To prevent overwhelming users, the authentication process was divided into two steps. The first step is capturing the user's name and mobile number. By splitting the process, users can focus on one task at a time, reducing cognitive load and improving the overall user experience.
Highlighting important form fields: To draw attention to crucial information, such as required fields, a visual indicator was added. This helps users easily identify which fields is essential for completion, minimizing errors and confusion during the onboarding process.
Providing a back button: To offer users control and freedom, a back button was added. This allows users to navigate back to the previous step if they need to make changes or revisit their choice. The presence of a back button empowers users to correct any mistakes or review their inputs, enhancing their sense of control.
Third-party signup flow: Recognizing that some users prefer a more streamlined signup process, a third-party signup option was implemented. This allows users to sign up using their existing credentials from popular platforms, offering convenience and reducing friction in the onboarding process.

By implementing these solutions, the aim is to create a more user friendly and error-free onboarding process.

These additions provided users with clear guidance, ensured the creation of strong passwords, and mitigated potential errors, ultimately enhancing the overall onboarding experience

This stage was based on the gathered findings. Several strategies were implemented to address the identified pain points, focusing on enhancing the onboarding experience. These solutions include:

Breaking down the authentication process: To prevent overwhelming users, the authentication process was divided into two steps. The first step is capturing the user's name and mobile number. By splitting the process, users can focus on one task at a time, reducing cognitive load and improving the overall user experience.
Highlighting important form fields: To draw attention to crucial information, such as required fields, a visual indicator was added. This helps users easily identify which fields is essential for completion, minimizing errors and confusion during the onboarding process.
Providing a back button: To offer users control and freedom, a back button was added. This allows users to navigate back to the previous step if they need to make changes or revisit their choice. The presence of a back button empowers users to correct any mistakes or review their inputs, enhancing their sense of control.
Third-party signup flow: Recognizing that some users prefer a more streamlined signup process, a third-party signup option was implemented. This allows users to sign up using their existing credentials from popular platforms, offering convenience and reducing friction in the onboarding process.

By implementing these solutions, the aim is to create a more user friendly and error-free onboarding process.

These additions provided users with clear guidance, ensured the creation of strong passwords, and mitigated potential errors, ultimately enhancing the overall onboarding experience

Additional solutions based on the gathered findings:

Form field validation: The design implemented provided for form field validation, allowing users to verify their inputs and catch any errors before proceeding. By displaying validation messages in real-time, users can ensure that they are making the correct decisions and provide accurate information, reducing the likelihood of errors.
Descriptive password creation: Password creation was made more user-friendly by incorporating descriptive guidance. This helps users navigate the process and create a password that meets the necessary requirements. Clear instructions and prompts can assist users in understanding the criteria in setting a strong and secure password.
Pre-requisites for password creation: A field was added to display the prerequisites for password creation, such as minimum character length or the inclusion of special characters. Additionally, checkboxes were provided for users to mark each prerequisite as completed, ensuring that they follow the necessary guidelines for password security.
Password strength progress: A visual progress indicator was introduced to display the strength of the password being created. This feature helps users stay informed about the strength of their password and encourages the creation of stronger and more secure passwords.
Check icons for correctly filled fields: To prevent user errors, check icons were incorporated to indicate when fields have been filled correctly. This visual confirmation assures users that they have entered the required information accurately minimizing potential mistakes.
Confirm password field: A confirm password field was included to aid users in remembering the password they created. This additional field serves as a precautionary measure, reducing the likelihood of users forgetting their passwords and requiring assistance.

Additional solutions based on the gathered findings:

Form field validation: The design implemented provided for form field validation, allowing users to verify their inputs and catch any errors before proceeding. By displaying validation messages in real-time, users can ensure that they are making the correct decisions and provide accurate information, reducing the likelihood of errors.
Descriptive password creation: Password creation was made more user-friendly by incorporating descriptive guidance. This helps users navigate the process and create a password that meets the necessary requirements. Clear instructions and prompts can assist users in understanding the criteria in setting a strong and secure password.
Pre-requisites for password creation: A field was added to display the prerequisites for password creation, such as minimum character length or the inclusion of special characters. Additionally, checkboxes were provided for users to mark each prerequisite as completed, ensuring that they follow the necessary guidelines for password security.
Password strength progress: A visual progress indicator was introduced to display the strength of the password being created. This feature helps users stay informed about the strength of their password and encourages the creation of stronger and more secure passwords.
Check icons for correctly filled fields: To prevent user errors, check icons were incorporated to indicate when fields have been filled correctly. This visual confirmation assures users that they have entered the required information accurately minimizing potential mistakes.
Confirm password field: A confirm password field was included to aid users in remembering the password they created. This additional field serves as a precautionary measure, reducing the likelihood of users forgetting their passwords and requiring assistance.

Additional solutions based on the gathered findings:

Form field validation: The design implemented provided for form field validation, allowing users to verify their inputs and catch any errors before proceeding. By displaying validation messages in real-time, users can ensure that they are making the correct decisions and provide accurate information, reducing the likelihood of errors.
Descriptive password creation: Password creation was made more user-friendly by incorporating descriptive guidance. This helps users navigate the process and create a password that meets the necessary requirements. Clear instructions and prompts can assist users in understanding the criteria in setting a strong and secure password.
Pre-requisites for password creation: A field was added to display the prerequisites for password creation, such as minimum character length or the inclusion of special characters. Additionally, checkboxes were provided for users to mark each prerequisite as completed, ensuring that they follow the necessary guidelines for password security.
Password strength progress: A visual progress indicator was introduced to display the strength of the password being created. This feature helps users stay informed about the strength of their password and encourages the creation of stronger and more secure passwords.
Check icons for correctly filled fields: To prevent user errors, check icons were incorporated to indicate when fields have been filled correctly. This visual confirmation assures users that they have entered the required information accurately minimizing potential mistakes.
Confirm password field: A confirm password field was included to aid users in remembering the password they created. This additional field serves as a precautionary measure, reducing the likelihood of users forgetting their passwords and requiring assistance.

To improve password change flow, the following UX solutions were implemented:

OTP for password change: Users were provided with the option to enter their email or username to receive a one-time password (OTP) for changing their password. This added layer of security ensures that only authorized users can initiate a password change.

Flexibility to return to the login process: During the password change process, users were given the ability to easily navigate back to the login page if they happen to remember their password. This allows users to switch between actions seamlessly based on their needs and preferences.

Ability to see the email address Entered: In the password change flow, users can see the email address they have entered to get OTP. This ensures that they do not make mistakes and prevents second guessing information entered.

To improve password change flow, the following UX solutions were implemented:

OTP for password change: Users were provided with the option to enter their email or username to receive a one-time password (OTP) for changing their password. This added layer of security ensures that only authorized users can initiate a password change.

Flexibility to return to the login process: During the password change process, users were given the ability to easily navigate back to the login page if they happen to remember their password. This allows users to switch between actions seamlessly based on their needs and preferences.

Ability to see the email address Entered: In the password change flow, users can see the email address they have entered to get OTP. This ensures that they do not make mistakes and prevents second guessing information entered.

To improve password change flow, the following UX solutions were implemented:

OTP for password change: Users were provided with the option to enter their email or username to receive a one-time password (OTP) for changing their password. This added layer of security ensures that only authorized users can initiate a password change.

Flexibility to return to the login process: During the password change process, users were given the ability to easily navigate back to the login page if they happen to remember their password. This allows users to switch between actions seamlessly based on their needs and preferences.

Ability to see the email address Entered: In the password change flow, users can see the email address they have entered to get OTP. This ensures that they do not make mistakes and prevents second guessing information entered.

Summary

The onboarding process was significantly improved based on the findings gathered from research. These solutions include breaking down the authentication process, highlighting important form fields, providing a back button for user control, and incorporating a third-party signup flow. Additional improvements were made to the password creation process, such as form field validation, descriptive password creation, prerequisites for password creation, and a password strength progress indicator. The sign-in process was made more user-friendly by offering easy access options, third-party account sign-in, real-time error identification, a sign-up option, and a password reset functionality. The password change process was also enhanced by implementing an OTP option and allowing users to return to the login process if they remember their password. These improvements aim to provide users with a smoother onboarding experience, improve user satisfaction, and reduce frustration.

The onboarding process was significantly improved based on the findings gathered from research. These solutions include breaking down the authentication process, highlighting important form fields, providing a back button for user control, and incorporating a third-party signup flow. Additional improvements were made to the password creation process, such as form field validation, descriptive password creation, prerequisites for password creation, and a password strength progress indicator. The sign-in process was made more user-friendly by offering easy access options, third-party account sign-in, real-time error identification, a sign-up option, and a password reset functionality. The password change process was also enhanced by implementing an OTP option and allowing users to return to the login process if they remember their password. These improvements aim to provide users with a smoother onboarding experience, improve user satisfaction, and reduce frustration.

Next Project

Blissbond ↗️

Let’s
Collaborate

Happy to hear from you :)

Linkdln

Behance

Linkdln

Behance