UW Flow 2.0

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

To assess how our users were interacting with UW Flow and what they value in the platform, the project began with gathering user research.

We sent out 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:

"When I start typing in the top bar right after page load, autocomplete doesn't happen, then I lose focus in the box, then when I click back in I get autocomplete."
"Filtering by subjects in course search."
"Site loading time could be improved."
"General clean up. eg. I tried the mobile app a while ago and I didn't find it very functional, all profs have email/phone/office "coming soon", etc."
"I don't know if there's a way to do this, but if a section is full, have the ability to notify me if a spot becomes available?"

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

"I like how [Flow] is a lot easier to navigate than the university website and it gives you access to all of the information you need."
"Hardest part of picking a course is the long term planning involved like making sure your schedule is aligned with your future academic trajectory."
"I like how candid the reviews are."

We learned from this reserach 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

The wireframes are used to show the relationships between reviews of courses and professors as well as indicating the context of a review.

The wireframes connect 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

The focus for presenting UW Flow was a clear and simple design that would allow the content (course and professor reviews) to take center stage. Below are some guidelines 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 were later be used to create mockups.

Symbols and Illustrations

UW Flow is centered around reviews for 2 entities: courses and professors. Orange represents a course and green represents a professor — these symbolic colors are consistent across the design.

The illustrations found throughout the site 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

Below are 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 to highlight is the new explore page. Users can search the different courses/professors offered at UW through various filtering and sorting criteria. This was 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. A responsive mobile design was chosen 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 the creation of the mockups. React's paradigm lent itself well to the component-based design. User flows during our testing phase allowed us 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:

Ayush Kapur - Product manager
Bob Wei - Backend developer
Dmytro Shynkevych - Backend developer
Edwin Zhang - Frontend developer
Max Dai - Frontend developer