Designing a Study Abroad Journey Dashboard
for Yocket user: Case Study
Let me explain you the process to make the study abroad process DIY for users by introducing a journey dashboard for the users based on the stage they are in.
Study Abroad Journey Dashboard
About Team
As a Lead product designer at Yocket, I am leading the product design team with 8+ (designers+UX writers) and working on making DIY experience of making Yocket platform for study abroad aspirants.
We have completed this project working as a team (Me and Sargam). I want to take this opportunity to thank Sargam for her immense contribution and creative ideas on planner design.
Project duration- 2-3 week
About Yocket
Yocket is an Ed-tech company that provides a platform to help students who are interested in studying abroad. The company offers features and resources that make it easier for students to find universities, connect with fellow students, track their application progress and more. Overall, Yocket’s mission is to simplify the study abroad process and make it more accessible.
In this case study, we have focused on creating the dashboard for study abroad journey to provide the seamless experience for Free+Kickstarter(Premium) user.
Project Goal
Drive user retention on the platform by guiding the users through the study abroad process.
-
To make the study abroad process DIY for users by introducing a journey dashboard or the users based on the stage they are in. This Includes both Kickstarter and Free users.
-
Additionally, Better positioning of our various services by pitching them to the users who will have the highest intent to use/buy that service.
Understanding Existing handling and current initiatives:
-
As of now, if a new user signs up on the platform, there are various tools and resources available for him and from an engagement point of view, we are not even sure if users use all of the tools available.
-
We do have a platform walkthrough, but we don’t guide the users through the entire study abroad process.
-
We have started Collecting stages of users to better pitch our services. ( A user who has already received an admit, there’s no point in pitching Test prep to him/her ).
-
For Premium users we already have such a system in place where the counsellor assigns the task to the Premium user and all they have to do is complete those tasks.
Understanding the problem space
-
Although we have so many tools and resources, we are not guiding users on when to use which tool, nor at what stage which tool could help them in their journey.
-
For Users who have just started their study abroad journey and are in the research phase, for them, the study abroad process feels a bit overwhelming and they don’t know where to start.
-
There’s no guided way for students to go about the study abroad journey.
-
No consolidated way of showing what all paid products could help the users better in their overall study abroad experience. All of that leads to redundancy in the overall communication to the user, which might not be relevant for them at that point in time.
Understanding Persona
Yocket have two group of user which we are designing dashboard for, free and Kickstarter user. It was a challenge as a designer to create the dashboard which fits best for both kind of user to reduce the design and development effort.
Yocket user persona
How do we measure Success
-
Adoption- Number of users setting up their planner Dashboard.
-
Conversion- Increase in the purchase of premium and allied services.
-
Stickiness- Number of users completing their complete study abroad journey with us.
High Level User Flow
User Onboarded → My Profile Visit → Dashboard Tab Click → Confirm/Update Stage to create Dashboard → Check Pre-reqs → View dashboard → Complete milestones → Fly Abroad
high level flow (Created in Miro)
Solution
Study Abroad Journey Dashboard is a tool, which takes the user’s stage & specific areas where the user requires help as input and creates the entire journey for the user. It provides a set of steps that the user should perform for that stage. The goal is to provide a guided study abroad plan so that they can do everything on their own on Yocket. ( From research to Fly Abroad ).
Mapping User Stage to Milestones of the Study
Abroad Planner
The Actual user stage ( that we are collecting at the start of the Onboarding Process ) can be mapped out to the milestone of the study abroad planner.
Stage Mapping
Exploration and Iterations
We went through the iterative approach to create the design. while exploring few ideas and brainstorming session and multiple feedback and discussion loop with the product manager, researcher, copywriter and designer, we came up with the scalable, simple and easy to user accordion design layout which was suiting based on our need.
Figma Iteration
Design Component
We already have the Yocket design system in place but since we were thinking of new design component which was scalable and fit best for both kind of user (Free+kickstarter). I have created the simple, easy to use, scalable and aesthetically pleasing UI component by taking case of Yocket brand guideline then added to the existing design system
Design component for dashbaord
High Fidelity Design
After multiple iteration of design and feedbacks from the internal stakeholders, we come to the final high-fidelity screen of the dashboard with simple, easy to use and intuitive design which will give more visibility of the complete end-to-end studyc abroad journey in on glance in the dashboard.
Dashboard web view
Mobile app screen
Introducing the Study Abroad Journey Dashboard for first time user
For the first time, when a user lands on the Journey planner (Login > My Profile > Dashboard), we’ll be showing him a popup modal with some information about the journey planner and CTA saying something like “Build your Plan” which later got changed to "View Dashboard" after discussion with UX writer
Initially, we thought of only creating the dashboard based on user have filled the stages in the login process and for other user we will show in default way.
Dashboard walkthrough Iteration 1
After discussion and few brainstorming session, we decided to setup and customise the dashboard and ask the substages and other question to personalise the dashboard to give better experience.
Once user clicks on the “Setup your Dashboard” CTA, we’ll be again asking the user to confirm/update the stage ( this is because the user might have filled the stage way back and haven’t updated his stage). Based on the stage that the user selects, we check for the Prerequisites for the previous milestones.
(For Example, Let’s say a user selected “Shortlisting colleges, planning tests” as his stage, now the pre-requisite to go the “Shortlisting college, planning tests” milestone is that the user should have a completed profile, so we check if the user has a completed profile or not, if not then we first ask him to complete the profile, before unlocking the next milestone.
PS: The user can start his journey on the planner from any milestone (Provided he fulfils all the prerequisites for the previous milestones).
Dashboard walkthrough Iteration 2
Dashboard walkthrough final flow
Loader Animation- to give sense of AI-powered personalised dashboard
Before taking user to the real dashboard we took some information in the login process and few additional info before showing dashboard to personalise the dashboard. In the starting few iteration, we were showing the dashboard page directly which was not giving much sense of personalisation to the users. we though of making gif animation which will appear just before the dashboard to give the feel of AI-powered personalisation.
Loader animation for web
Loader animation for mobile app
One design fits for all (Free + Kickstarter)
We have 2 group of user on the yocket platform.
1. Free User
2. Kickstarter User
Since we were creating this feature for the first time, challenge was to create the design which fits for both group of users. We wanted to create the the scalable and reusable design component for both group of user and save the effort and time fro team to launch it fast.
Dashboard for free user
Dashboard component for kickstarter user
Dashboard for kickstarter user
Launch Specification on the platform
-
New banner on the offer & announcements zone.
-
‘New feature’ Tag on My Profile.
-
Lock the feed after 3 scroll and make it compulsory to collect stage from feed to create personalised dashboard specially for free user.
Once it will be adopted well by the user, we also have the plan to give more visibility to this dashboard by bring on on the top nav bar as part of feed tab (Feed and Dashboard) . this will increase more visibility of the dashboard on platform.
locking feed for user to fill stage and substage for personalised dashboard
Choosing simple, easy to use and scalable design
We choose the accordion fold design which gives the user a seamless and intuitive user experience, as users can easily navigate through different sections of the app or website with just a few clicks.
Not only is accordion fold design practical, but it also adds an eye-catching element to this design. With its sleek and modern look, it's sure to impress users and keep them engaged with the content we have provided.
Accordion Design
Editing Stages and Focus Area
After multiple discussion with the internal stakeholder about meeting user need of editing stage and focus areas on the dashboard, we gave editing options to customised the dashboard based on their need.
Edit Stage and Focus Areas
Final Updated screen
After multiple round of feedback and review of the design within the team we have also added 2 feature which we have discussed above is adding the editing of stage and Focus areas to give user touchpoint to customise and reach to the dedicated service they want from the dashboard.
Final Dashboard screen
Final Dashboard Flow
Edge Case Design
Created all the edge case design for all the scenario like
-
All task completed
-
No task completed
-
One or more task completed
All task completed
No task completed
Partial task completed
Impact
We have launched this feature on Mar 2, 2023 and presenting the data till Apr 5, 2023. we have seen the good number of user setup their dashboard and started using the dashboard. You can find the dashboard on Yocket Live (Login > My Profile > Dashboard )
-
1693 user have started setting up their dashboard in the last 30 day of launch which is the 85% of the target(2000/month).
-
81.63% conversion rate form clicked on planner hooks to opened the planner and setup the dashboard.
Analytics data impacted by design till Apr 5, 2023 (Source: Webengage)