top of page

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.

cover Image.jpg

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.

  1. 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.

  2. 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

  1. 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.

  2. 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. 

  3. There’s no guided way for students to go about the study abroad journey. 

  4. 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. 

2. Persona.jpg

Yocket user persona

How do we measure Success

  1. Adoption- Number of users setting up their planner Dashboard.​​

  2. Conversion- Increase in the purchase of premium and allied services. 

  3. 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

Screenshot 2023-04-01 at 5.07.11 PM.png

high level flow (Created in Miro


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. 

Visual 1.jpg

Dashboard web view

Visual 2.jpg

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. 

8. Walkthrough.jpg

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).

9. Walkthrough.jpg

Dashboard walkthrough Iteration 2

10. walkthrough video.gif

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. 

11. loader animation.gif

Loader animation for web

12. loader animation.gif

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. 

13. free user.jpg

Dashboard for free user

14. kickstarter user.jpg

Dashboard component for kickstarter user

15. Kickstarter user.jpg

Dashboard for kickstarter user

Launch Specification on the platform

  1. New banner on the offer & announcements zone.

  2. ‘New feature’ Tag on My Profile.

  3. 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. 

16. feed locking flow.gif

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. 

17. accordion design.jpg

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. 

18. edit stage and focus areas .gif

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. 

24. final updated screen.jpg

Final Dashboard screen

19. final updated flow gif.gif

Final Dashboard Flow

Edge Case Design

Created all the edge case design for all the scenario like

  1. All task completed

  2. No task completed

  3. One or more task completed

19. milestone completed.jpg

All task completed

20. Not completed.jpg

No task completed

21. half competed.jpg

Partial task completed


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 )

  1. 1693 user have started setting up their dashboard in the last 30 day of launch which is the 85% of the target(2000/month).

  2. 81.63% conversion rate form clicked on planner hooks to opened the planner and setup the dashboard.

22. Anytics data.png
23. Analytics Data.png

Analytics data impacted by design till Apr 5, 2023 (Source: Webengage)

Thank you

Thank you for having the patience to go through the long and detailed project. During this project, we went through up and down, multiple discussion, feedback with internal stakeholder to understand the constraints, developer to understand the feasibility.

As a lead product designer, I've learned that every project comes with its own set of unique challenges and opportunities for growth. Through developing the leading design process, I've come to appreciate the importance of collaboration and feedback in the creation of innovative and effective designs.

Thanks Sargam for your contribution on this project and wishing you all the best!

Further improvement on the planner design after stakeholder and user feedback has been picked up by Meet and Richa from the design team. 

You can find me on Twitter and Linkedin if you have any further questions.

Check out my latest post on Linkedin here.


bottom of page