Simplifying the search-results card | part 6
This is the sixth in a series of articles, documenting the processes and steps we take towards improving and innovating our product. By understanding the student journey in and out, we’ll show how a platform can be built that is valuable to students and agile to the demands of international education.
Product Innovation Series | Part 6 – Simplifying the search-results card
One of the underlying principles of a great online experience is to invite the person on the other end of the www address to a conversation.
Social innovation designer Marc Rettig once shared that
“When you design an interactive product, you are creating the setting for thousands of conversations, which will be spoken between product and person.”
At StudyPortals, we try to stay in a constant, open dialog with the millions of students who make use of our platforms every day. Our engineering and UX team is tirelessly working to keep the conversation alive, and testing which parts of the website speak clearly to the students, and which less eloquently so. And we listen.
Just recently, we conversed over a new topic. After improving the search algorithm, it was time to look at the next step: the presentation of search results. We looked at how our search results are displayed with a pair of critical eyes. Well, to be precise, with an entire cohort of students.
Opening the conversation
So, we started with the basic, yet essential question: What is the function of the overview of search results? And the answer that we almost unanimously concurred with was rather simple: to easily scan through the listed options and swiftly detect the most sough-after information.
Ok, great! Now, what would that information be?
We had assumed almost all the information that is comparable between two programmes would be useful at first glance. As a result, we had populated each search result with as many items as we could fit. “Jam-packed”, we thought. So, we had to test if the items were all that necessary.
To find out what would make a student click on a particular programme overview for more details, we asked 200 students. Out of all the responses we got, we ranked the 15 most commonly named components, and prioritized the top 5:
- Programme title
- Short description
- University name
- Tuition fee
- Duration of the programme
Armed with those insights, we took another look at how those five elements were currently presented in our search results.
It turned out, not only was the information available for each programme a lot – title, country, city, university, IELTS, CTA, compare option, university logo, but also quite a few of the elements were clickable. That’s a lot of action on a small card space! It could easily lead to distraction and breaking the logical flow of processing information. It was time for us to ask the students again, and verify how they interacted with the search result cards on MastersPortal.
We generated a click map:
Notably, the majority of clicks were distributed among the following three elements: title of the programme (65%), detailed description button (12%), and the quick add to the comparison tool (10%), the absolute winner being the programme title.
It was clearer now that more choice isn’t always better, at least not when it came to design. To enable a more intuitive flow, our designers were increasingly leaning toward a simpler, visually cleaner and less cluttered visualisation.
The redesign stage is when it gets really exciting, and the team taps into their full creative repertoire.
To give search results the optimal functionality and aesthetics they deserve, we combined the elements students had previously given most priority with their actual click behaviour.
We’ve also given attention to some of the runners-up: format, university name and logo, and country, and we kept them in the overview, even if less prominently featured.
While the fresh new design is still in the making, we’ve already deployed the new usability function. And we went for maximum simplicity: No buttons, no highlights, no distractions.
In fact, the new search-results card will take you to the programme page with just one click, no matter where you click on it precisely.
We mentioned in the outset that smooth browsing and quick comparison were our starting points. Mobile display of results sets the difficulty bar one level higher. So, looking at the results generated by a single query, we also noticed that only one listings would fit a single screen preview, making it difficult to simultaneously scan multiple programmes.
The next challenge for the smooth operators on the engineering team – the UX designers – is to redesign the mobile preview in such a way that it can list up to 5 result cards in one screen preview on your smartphone.
Soon, students will have more programmes at their fingers and spend less time scrolling. Keep an eye on the Product Innovation series:
Part V – encouraging early website registrations
Part IV – mobile-friendly display
Part III – improving search results
Part II – insights into visa requirements
Part I – adding transparency about admission chances
About the series – introduction
For more updates, follow us!