University of Toronto's Online IT Service Catalogue

How would we design a complex catalogue that caters to multiple user groups?

TEAM

Solo Project,
University of Toronto,
Co-op at Enterprise and
Solutions Integration (EASI)
UX Team

ROLE

UX Researcher
Idea Generation
Requirements Analysis
Prototyping
User Testing & Evaluation

I was hired as a UX designer to look into the University Service Catalogue (USC), an online catalogue for all of the University’s IT services available to students, staff, faculty and alumni at the University of Toronto. Given the breadth and scope of online services available, the site was redesigned with ease of navigation in mind - namely, how might users get to relevant services quickly? This involved categorizing and describing services in a way that was easy to understand regardless of audience type, as well as improved information retrieval with the site's search system.

DOWNLOAD CASE STUDY

How it works

The redesign of the University Service Catalogue aimed to create an interface students, staff, faculty and alumni could navigate clearly. Users should be able to easily filter through service types and understand which services they are able to use and how, as well as who to reach out to for help.

We also wanted to reduce search times and look into how users could get a bird's eye view of available services. This included accommodating different navigational styles (e.g. 3-column layout grid) that enabled users to jump between different categories, sub-categories and audience types.

What did users want?

User surveys and interviews revealed a few key issues:

Users wanted different options to search for relevant services.
On the default USC site, users tended to miss the ‘By audience’ tab. When faced with the default ‘By category’ options, they were unsure about what services applied to them. They also cited the problem of not always knowing exactly what they were looking for, which often led to dead ends

Users want to narrow down their search quickly
Users found default service category and subcategory names vague and difficult to interpret at times. They liked the idea of tiered sorting (e.g. sorting by multiple criteria at the same time like audience type and category) so they were able to retrieve information about services quicker

Language and IT jargon on the site was confusing
At times, service names included abbreviations and jargon that users did not understand. Having to figure out what exactly services were meant jumping in and out of service detail pages - a potentially time-consuming endeavour

Lack of filtering and sorting capabilities for simple searches
Without clear options to sort through or filter search results, users felt overwhelmed with search results based on their search criteria

USER EXPERIENCE

EASY NAVIGATION
The main navigational menu gives users a comprehensive bird’s eye view of services that are available to them whilst retaining the ability to jump between categories, subcategories and audience types.
Descriptions of categories and services provide more context to users, saving them time on having to visit each service detail page.
STRAIGHT-FOWARD SERVICE DETAILS
Service detail pages break down service descriptions into scannable sections that users are able to easily glean information from
‘Related Content’ and ‘Explore Administrative and Business’ provide contextual links for users to discover other relevant services
COMPREHENSIVE SERVICE SEARCHES
USC’s new search system eases information retrieval by providing users with a quick means to filter and categorize results in real time.
Search results are tagged and grouped for easy scanning.

USER INTERFACE

Style

Colours, typography and components were based off of the University of Toronto's style guide, which is used across the UX team when designing staff-facing or public-facing applications.

Colour Palette

Typography

Developer Handoff

The main handoffs to be provided for the University Service Catalogue included developer specifications for desktop and mobile designs, outline of text styles, colours and use of gridlines for desktop and mobile designs, and content inventory for service descriptions e.g. content for service detail cards ‘Who is this for?’, ‘Use this service to:’ and ‘Additional Information’.
Below is an example of the developer specs created for the desktop designs.

DOWNLOAD CASE STUDY