Universities of The Netherlands

UNL, the umbrella organisation for Dutch universities, partnered with Total Design to design and develop a course search-engine. With it, users should be able to find courses from all partner universities in one place. A new identity designed by Remy van der Geer from Makepublic was the creative starting point.

My part in the project was to translate the identity into UI elements that carry the identities’ spirit while remaining practical and understandable.

A level playing field

Key to the design of all elements was that no one university got advantaged over another. All universities should receive the same amount of exposure and have an equal chance that potential students apply to their courses. This is done by shuffling the order of the universities wherever possible, or otherwise sorting them alphabetically.

Explore, search & filter

When opening the website, users are directly met with a search bar. If someone does not know exactly what they looking for, a group of carousels follows below. They allow the user to explore courses by areas of study, specific university or highlights selected by UNL. The carousel cards are designed to display up to five lines of text for long course names, and show users quick stats about the course via a “see more” button.

Both the carousels and the search bar lead users to the course search engine. Here users can search for courses and quickly narrow down results by using faceted search filters. The result cards feature the most relevant information at a glance: course title, quick stats, university logo. A subtle hover animation shows users which card is in focus. If a user needs more info, the card expands by clicking on “see more” to reveal a course description. Via “More info” users are directed to the actual course page on the partner universities’ own website.

The faceted search filters are divided into categories sorted by relevance with the most important at the top. Each category can contain multiple options, a range slider and a search bar. If necessary they can be expanded and collapsed, and a “see more” option appears if a category holds more than 10 options. Categories whose names are not clear at first glance can be annotated with an explanation.

Finding courses — on any screen size

All UI elements are designed to be responsive. This is done without compromising functionality — all features work on mobile as well as desktop. Checkmarks adapt in size and hit area, hover interactions change to tap triggers, and paddings adjust to the available screen space. This allows users to search for courses at home or on the go.