Waterloo Warriors App (Redesign)

Overview

The Official University of Waterloo Athletics app redesigned with usability and convenience in mind for the user. In January of 2022, my team and I were tasked with redesigning the Official University of Waterloo Warriors app for our User Experience Design Course at The University of Waterloo. The existing mobile application and website were notorious amongst students for being hard to use, and navigate. Certain buttons would link to nowhere, cluttered, high-contrast interfaces caused users to get frustrated, and the over-abundance of features made using this system tedious.

UX & UI Design | Early 2022

Programs used:
Photoshop

My Role and Responsibilities ⚡️

Project manager - My responsibility was to ensure that we worked collaboratively and efficiently to reach our goals and fulfil project deliverables on top of other coursework that we needed to complete.
Visual Designer - as an artist and a fanatic of digital design, I knew I wanted to apply my design knowledge to create the visual assets and brand identity of our redesigned system.
UX/UI Designer & Researcher - due to our team being quite small, I knew we needed to move swiftly to not only collect data to gain user insights, but as the sole team member that was familiar with the Figma program, I worked to teach tips and tricks to my teammates, whilst also collaboratively designing the user interface.

Meet the Team 👥

Our Team ✎
Sandy Lin (Project Manager, Visual & UX Designer)
Ashmita Ravichandran (UX & UI Designer & Researcher)
Muhammad Tayyab (UX Researcher)

Objectives 🏆

Once our team did some research into the internal structure of Waterloo Warriors (both the mobile application and website), we came back with three major objectives to achieve within out redesigned product: 

Ease of Usability 📝

Our objective was to not only de-clutter the existing app, but create and streamline a completely new system with the user's convenience and ease of navigation at the forefront. The system needs to be pragmatic, with improvement in the information hierarchy, accessibility, and with the system being more complex, it needs better breadcrumbs.

Information Streamlining 🗂

We noticed that many of the users utilising the Waterloo Warriors system were either first-year students who were new to the athletics scene or seasoned athletics stars who needed quick access to certain features or information within the system. These first-year students were approaching the system like a fish out of water, and the surplus of information was very overwhelming for them.

Practical Features 🔗

We knew we needed to design a system with features to provide on-going support to UWaterloo students. With extra attention on the system’s connectedness to the existing UWaterloo Watcard and athletics pass system, and other rules and regulations that the University set around the athletics on campus.

Our Game Plan 🌐

Timeline

Primary Research

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.

Our Insights⚡️

✦ 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 optimised interface.

✦ Students also claimed that using the application is disorganised 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.

✦ The most common 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 personalised to their preferences, and needs.

Identifying the User Base + Opportunities 🔍

User Base

✦ UWaterloo students
✦ UWaterloo students parents
✦ Uwaterloo Faculty

Opportunities ✓

✦ User-friendly application that’s straight to the point, and options are easily visible.

✦ Live chat support and call support powered by a combination of AI and call support.

✦ Frequent actions tailored for and by the user.

✦ User is able to move through the pages freely by giving the user the power to undo an action.

✦ Diverse range of devices are compatible.

✦ User’s activities, clubs, and sports are tracked and directly linked to the application.

✦ User's can have all their UWaterloo athletics resources and information in one place.

User Personas

Our team leveraged the method of user personas to better understand and identify the demographic we are targeting. 
✦ First year student/transfer students
✦ Gym Buff 
✦ Sports Enthusiast

Use Cases 🦾

Task Examples

To gain a better and more specific understanding of how a Waterloo Warriors user might interact with our product, Our team utilised our observation skills to explore possible task examples our user would embark on within our system. The following is one of our task examples:

Concrete task example of Alex (user) logging into the Waterloo system to make a reservation for facilities:

Step One ➔ Access the Waterloo accounts: Go to the Waterloo website and log into the student or staff accounts using the provided username and password.

Step Two ➔ Find the reservation system: Navigate to the section of the website where reservations can be made for facilities, such as the Physical Activities Complex (PAC) and the Competition and Intramural Facilities (CIF).

Step Three ➔ Choose the desired facility: Select either the PAC or CIF, and specify the desired date and time for the reservation.

Step Four ➔ Check for availability: The system will show if the selected time slot is available for reservation. If it is not available, Alex will have the option to check for the next available time slot on that date.

Step Five ➔ Make the reservation: If a suitable time slot is found, Alex can proceed to make the reservation by clicking on the "Book Now" button.

Step Six ➔ Provide required information: Fill out the required information, such as name, email, and phone number.

Step Seven ➔ Review and confirm reservation: Review the reservation details and confirm the reservation by clicking on the "Confirm" button.

Step Eight ➔ View future availability: Alex can also view future availability of the facilities by selecting a different date and time. This will show all available time slots for that facility on the selected date.

Step Nine ➔ Book an appointment: If Alex finds a suitable time slot, he can book an appointment by following the same steps as before.

Step Ten ➔ Receive confirmation: Once the reservation is confirmed, Alex will receive a confirmation email or notification with the details of the reservation, including date, time, and location.

Tentative List of Requirements ❥

With our generated task examples in mind, we began to brainstorm potential features to include in our system, which we separated into four categories to determine their priority and importance to our system.

Must-Have

✦ Homepage
✦ Special sport event/game events page to keep users up to date on upcoming sports events.
✦ Easy taskbar navigation for users to access different pages of the system very quickly.
✦ User-friendly undo option for any actions taken.
✦ Facility booking feature with greyed out dates for fully booked days. Calendar to display available/not available dates for facilities.
✦ AI-powered online support for feedback through live chat.
✦ Automatically save login information and recognize returning users.
✦ Favourite facilities page and recent bookings for easy access to bookmarked clubs, facilities, and teams.

Should Have

✦ Campus map feature with Google Maps integration for easy travel to facilities.
✦ Notification feature to remind users of upcoming events, classes, and cancellations.
✦ My "clubs" or "programs" page for each user to personalise their app experience.
✦ Online Watcard scanning for faster entry into facilities and registration of memberships.
✦ Links to group chats and club servers when team members join a club/sport.
✦ Easier-to-use favourite page to add clubs, classes, facilities, and teams for faster navigation.
✦ Option to add meet times to Google/Apple calendar for the clubs the user joins.
✦ Live scores of on-going games at UWaterloo.

Could Have

✦ Music & streaming service linking for quick connect-ability to the workout machines at facilities.
✦ Warriors be well/wellness page for additional resources for students.
✦ Link to WUSA Health Plan for health & wellness related resources.

Exclusion

✦ Pop-up advertisements on the results & home page as they can deter users from using the system and can make the app look unprofessional.
✦ Feedback form as it can be replaced with an AI-powered live chat feature that provides more interactive and personalised feedback.
✦ Full Icon page as it can make the app look cluttered and unprofessional.

Visual Design ❖

We wanted our visual design to complement and coordinate with the existing University of Waterloo Systems, so as the Project Manager and Lead Project visual designer, I had to take into account the existing Waterloo aesthetics and assets, and find a healthy medium with the new visual direction we wanted to take our application to.

Out with the old, in with the new

we needed to create a system that geared further towards a minimalistic aesthetic as our research exemplified many students' frustrations with the high-contrast, and colourful interface of the existing system. The minimalistic interface would also improve user accessibility, particularly for those who may be visually impaired, have cognitive disabilities, and sensory processing disorders. 

Okay, maybe some of the old

Some existing University of Waterloo assets were kept to ensure that the system still felt familiar for existing users and aimed to channel consistency with the other University of Waterloo applications and a symbolism of school spirit.

Bring on the Spririt of the Warrior

when my team and I were designing this application, we realised that our beloved and fearless University mascot, King Warrior, was severely underutilised in the old system. As a symbol of school spirit and the fearless Waterloo Warrior spirit, I made the executive choice to include him within our system as an assistant chatbot. This decision was made to foster a sense of kinsmanship and assuage our users.

Colour Pallete

Prototyping

Process

We wanted our visual design to complement and coordinate with the existing University of Waterloo Systems, so as the Project Manager and Lead Project visual designer, I had to take into account the existing Waterloo aesthetics and assets, and find a healthy medium with the new visual direction we wanted to take our application to.

Low Fidelity

Wireframing

Our low fidelity screens were based on the task examples and our tentative list of requirements in which each of us would focus on one specific user flow, and sketch out wireframes of each step they would take within our system.

Medium Fidelity

Rapid Iteration

With our project on a tight timeline, and our team goal to create a human-centred system, I realized 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. Rapid iteration also promotes collaboration and communication between designers, developers, and other stakeholders, leading to a more efficient and effective design process.

Final Screens (Samples)

Heading

Let's work together!

Thank you! Your message has been received!
Oops! Something went wrong while submitting the form. Please try again.