Waterloo Warriors (2021)

UX Case Study

My Role

Project Manager
UX & UI Designer
Visual & Graphic Designer
UX Researcher
Slick Deck Designer & Presenter

Team

Ashmita Ravichandran
Arshyyan Tayyab

Tools

Figma
Figjam
Illustrator
Photoshop
Procreate
Pencil Sketching

Our General Process

Problem Space πŸ’­

With a complete redesign of the existing Warriors application...

"How might we redesign with the users needs and convenience at the forefront?"

Problem Space πŸ’­

The Waterloo Warriors is an athletics platform which displays important information and resources related to the athletics programs offered by the University of Waterloo. Β The existing mobile application and website is notorious amongst users for being hard to use, navigate, and look at. Common issues include certain buttons with empty links, cluttered, unreadable high-contrast interfaces, and the over-abundance of poorly designed features made using this system tedious.The general audience for this platform consists on typically busy young individuals who need something that is easy and efficient to use in order to fulfill their athletics needs.

Challenges

πŸ“‘

Information Overload

πŸ“Ž

Inaccessible Visuals

βš’οΈ

Empty Links & Dead ends

⏰

Lack of Time

πŸ”Ž

Ease of Search

Waterloo Warrior Interface (before redesign):

Objectives πŸ†

After researching the internal structure of the Waterloo Warriors platform (both the mobile application & website), we came back with three major objectives to achieve with this redesign.

Ease of Usability πŸ“

β€’ Create a new system with the user's convenience and ease of usage at the forefront.
β€’ The system needs to be pragmatic, with improvement in the information hierarchy, accessibility, and with the system being more complex, especially better breadcrumbs.

Information Streamlining πŸ—‚

β€’ Productive public spaces in the public transit system. Creating an environment that positively impacts businesses, mental health, and provides new work opportunities.

Practical Features πŸ”—

β€’ Individuals will have tools to live more efficient and healthier lifestyles with greater ease.
β€’ promoting better organization & stress management.

Game Plan πŸ—Ί

Research Driven Design πŸ”­

Surveys

Our online survey was conducted through Google forms and spread through the different athletics channels at The University of Waterloo. Our surveys gave us substantial quantitative and qualitative data which lead to new insights for us to consider within our redesign of the system.

Interviews

We leveraged our surveys to find University of Waterloo students who were willing to participate in interviews to really help our team understand and uncover how the needs and pain points were going to be addressed in our redesign of the Waterloo Warriors system. Our interviews were held with 5 University of Waterloo Squash team players.

Research Insights

Platform Prefrences

β€’ A significant amount of students prefer the Waterloo Warriors website over the application. With many only using the application if they have exhausted all their other options, or they are performing very simple, straight to the point tasks, such as booking or sport sign up.
‍
β€’ The former claimed that the website was simply better because the system itself was less buggy and didn’t crash as often. The processes were more simplified to use because the application essentially just opened the website on mobile, instead of loading a mobile optimized interface.
‍
β€’ Students also claimed that using the application is disorganized and the icon-centric/one-page design was hard to understand, however, a handful of survey respondents also stated that they enjoyed being able to easily see all their options outright when they opened their application.
‍
β€’ A significant pain point we uncovered within users was how the Waterloo Warriors system never gave users the option to save their login information, which meant that logging in every single time they wanted to use the system was time-consuming and the content wasn’t ever personalized to their preferences, and needs.

Prototyping

Wireframing

Low fidelity screens were based on specific task examples as well as our tentative list of requirements.

Rapid Iteration

With a tight timeline on our project, I decided that rapid iteration was the best course of action as we moved into creating medium fidelity screens. By iterating rapidly, we can quickly identify problems and address them, improving the overall quality of the design. This process helps to reduce the risk of spending too much time and resources on a design that may not work well in practice.

Low & Mid Fidelity

Branding ⚑️

King Warrior

As a symbol of school spirit and the fearless Waterloo Warrior spirit, we made the executive choice to include him within our system as an assistant chatbot. This decision was made to foster a sense of kinsman ship & assuage our users.

Colour Palette

Primary

Secondary

Our Working Prototype

Explore the Figma File

High Fidelity Screens