RANKING
Objective
To provide a trustworthy content that helps students take wise decisions. Business metric was to lower the bounce rate and increase registrations from the page.
Contribution
• Contextual Enquiry
• Task Flows
• Wireframes
• Usability Testing
Platform
Desktop, Mobile
Role
Principal Designer
Every year different publishers rank various colleges on different parameters. To showcase this multitude of information and what to prioritise in between is a tough task. In earlier version, the rankings page was neither solving user problem nor it was converting well. With students' in mind, when the new version went live, it increased Registrations by 62% and responses by 48% (one week before after) and registrations by 220% and responses by 122% (YOY).
Analysing the existing design
Post analysing the existing design, through user testing, heuristic evaluation, and studying business metric, key problem areas surfaced out to solve:
Problem #1: Big Banner on first scroll
Problem #2: More than solving the problem, ranks were bringing confusion
• Scanning pattern on this page required content to start with ranks
• Instead of multiple publishers shown at a time, one gives more trust
Problem #3: Less Interlinks, Less Credibility, Higher Bounce Rate
• Users were less engaging with the content, design was not utilising related content thoroughly.
Problem #4: Consistency – style guide was not being followed, design was less consistent, Call to Action Buttons were not in sync with rest of the site
Existing Design
Design Process
Define Problem › Analyse Data & User Behaviour › Ideate › Validate
We wanted to validate our hypothesis that the current design was not matching with the user mental model and to do that we started with the existing flow analysis. In the existing flow it was clear that interlinks were missing or very weak. If users were given more choices/insights their probability of creating response goes up.
Flow Analysis
The Solution
Multiple iterations were made and tested out with users. Pain points that surfaced out to solve were:
• Multiple interlinkings add value to users and give credibility for the available insights on shiksha
• Users scan differently on ranking widget than any other tuple
• First thing they want to see is ranks which is different from results page tuples where first thing can be either an image/logo or listing name
• It is also very common pattern for other rank-lists eg: billboard top 100
• Multiple ranks also confuse users for decision making
• However, at the same time they also want to know how each rank is moving in relation with another
• To solve this, individual publisher page was required with an option to view all publishers page
Wireframes
With each iteration we tested with users, it was clear that users wanted ranks to be placed left, as this was acting as an anchor for the page. In order to lower the cognitive load on users, we took a decision to only show one publisher upfront. Increased interlinks (reviews, questions & answers, no. of courses) for more insights to help students decide on a given college.
Improvised Versions (Desktop & Mobile)
