Sample Post 2

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, I will be focusing on the finding universities part of a students study abroad journey.

If you would like to see a detailed review of this case study you can checkout this video

Introduction

The typical journey of a student who wants to study abroad starts with finding the right university, with the right course and within their budget.

Journey of a study abroad aspirant

Yocket’s Explore module is a comprehensive guide to universities worldwide, including information on courses, tuition fees, scholarships, and rankings.

  • With over 1000+ universities to choose from, Explore provides a convenient way for students to search and compare universities.
  • Students can start their application journey from Explore by shortlisting universities that they’re interested in and then applying to them.

Understanding the problem space

With more than 1000 students visiting Explore daily, getting this module right was crucial. We identified a few significant problems with the current working of Explore—

  1. With a database of 1000+ universities, the filtering system was broken. It was difficult for students to find and use the filters, making it hard for them to quickly narrow down results.
  2. Poor search experience.
  3. The university cards lacked a clear information hierarchy and did not highlight the key data points.
  4. Though students were asked for their course and country preferences during onboarding, the platform did not show personalised content for repeat students.
  5. The layout in which the results were being displayed was ineffective and students would have to scroll endlessly to find what they want.

Explore is the first place on the Yocket platform where most students land to start their study abroad journey.

We wanted to improve two key business metrics through Explore —

  • Improve retention — We saw that students who shortlist universities on Explore tend to come back to Yocket as they found the universities they were looking for and were ready to perform the next steps.
Benefits of shortlisting universities
  • Increasing the number of universities shortlisted — We wanted to improve the number of students shortlisting universities and the amount of time taken shortlist them.
  • We wanted to improve a few more metrics, which I have mentioned at the end of the case study.

This project was particularly significant as it was the first to adopt our new design system.

Design process and challenges

  • Through Explore, we worked on developing the Yocket design system. Each component had to go through multiple iterations before it could be added to the system. It was a challenging process, but one that ultimately paid off as we were able to create a comprehensive design system.
  • To design the Explore feature, I analysed websites that effectively utilise design patterns such as filters and search. Although I also conducted a competitive analysis, there were no competitors with a similar feature for us to reference. Therefore, I looked at other websites that had implemented these patterns extensively to guide my design decisions.
  • I created multiple versions of each flow and prototyped them to evaluate their performance in order to identify the one that was most effective.
Iterations

I. Filtering System

Ensuring that students can quickly find what they were looking for with the help of filters was the primary focus.

1. Improving discoverability of filters

The first thing students would do on Explore is filter and then browse universities. In the old version of Explore the filters were hidden in a side modal which was a poor experience as it reduced discoverability of filters.

Old version: Poor discoverability of filters

By making the filters available in the primary view, students can quickly access the filters and narrow down their results. It also help students understand how to search for universities if they are unsure where to begin.

New version: Displaying filters upfront on Web
New version: Displaying filters upfront on mobile

2. Grouping of dependent filters

In the old version of Explore there was no clear distinction between parent and child filters. For example —

1. The Avg. Course Tuition Fee filter is disabled until a course is selected from the Courses filter. There was no way for the student to know this in the old version of Explore.

Old Version: Related filters were not organised into groups

In the new design I decided to group these filters making it obvious that certain filters have a parent-child relationship. From this new design it is clear that Avg. Course Tuition Fee can be selected only if a Course is selected.

New version: Working of Tuition Fee filter when no course is selected
New version: Working of Tuition Fee filter when courses are selected

On mobile the Tuition Fee filter progressively loads after a course has been selected

New version: Working of parent-child filters on mobile

2. If a student selects multiple countries, the Location filter will be disabled. By adding the Location filter as a child of the Country filter, it is easier to show the relationship between the two, which was not the case in the previous version.

New version: Working of Location filter when multiple countries are selected (Web)
New version: Working of Location filter when one country is selected (Web)
New version: Working of Location filter w.r.t Country filter (Mobile)

II. Improved search functionality

The search experience in the old version of Explore was missing auto-predict and the overall look and feel of search also needed improvement.

With such a large database of universities and courses available on Explore, I wanted to ensure students could locate what they were looking for quickly and easily.

Old version: Poor search experience

1. Decreasing the chances of a ‘No Results’ page

The previous version of Explore had a search feature that did not provide suggestions or assistance if the search query did not return any results. This made it difficult for students to find the information they were looking for.

The updated version includes an auto-complete feature that provides suggestions as the student types, helping them find what they are looking for more quickly and easily. For example, if a student searches for “Computing,” they can choose from suggestions in the drop-down menu or see all results for that phrase on the results page. It reduced errors and saved time by not having to type out the entire query.

New version: Auto-complete search suggestions when a query is typed

2. Searching within categories

In the updated version of Explore, search results are labeled as either Course or University to make it easier for students to find what they are looking for. This categorisation makes it easy for the student to skim through the results faster.

Students can also search for a query within each category. For instance, they can search for all “Tourism courses as well as all “Tourism” universities separately.

New version: Displaying labels for search suggestions and searching within Course and University categories

Here’s what the search feature looks like in action —

New version: Searching for a course or university

Written By

Share with

Related Posts

Sample Post 3

60 Days of Design is a personal project to challenge

Sample Post 1

There’s a couple of methods for creating complex circular patterns