UofT DWRP Phase 2

Website redesign to create a template and refresh the user interface.

Overview

After completing the Phase 1 of the website redesign, I got the chance to help with design in the second phase of the project. Our team gained more clients for the website, which got us to evolve the project into a template that could be customized to each departments’ requirements. I was responsible creating hi-fidelity mockups for the templates and gather feedback from the clients. Besides that, I was tasked with testing the UX implementation and was heavily involved with the developers during the process of creating the template. I also created a styleguide for the for the developers to use as base style for the project. Using the axure prototype to demo our team was able to get 20+ clients onboard.

The problem

After fixing a lot of the major UX issues, our team was able to get more clients on board. But at the same time, overseeing multiple websites on multiple environments and testing to make sure all changes were being implemented properly became an issue. A lot of time being was spent on testing taking away time from designing important features and functionality while not being scalable.

To fix this issue our team in collaboration with devs decided to create a base template with a shared code base and styles. This would allow us to have more control over the changes and less websites to test freeing up more time for the team to work on more meaningful stuff. It sped up our process for delivering changes, with shortened release cycles and more polish on the website provided by design.

Requirements

This project had a lot of varying requirements, since it was being customized for individual departments. We decided to create a base set of functionality and style requirements for the template. Some of them are listed below

• Implement the new IA, which ensures that there is no piece of content which is more than 3 levels deep

• Create a style guide for components that contains all the different states it can have, with AAA accessibility guidelines in place

• Create a base style for each module that is available to each department

• Create a base template which is responsive with a mobile first approach

• Update the UI to have more vibrant colors

• Work with the communications department to update the content for the base theme, which guides the user to update their content into the new website

• Release with the fewest amount of bugs

Final Design

We carried out user research workshops in order to test usability of the website, mostly using guerrilla testing methods. During this process I learnt how to use card-sorting and tree-testing to determine information architecture for the website that fit the users mental models which I used later in my career while working on the Indellient website. The final prototype had a new refreshed look using University of Toronto brand guidelines, had a AAA accessibility rating and robust functionality that intrigued departments around the entire faculty. This was rolled out eventually to a lot of departments, after I finished my tenure at the university.

Some of the departments that have received their new updated websites include Drama, French, Statistics, Faculty of Arts and Science, Religion, History, Chemistry, Italian Studies, Linguistics, Psychology, Spanish & Portuguese to name a few. Below are some screens from the High-fidelity mockup and a link to the fully clickable responsive prototype here.

Takeaways/learnings

This was my first design project, working in a professional environment helped me a lot things about working with developers and clients. Some of the key takeaways were

• It usually takes longer than anticipated to implement designs when the technical feasibility is unknown

• Testing the implementation of the design is an important step to make sure there are no inconsistencies

• Getting to know how the developers work and the limitations of the the technologies being used helps smoothen the design process

• Involving stakeholders and/or decision makers early and often is important to shorten design cycles