UW Flow 2.0

Revamping a beloved platform for students to share course and professor reviews and plan their courses at the University of Waterloo (UW)


UW Flow is a popular platform for UW students to share course and professor reviews. It was created in 2012 by a group of Software Engineering students. While the site remained a useful resource for students, it began to suffer over time from lack of maintenance. In 2019, a team of students and I decided to revamp UW Flow.

I was the designer for UW Flow 2.0 — my goal was to design a platform that would best cater to our current users. I worked in a team of 2 backend developers, 2 frontend developers, and a product manager.

User Research

I wanted to assess how our users were interacting with UW Flow and what they value in the platform.

I created an online survey and interviewed 15 students from various majors and backgrounds who had used UW Flow. The participants were our user base: students at UW who use the platform.

There were some specific, actionable requests:

But also some more general valuable insights, especially from the user interviews:

From this research, I found that users greatly value the convenience and honesty of UW Flow and its reviews. Students use the platform to determine whether to take a course or not based on various criteria (professors, ratings, availability, access to future courses, etc...). I set out to create a design that would further this purpose.

Wireframes and Prototype

I created wireframes that focused on clearly showing the relationships between reviews of courses and professors as well as indicating the context of a review.

I then connected the wireframes to form a functional prototype that we could use as a reference when planning our backend architecture and defining our data models.

Prototype

Wireframes

Design

I focused on a clear and simple design that would allow our information (course and professor reviews) to take center stage. Below are some guidelines I created to define the UW Flow design: colors, typography, a style guide, components, and illustrations. I used Atlassian Colors and Feather Icons in the design. These guidelines would later be used to create mockups.

Symbols and Illustrations

UW Flow is centred around reviews for 2 entities: courses and professors. I used orange to represent a course and green to represent a professor — I made these symbolic colors consistent across the design.

The illustrations I created represent a user's path to their ideal course through UW Flow. Their purpose was to further distinguish the different entities and pages of the site as well as create a distinct brand for UW Flow.

Mockups

I created mockups for the 7 pages of the platform: the Landing, Explore, Privacy, About, Course, Professor, and User pages as well as several miscellaneous components such as login modals, transcript and schedule upload, review modal, and search bar.

A design I will highlight is the new explore page. Users can search the different courses/professors offered at UW through various filtering and sorting criteria. I determined this based on our user research of what students said they cared about when looking for a course/professor (eg: if a course is offered in their term or the year of the course).

Mobile

It was important the design supported mobile since 21.92% of our site sessions came from mobile devices. I chose a responsive mobile design for consistency as well as development efficiency so the frontend team could reuse the components they built for desktop.




Development

We began frontend development with React shortly after I created the mockups. React's paradigm lent itself well to my component-based design. I also created user flows during our testing phase to catch any bugs or design flaws.

Below is a summary of 10 months of work comprised of 2-week sprints:

Learnings

Keep it simple
I found adding more features does not always make the product better, in fact, they can detract and obscure its primary purpose. It is important to show restraint when designing to avoid feature creep and maintain overall value to users.

During development, we found ourselves being pulled to do more — this road would lead to a UW Flow that does many things okay at the cost of doing a few things very well. I chose to stick at what we are good at and keep it simple.

Just do it
I was initially daunted by the variety of design work in the project, ranging from research, information architecture, user journeys, to illustrations (in particular). But I realized that avoiding a task simply because I thought I could not do it, would guarantee that I could not. So I dived into this unfamiliar territory and delivered the design work. I learned to never let a lack of experience prevent me from starting something.

Thanks

This project was very eye-opening for me in learning about the design and product development process. The 10 months of creating UW Flow 2.0 were not only deeply rewarding but also fun thanks to an incredibly talented group of teammates. Thank you:



Note: UW Flow 2.0 is in the final stages of testing and development and has yet to be launched.