Optimizing onboarding flow
Role: User Experience Designer
Skills: User research, UX audit, Wireframes, Customer Journey Map, User flows
Timeline: January - March 2023
About Played
Played is a sports participation platform that enables sports providers to create their own digital storefronts to host activities online, manage bookings, communicate with customers, and track analytics. I worked as a sole UX designer in a team of product manager, developers and UI designer.
Research and approach
A value flywheel framework was strategically employed to gain insights into business goals, subsequently shaping the UX approach.
The discovery phase encompassed primary research involving customer interviews, screen recordings, and journey mapping, revealing pain-points like overwhelming onboarding, sign-up drop-offs, and unclear navigation.
Supplementing with secondary research, established sources were consulted. Findings led to best practices, like success screens and progress trackers, which were aimed at streamlining user flow to minimize ambiguities, fostering user motivation, and ultimately driving higher conversion rates.
Optimize the onboarding process with the objective of boosting conversion rates, empowering users with self-directed interactions, and simplifying the overall journey for improved clarity and seamless completion.
Why is onboarding important?
Played's value flywheel underscores a business model centered on enhanced user experience, fostering referrals, augmenting customer onboarding, spurring increased activity hosting, and expanding reach. This virtuous cycle begets amplified revenue, richer insights, and iterative product enhancement over time.
Furthermore, onboarding stands as the initial point of interaction with the product, presenting a pivotal opportunity to acclimate users and bolster conversions through heightened engagement. Wyzowl’s research substantiates this importance, revealing that 63% of customers factor the onboarding phase into their decisions regarding service subscription or product purchase.
Primary Research
Gathered data compiled by the sales team to understand user preferences and pain points to support research. Conducted interviews with 3 key customers to understand their experience.
Observed screen recordings to get insights into user behaviours.
Customer journey map
Customer journey map was created based on user interviews conducted which helped to identify different touchpoints which required interventions. It was observed that creating storefronts as a part of onboarding process was a bit time-consuming as it required users to be quite attentive. This prompted the team to analyse the onboarding flow in order to make it smoother and less overwhelming.
Problems and pain-points
While new customers get a demo session of the platform before they sign up for the product, there are still some challenges faced by them when onboarding. User interviews and customer feedback sessions allowed the team to gather insights on user behaviour and pain-points.
Overwhelming Onboarding Experience: The onboarding process presents users with an extensive amount of information without a clear structure, leading to confusion and difficulties in keeping track of progress. It was observed from the screen recordings that about 67% of users find it challenging to navigate through the lengthy flow.
Limited Onboarding Flow Navigation: Users face a significant inconvenience when setting up activities and schedules, as they are unable to navigate back within the flow. Exiting the flow to make changes results in an irritating user experience and disrupts their journey, potentially deterring users from completing the setup. More than half the screen recordings showed this.
Sign-Up Errors: About 79% of recordings showed the lack of password visibility during the sign-up process often leads to users mistyping their passwords without being able to verify their input. This frustration leads to abandoned sign-ups, causing a loss of potential users and hindering the onboarding flow's efficiency.
Secondary Research
As a part of secondary research, analysed the onboarding processes of competitor products in the same industry or niche by testing them to identify best practices.
Relied on UX theories from existing research conducted by established UX resources.
Some key practices included - progress tracking, tooltips educating users, onboarding tutorials, success screens, animations adding user delight, preview mode and progressive disclosure.
After analysing the primary and secondary data collected, following recommendations were made for Played:
Solutions
Product wireframes
Improved sign up page: Enhance sign-up process by allowing password visibility, adding social sign-in options, and improving microcopy for streamlined onboarding with reduced errors.
Success screens: Implementing success screens after completing key onboarding steps will provide positive reinforcement to users, motivating them to continue the onboarding process with a sense of achievement and avoid abandoning flow.
Tab with overview of onboarding progress: Adding a progress section on the top left of the Activities page will help users to easily navigate back to where they left off, in case the users leave the process midway, thus avoiding frustration.
Progress tracker: Introduce a progress tracker to help users understand their current stage in the onboarding journey. Grouping similar categories of information into sections prevents overwhelming users with lengthy forms, ensuring they remain focused and comprehend the required information clearly without causing confusion.
Preview mode: Implement a preview mode that allows users to visualize how their inputted information will be displayed in the platform. This feature helps users to confirm their selections and make any necessary changes before finalizing the onboarding process thereby reducing overall time in decision-making. A positive onboarding experience leads to higher user satisfaction and improved retention rates.
User flows
High level user flows show that information that was not essential was removed from the onboarding process and long form was broken down into smaller chunks of information to reduce cognitive overload.
Passing on to development
Upon completion of the UI/UX phase, the designs were transferred to the front-end developer. Aiming to alleviate prior design-dev inconsistencies and recognizing the importance of early bug detection, a proactive approach was adopted. After CSS styling of components, designers meticulously scrutinized the code to match Figma designs, ensuring pixel perfection. To offer a tangible preview of the product's appearance and aid developers in understanding interactions between screens, I fashioned Figma prototypes incorporating UI screens, which were shared with the team.
While the product remains in its developmental stage, the lack of metrics precludes assessing changes in onboarding metrics. Nevertheless, a usability testing strategy was devised for the first iteration, involving a select group of potential users drawn from the team's network. Success benchmarks were recommended, encompassing task completion time, success and error rates, as well as efficiency metrics considering elements like clicks, steps, and interaction volume for task accomplishment, alongside the interface's intuitiveness and clarity. It's important to note that the testing process is ongoing and the final phase is yet to be completed.