QS University Profiles
QS University Profiles showcase information about universities like admission requirements, application deadlines, student and staff, and courses offered. The profiles template is used for 9k+ university profile pages and 100k+ program profile webpages for client universities and other well-known universities on TopUniversities.com. The project aims to make Qs university profiles more useful and usable for
50M+ students every year.
My Role:
Owner of UI/UX Deliverables, collaboration with UR, Product, Business, and Development:
-
Integrating UR team inputs, Page Analytics, Competitive Benchmarking, User Session Recordings
-
Ideation Workshop with Stakeholders, Prioritization, Product and Business Acceptance criteria. The three templates.
-
Wireframes, Medium fi Mockups, and Prototyping. Desktop and Mobile
-
Usability testing and Discussion Guide
-
High Fidelity UI Design, Prototyping
-
Moderated Task Scenario Testing
-
Handover, Stakeholder Demos, Bug Reporting for Beta Launch
Project Timeline:
-
4 x 2-week sprint cycles
-
2 months May 2021 - June 2021
Project Typology:
A professional UX Design project for QS Quacquarelli Symonds
Project Focus:
Double diamond design process | Usability studies | Agile methodology for product development | 
| High fidelity UI design | Prototyping | A/B Testing | Responsive Design
Design Process
Stage 1: Experience Strategy
Doing the right thing
Stage 2: Experience Design
Doing things right
-
User research
-
Page Analytics
-
Competitor Analysis
-
User Session Recordings
Problem
Definition
Solution
-
Ideation with Stakeholders
-
Clusters and Themes
-
Prioritization Voting
-
The design challenge
-
MVP scope
-
Wireframes
-
Medium fi Mockups
-
Responsive Design
-
Prototyping
-
Usability testing
-
Discussion Guide
-
Hi Fi UI Design
-
Hi Fi Prototyping
-
Handoff to Dev
-
Bug Reporting
-
Stakeholder Demos
-
Task Scenario Testing
-
Beta Launch
-
A/B Testing
​
User journeys Mapping for the three primary personas on TopUniversity.com show that most users land on the university profile pages during or at the end of their journey on the website. In addition, bounce rates as high as 67% on these pages made the redesign of the university profile pages significant from a user engagement and a business perspective.QS uses the advanced university profile pages for client universities as digital recruitment solutions for higher education admissions. The client universities can add, update and manage their content and put it to display on TopUnivesities.com. The student leads generated through the advanced university profile pages have high revenue-creating implications.
Why redesign the University Profile Pages?
​
User research for students and clients revealed gaps in QS offerings and the requirements of students using the website and the client universities. The redesign process attempts to solve the product requirements for both users and clients. 500+ paid client universities subscribed to the advance profile page product make the redesign important from a business standpoint. The new designs will showcase information for 9000+ universities on TopUniversities.com, with monthly traffic of 5 Million+ students.
What is the impact? What are we trying to solve?
Who are the users? The three primary user personas for QS
Prestige Seeking Student
Prestige-seeking students are looking for the highest-ranked universities with a good reputation, especially in the subject area of their interest. In addition, they want good student life and student-friendly destinations for their higher education.
Employability Seeking Student
Employability-seeking students are concerned about high graduate employability rates while selecting universities and programs for their higher education. Therefore, they are looking for advice on career prospects and programs that can bolster their professional life. In addition, they want to apply to universities with employer contacts for successful placements and job prospects. They are also concerned about visas to work after graduating to secure a job in the country of study.
Course Focused Student
Course-Focused Students have a clear focus on what subject they want to pursue in their higher education. The teaching quality, research output, eligibility criteria, and the University's reputation for the subject of their interest matter the most to these students. The ratio of females is predominantly higher for this student persona.
Discover
A comparative analysis of higher education aggregator web portals of TopUniversities.com on features and content on University Profile pages. The top 5 competitors: Times Higher Education.com, Hotcoursesabroad, Applybboard, Study Portals, and Shiksha study abroad.
Competitor analysis
Heatmaps were triggered using the tool Pagesense for 5000 visitors. The data analysis depicted an average of 2 clicks per visit and 56% user engagement on the existing university profile pages. In addition, a comparative fold-wise analysis of heatmaps for problem clicks, most clicked and least clicked elements gave insights about what users want on the university profile pages.
A user segment analysis showed an almost equal distribution of users browsing on desktop and mobile devices. However, a tiny segment of users used tab devices. Hence, redesign for desktop and mobile devices would be prioritized, and tab users were statistically insignificant.
Desktop: 55% users,
Mobile: 45% users,
Tab: 1% users.
Click Map Page Analytics
​
​
-
A high number of problem clicks on university highlights in the first fold portray a break in the user's mental model trying to look for university information.
-
Non-used functionalities: Share, Shortlist, Program Search, Social Media follow
-
Lack of visual and information hierarchy
Click maps:
​
​
-
Long text blocks and expanded long program lists trigger distraction in users.
-
Less than 40% of users scroll beyond fold 3
-
Less than 20% of users scroll beyond fold 5.
-
Getting rid of complex UI components beyond Fold 5 might help reduce the page load time of Pages and enhance the user experience.
Scroll maps:
​
​
-
The attention span for the mobile device (18 seconds max) was significantly less than for desktop devices (475 seconds max).
-
A high number of clickable elements are in low attention span zones.
-
Most of the high attention real estate was given to a non-interactive cover image.
-
User attention drastically drops between Fold 1 and Fold 3. (375s to 25s)
-
User attention span is less than 5 seconds after Fold 5, which implies any content placed after Fold 5 gets almost no attention and traction from users.
Attention Maps:
​
​
I watched more than 50+ user session recordings with a mix of device types, browsers, and geographic locations and deduced the following:
Session Recordings
Define
An ideation workshop was done with stakeholders remotely, led by the product team, including engineering, UX, Research, Digital Client Solutions, and Events teams. The insights from the UX research in the Discover phase and ideas from the different stakeholders showed the possible white space for the redesign process.
Next, clusters of ideas and insights were made, which resulted in the following themes for the redesign of the University Profile pages:
Building blocks, Discovering programs, Call to action buttons, Events, Matching students to programs, Bugs, and UI/UX improvements.
The ideas were further voted on by stakeholders from the Product, Engineering, UX, Research, and Digital Client Solutions teams. This prioritized the new ideas and themes, resulting in the following selected for the MVP (minimum viable product) version. In addition, other ideas requiring high development effort and some good-to-haves were mapped to the product team's roadmap for incremental delivery.
The Challenge
The Business Challenge:
-
Lead generation: Capturing prospective student leads for client universities.
-
Brand building: Creating traffic on client Univerity websites.
​
The Product Challenge:
-
Reducing the high bounce rate and increasing user engagement of the University profile pages.
-
Make all the sections of these content-heavy web pages accessible from the landing fold.
​
The Design Challenge:
-
Reducing the long scroll of more than 10 folds so that important information lies in high attention span areas.
-
Complete the mental model of users and remove problem clicks.
Develop
Wireframes
Information Architecture
The information displayed on the existing university pages was restructured and reprioritized to fit the new information flow. The new information structure included the existing university data on QS databases and any further information required to fulfil the MVP feature list requirements.
​
All main categories were included in the local navigation system/page index in a vertical hierarchy. In addition, subsections were included as horizontal tabs for a clear distinction in the information hierarchy on university profile pages.
-
Overview
-
University Information
-
Admission
-
Facilities
-
Expenses
-
Student and staff
-
Careers
-
-
Ranking and Ratings
-
​World university rankings
-
Rankings by subject
-
Employability rankings
-
QS Star rating system
-
-
Available Programs
-
​Featured Programs
-
Undergraduate programs
-
Postgraduate programs
-
Ph.D. / MBA
-
-
Scholarship Advice
-
Campus Locations
-
Visa information
-
Related Content
-
​Social Media feed
-
Related Articles
-
English Language test
-
Medium Fidelity Prototyping
Design interventions:
#1 Page index
A local navigation system using a scroll spy UI component was introduced. All page sections of the university Profile page like Overview, University information, available programs, rankings, scholarship advice, visa information, and related content can be accessed using the persistent local navigation just with a click. Users can scroll through the university profile page and jump between sections using the scroll spy.
​
#2 University highlights anchors
Anchors were introduced in university highlights like UG/PG programs, Rankings, and tuition fees on the cover fold. Students can click on a highlight to land on the relevant section with further information and details.
​
#3 Call to action buttons
'Request a Call Back' is the primary call to action button for students to get in touch with a university representative, generating student leads on the back end. Short and compare were highlighted in the visual hierarchy as a secondary call-to-action button.
​
#4 The Lego 4.0 Design System
Once all the design interventions had been translated to medium-fidelity mockups, the entire design was translated to fit the brand guidelines and UI components from the Lego 4.1 Design System.
Usability testing sessions
After multiple rounds of peer review, the medium-fidelity wireframes were tested with 12 users, including potential graduate and postgraduate level students from the target personas from Eastern and Western Europe, Latin America, Africa, South Asia, and Mainland China. As learning from these usability testing sessions, a user onboarding flow was introduced in the final High Fidelity Design mockups.
Available programs
Program search bar
As available programs are the most used information by students browsing university profile pages, a persistent local program search bar including the three CTAs was introduced.
​
Program preview
A sneak peek preview of the University's available programs was nested under the accordion UI component. Students can get in touch with a university representative or view details on the programs from the preview section. Without disrupting the journey on university pages.
User Testing: Moderated Task Scenario Testing
A second round of usability testing was done after the deliver stage with 10 more users. I was accountable for writing task scenarios, and creating task tests on the usability testing tool Maze.co. The moderated task testing sessions were conducted in collaboration with the user research team. During each of these hour-long moderated testing sessions, we shared the Maze study link with the participant which they tried to complete on a shared screen and we asked followup questions.
During these testing sessions were an hour long, sessions I was involved with a researcher from Bucharest, Romania and students from Nigeria, Jamaica, Brazil, Luxembourg, France, Iran, Uzbekistan, Japan, China, and India. These hour-long sessions observing students struggle with my designs to access the required information gave me a platform to interact with prospective students across the globe and helped me develop empathy for challenges faced by students to access higher education from underrepresented parts of the world.
Deliver
Handoff to the engineering team
At the end of 4 sprint cycles (2 months), the final high-fidelity design mockups and prototypes for Desktop and Mobile devices, of both Lead Generation and Branding templates were shared with the engineering team of QS. The handoff was completed with a detailed design presentation to the engineering team including a download of the bootstrap grid system, UI components, and micro-interactions used from the Lego 4.1 Design system library.
Bug Reporting and Collaboration with the engineering team
Following the agile ways of working I have been a part of daily standup meetings, sprint planning, and retrospectives with stakeholders from product, business, engineering, and quality assurance teams. After the handoff, I have been actively involved with both the frontend and backend engineering teams for reporting UI/UX bugs and getting them fixed on the staging environment for development. The bugs are annotated and reported using the tool Marker.io which directly links to the backlog of the JIRA sprint board of the engineering team.
Showcase to the Global Team of QS
I also got an opportunity to present the new designs of the University profile pages to the global teams of QS at the quarterly Digital and Events (DnE) Showcase in October 2021. The new designs received positive feedback from teams across the organization including stakeholders from business, product, UX, technology, events, student enrolment solutions, university client solutions, the Managing Director of QS Digital and Events Mrs.Claire Whittingham and the CEO of QS Mr Nunzio Quacquarelli.
Next Steps...
The University Profiles are currently under development and a Beta Launch is scheduled in December 2021 for a controlled user group. Post the beta launch, the new designs will be A/B tested with the existing university profile pages for comparative performance analysis of lead generation and user engagement metrics before the full-scale launch in Q1 of 2022.
