Global Navigation Redesign
What is TopUniversities.com?
TopUniversities.com is an education management aggregator website providing an exhaustive range of resources for prospective higher education students across the globe. It includes information on university rankings, courses, admissions, study locations, student life, university news, career advice, educational fairs, scholarships, application help, test preparation, an international student forum and a plethora of blogs and vlogs. The Global Navigation Redesign for TopUniversities.com is an Information Architecture Design project focused on increasing user engagement and conversions by enhancing the website's information discoverability and user experience.
My Role:
Single-handedly executed the redesign of the global navigation feature of the website with complete ownership of deliverables, including:
-
Adopting new tools for user discovery, testing, and feedback
-
IA research processes: Tree testing, Card sorting, and Unmoderated usability research on Maze.
-
UI Design
-
Prototyping
Project Timeline:
6 months. July 2021 - December 2021
Project Typology:
A professional UX Design project for QS Quacquarelli Symonds
Project Focus:
Information Architecture research and design.
Design Process
Evaluate Existing Performance
1.1 User Funnel analysis
1.2 Tracking traffic by top bar
1.3 Clickmap Analysis
Create a Hypothesis
2.1 User Journey Mapping
2.2 Clusters to Themes
UX/UI Design
4.1 Information flow
4.2 Wireframes
4.3 Hi Fidelity UI Design
4.3 Hi Fidelity UI Design
Information Architecture
3.1 Card Sorting
3.2 Tree Testing
Usability Testing
5.1 Writing mission statements
5.2 Task scenario testing
5.3 Copy writing
Evaluate Existing Performance
Why redesign the information architecture?
The website attracted almost 60 Million prospective higher education candidates from across the globe in 2021, with 85% of users actively seeking information for their higher education plans. However, even with the massive average of 5 Million monthly active users at the top of the user funnel, a source-wise analysis of the user funnel depicted a poor conversion rate of only 3% of prospective students enrolling with universities through TopUniversities.com.
Source-wise user funnel distribution and and conversion percentages
UTM Code Tracking
Adding UTM tags to URLs for tracking webpage traffic coming via the global navigation bar
Step 1:
UTM source parameter "?utm_source=topnav" was added to the URL of all the pages being visited by clicking a menu item on the top navigation bar. The UTM code helps us track the volume of traffic originating on the web pages from the Top Navigation bar as the source.
​
Step 2:
Visited URL tracking events with the modified URLs (including UTM tags) were created on Hubspot. An event completion got registered on Hubspot every time a user visits a page on TopUniversities.com by clicking a menu item on the top navigation bar.
​
Step 3:
Visited URL tracking event completion data was collected for two weeks on Hubspot. Applying conditional colour coding showed us the low discoverability of most menu items and high traffic volume on the menu items placed towards the top of the list.
For double planted menu items in the top navigation bar, a medium parameter "utm_medium=<category name>" was added to the URL of the page along with the UTM source parameter to understand which category resulted in more traffic on the page.
For example: The URL https://www.topuniversities.com/qs-world-university-rankings for QS World University Rankings page was swapped with https://www.topuniversities.com/qs-world-university-rankings?utm_source=topnav on the live website.
Inferences:
-
The first three menu items, Ranking Overview, QS WUR and QSWUR by subject, show the maximum number of visits.
-
Other Rankings, University Profiles, Programs Profiles, scholarship pages and Masters Events showed the highest engagement from users besides the top 3 menu items.
-
IGUAGE, webinars, Free Test prep and application builder, show no user engagement.
Clickmap Analysis
Low discoverability of menu items
A deeper Click map analysis of all the category-level drop-down menu items (across the pages with the highest traffic) depicted low discoverability of menu items sitting further down the list.
Creating Clickmaps
Step 1:
Click maps were triggered on the highest traffic pages on TopUniversities.com for 5000 visitors on each of the following pages:
-
Landing Page
-
Rankings Pages
-
University Profile Pages
-
Blog Pages
Step 2:
The consolidated click map data from Pagesense was translated into a tabulated format. Applying conditional colour coding to the number of clicks on the Top Navigation bar menu items helps us understand the highest clicked and the most used menu items within a category.
‘Rankings’ is the most used category
Click maps of the Category level menu items of the top navigation bar recorded the highest number of clicks on the 'Rankings' category, with significantly less engagement on other categories and almost no clicks on the 'Prepare' category.
Create a Hypothesis
User journey mapping of the primary personas
-
Compile a list of what matters most to me when taking a decision
-
​Learn about available programs at a university
-
Learn about scholarships
-
Learn about visa requirements​
-
Learn about what region(s) I’m interested in​
-
Determine if a particular program would support me in achieving my career goals​
-
Learn about program fees and payment options​
-
Look up the rankings of the programs I’m interested in​
-
Learn about student life/ facilities at the university/ region​
-
Fill out applications​
-
Gather all my documents and transcripts​
-
Craft my personal statement/ application essay
-
Learn about scholarship opportunities
-
Track application deadlines for schools I’m applying to​
-
Learn about internship/ work opportunities​
-
Connect with the alumni
-
Learn about career opportunities in the regions I’m considering​
-
Learn about visa requirements
-
Connect with a university representative for questions​
Clustering of menu items to form themes
Hypothesis information architecture to be tested
Hypothesis #1:
Introducing a subcategory level (L2)
Hypothesis #2:
Introducing an L2 level menu item called "Where do I start", including information on QS Student guides, Course matching tool and University and program search.
The following nomenclature will be used in the further steps for the sake of simplicity.
L1: Category-level menu items like Discover, Rankings, Prepare, Events, apply Career, and Community.
L2: Sub Category-level menu items like Scholarships, Career Advice, and Rankings by subject.
L3: Detail pages like QS World university rankings, Student Finance, Destination Guides, etc.
Information Architecture Research
Card Sorting
Step 1:
An unmoderated closed card sorting study was created and launched on Topuniversities.com, and almost 90 completions were registered using the Optimal workshop card sorting tool called OptimalSort.
​
Step 2:
The study included 43 cards (one for each menu item) to be sorted into category buckets on Explore, Events, Apply and Community. An additional category called ' I don't know' was introduced to understand which label/copy users could not understand.
​
Step 3:
The results obtained from the card sorting were viewed on a 'Popular placement matrix'. Applying a threshold range of 70% - 35% on the popular placement validated most card placements.
However, the card depicting a popular placement below the threshold range of 35% were tested again through a tree test.
​
An important observation was that the 'Explore' category had too many cards sorted under it. Hence the explore category was broken into two separate buckets of Rankings and Explored.
The screener questions in the card sorting depicted that almost 60% of users could find what they were looking for on TopUniversities.com. However, the other 40% were neutral about the discoverability of content on the website.
Another screener question showed the priority order of TU offerings according to the Primary Student Personas as follows:
1. Explore Universities and Programs
2. University Rankings
3. Others (Scholarships, Test Prep, CMT, Career advice, etc.
4. Apply to Universities
5. Explore Events
6. Read Blogs and Articles
Tree Testing
29 out of 44 navigation items were validated in the card sorting. However, 15 menu items were not validated as these fell out of the threshold value of the popularity placement matrix or were placed under the "I don't know" category in card sorting. The 15 items were split into two tree tests (8+7) and made live on TopUniversities.com for unmoderated tree testing sessions with live users, and the following completion was achieved.
Tree Test 1: 130 participants.
Tree Test 2: 90 participants.
Research Goals for tree testing:
-
Understanding if the hypothesis of global navigation categories based on user journey stages makes sense to students.
-
Test discoverability of Rankings as a new L1 Category
-
Test new placement of menu items that did not make sense and were not validated in card sorting
-
Test new copy and placement for the menu that fell under the 'I don't know' category in card sorting
Inferences:
-
Low Scoring study with scattered results
-
Why the Scattering? Users click on the L1 items regardless till they find the right one. This could also be a user behaviour of clicking through the tree till they land on the correct answers. This shows L1 labels don't really make sense to the user and need to be reworked.
-
More participants could be responsible for the scattered results. The ideal is 50-70. Any menu item with < 5% clicks (6.5 clicks for Test 1 and 4.5 Clicks for Test 2) is ignored. Statistically insignificant.
-
When a user has trouble locating the correct area of your site, one can guarantee that there's something wrong with how you are labelling things.
-
L1 menu items caused a lot of confusion for people trying to complete this task. If we look back at our tree (and the options that caused so much confusion for people), we can see that the labels do not make sense to the user. Like they are going to events, rankings and explore for every task.
-
10-25% of participants always mark events as the right destination. This shows participants' mental models and should be catered to in the events section.
-
Information scent: Users go to University Search for any Uni-related task. Optimize search journey and search filters.
Example of a task Scenario: Where do you think you would discover new scholarship opportunities for your studies?
Destination: QS WM Scholarships
Final structure of the information architecture
Information Flow
Every Sub Category L2 level heading goes to a landing page with links to the associated L3 level menu items.
Affordance of External and Internal Links
Topuniversities.com connects users to QS products and resources in both internal and external domains. Affordance for External links was separated from internal links by adding relevant icons in hover states of L3 level menu items.
For example, the 'QSWM Scholarships' page goes to a URL address on an external domain for Scholarships offered by QS, whereas Scholarship Advice is an internal link to blog pages on TopUniversities.com
Blog pages as FAQ’s
There is no help section on the existing website, which degrades the user experience. However, current editorial pages providing help with QS products, 'Ranking methodologies', ‘Events Help’ on the existing website can be linked directly from the global navigation.
Find an Event
The primary action button for the Events category 'Find an Event' will help increase the traffic on the events page by creating a new entry point. The events pages are essential from a business point of view.
Next Steps
Currently, unmoderated task-scenario-based tests are running on these designs as survey links on TopUniversities.com. I have created these studies on a usability testing tool, Maze. co. The task-scenario statements were prepared in collaboration with the copywriting team of QS. Once enough data is collected, I will re-work the Copy of menu items, which show low performance. Later, a responsive version for the mobile device will be adapted for these designs.