Works
About
English
Korean
From tutorial to onboarding:
Designing guided tour for Prep.Pie
QANDA, Education, Web, 2024
INTRODUCTION
Prep.Pie is an AI-powered study aid for university students, summarizing lecture slides into numbered notes and providing explanations for uploaded problem sets. The existing tutorial didn't effectively communicate the product's value, impacting the conversion rate. We designed a guided tour to enhance the holistic onboarding experience, gradually delivering the value and empowering users.
the team
1 designer, 1 product manager,
1 UX researcher and 2 engineers.
my role
Responsible for end-to-end design of onboarding, and assessing design impact with product manager.
timeline
Feb 2024 - Mar 2024
BACKGROUND
From the funnel analysis right after the release, the team found out that users churned during the tutorial session and number of subscriptions were much lower than expected. This was contrary to user’s high WTP (willingness to pay).
We decided to redesign the tutorial session, and we conducted interview to see any user problems within the step.
overview of as-is flow
The tutorial starts with setting the account.
On the left bottom it explains each feature, and users can try out with their own files.
Users can see the actual result after trying out the feature by their own.
After the tutorial, users are directed to home page with subscription popup.
user problem
The problem was that users didn’t get a grasp of what the product is actually about.
Totally new concepts, such as “Prep Sets” or “Prep Notes” are only shortly explained on the bottom left.
Yet it provides the procedures well so users follow the instructions anyway.
Then users wait several minutes for results to appear on screen.
They get to know the product value at the very last step of the tutorial, which is after they see the results.
Then, all of a sudden, it asks users to subscribe.
Users didn’t pay, because they didn’t understand the product value.
problem statement
University students liked the idea of shortcuts for exam preparation, but the current tutorial didn't meet their needs and only described the service mechanically. How might we make the tutorial more relevant and clearly show how our product can help them?
process
Solidifying goal user experience with Jobs-to-be-Done
We rewrote user jobs with JTBD framework and juxtaposed them with user contexts to define what a successful user would look like after completing the tutorial.
Are we serving
the goal well?
Despite its shortcomings, the as-is tutorial was covering the core functional jobs pretty well. Hence instead of redesigning the whole tutorial, we designed another guided tour to stack upon the preexisting tutorial.
Tutorial
Tutorial + Guided Tour
=
Onboarding
Experience
Principles aligning design with user jobs
We wanted to address not only the core functional but also related and emotional user jobs. Therefore we set some principles to align components and UX writings with peripheral user jobs.
Be clear
Be clear and straightforward when instructing users.
Step-by-step
Gradually introduce features, so that users can understand how Prep.Pie can help them.
Empathetic
Start by building a connection, then gradually and emotionally empower them.
Defining guided tour flow
The guided tour had to be concise yet comprehensive. We constructed the flow so that the guided tour session can be conversational and solve user’s question about the product.
solution
Empathy: start with relating & offering solution
The guided tour begins by empathizing to the user's context and offering a solution to it. By pointing out user’s problem and showing a glimpse of solution, user can have a grasp of what the product would look like.
Step-by-step: Gradually introducing new features
Since the product is different from others users may haved used already, the guided tour introduces new concepts step-by-step. Introduction of each feature shows only actions delivering greatest value, keeping it concise.
Empowering : closing with approval
After introducing features, the guided tour closes with empowering tone, along with introducing premium subscription. However, it is used only at the end to strike a balance between being informative and emotional.
impact
By introducing guided tour in addition to preexisting tutorial, conversion rate from sign up to tutorial completion increased x2.28, and number of paid users increased x1.43.
lessons learned
Using JTBD framework was highly effective. While designers can get lost in infinite possible solutions, it narrowed the problem down in a very customer-centered way. We were able to keep our efforts laser-focused on the user and ensure our squad stayed aligned.
Another thing is that user onboarding is just like onboarding. Whether in HR or user flows, shares the goal of helping newcomers feel competent and supported. The key difference is that user onboarding should be minimally intrusive rather than overly elaborate.
but how can i improve?
Refining the small details could significantly elevate the overall user experience. One key detail is the tone of the UX writing. Since the product targets US university students, immersing ourselves in their culture would have led to more nuanced and relatable UX writing.
Another detail is the graphic assets. In the context of US students, more sophisticated graphics could have enhanced the user experience, making it more enjoyable. Realizing this has driven me to sharpen my graphic design skills to better align with their preferences.
Copyright © 2024 Geehyuk Jeong. All designs and content are original. All rights reserved.