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.
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:
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.
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.
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.
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).
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.
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:
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: