Founded in 1848, The University of Ottawa is the largest French-English bilingual university in the world – a crossroads of cultures, languages and perspectives that drives new ideas. The university wanted to redesign an internal application called uoZone. The goal was to give uoZone more functionality, therefore, the application could be used as the primary student portal - migrating the school staff and students away from several proprietary applications that had previously taken care of timetables and other student data.

uOttawa Original uoZone uOttawa Original uoZone

Revamping from the Ground Up

Throughout onboarding it was clear that the existing uoZone was not providing useful information to students. The original uoZone was mostly just messages from faculty and student associations, with very little relevant information other than news. The university wanted an updated student portal for students to access information about their courses, schedules and messages. We worked with another consultant to flush out the information architecture of the new application based on the user roles of students, faculty members and administrators.

Form and Function

Wireframes were provided by the other consultants, however, I had to do quite a bit of sketching to come to a decision on how the application header would be displayed. We were building the University’s first responsive application - and this was back when responsive design was still pretty new (2012). One of the features that took a good amount of time to design was how the University logo would look with the uoZone branding next to it. We eventually settled on a tab-like separation between the two, but gave the tab a useful function of revealing the logout and settings menu options when in a mobile view.

uOttawa uoZone Sketches uOttawa uoZone Headers

User Roles

It was important for us to define different user roles. Then, based on the defined roles, curate the most useful and relevant content for them upon login. Depending on which role was assigned, different content would be displayed in your dashboard; which would be relevant to you.

uoZone Main Dashboard

Modular and Movable

We needed to make sure that with multiple designs for landing pages that the content was modular and could be placed easily in different sections of the site. At the time, I remember researching and seeing the Google Now design that had just launched. I thought the idea of using ‘cards’ would be perfect for this project. The design borrowed ideas from the original uoZone, so it would be familiar to the existing 50,000 users. The design was structured in such a way that it would make the content easy to be moved around and plugged into different places on the page.

uoZone Main Dashboard

Search Capabilities

Coldfront Labs Inc. also wanted to focus on the “search” feature that is one of the most useful and widely used functions. So we created a search design that organized content into different types, and displayed quick results for users so they wouldn’t have to leave the main dashboard until they found what they were looking for.

uoZone Search uoZone Search Results

Numbers that Matter

After rebuilding uoZone and looking at the new analytics, it was clear that the project had succeeded. There was a huge drop in bounce rate most like due to the fact that the application now provided useful information to students and faculty. The average session time increased by almost 200% and the number of pages that users navigated to within the application also increased dramatically.

200%

Outcomes

Learning to Compromise

This was one of my first major projects with Coldfront Labs Inc. This project was comprised of a wide array of stakeholders. Not only was Coldfront Labs Inc. working with the university’s marketing team, we were also working with the communications department, other consultants, faculty representatives, and the information technology department who would be maintaining the website after we left.

All these groups had large teams and people who felt entitled to dictate what the application should and would look like. In the end, it was about convincing many people why specific design decisions were the best ones, and facilitating compromise between groups who wanted to go in different directions. I came away with increased confidence in both my design aesthetic and ideas as well as effective strategies on how to sell them to different types of people across the board.