Upstream — UC Berkeley CS160 Spring 2016

Upstream is a mobile app that helps fish owners manage their fish and tank. Upstream was created with a team of five students for CS 160: User Interface Design at UC Berkeley. I conducted user research and did much of the final UI design.

Conducting User Research Interviews: Task Analysis and Contextual Inquiry

To get a better idea of the problems fish owners face we conducted user interviews to gain more insight and context around the processes and grievances behind fish owning. Our team spoke with an aquatic specialist at PetCo and two other fish tank owners about their workflow and watched as they went about some of their tasks.

Our main findings were:

  • Fish owners are unaware of fish compatibility with tank size and other fish species. (Fish can die if the tank is too small or if fish share a tank with the wrong species).
  • Fish owners have a tough time identifying sick fish.
  • Fish owners should be monitoring water levels (temperature, pH, conductivity, salinity, etc.) as this can greatly impact the health of fish

Features from Pain Points

With support from our initial research, we wanted to create an app that would simplify the tank maintenance process and ensure that our users’ fish are healthy. After a group brainstorm, we decided to focus on the following features:

  • Warn against incompatible fish based on the current state of the tank and its inhabitants
  • Receive alerts about potentially sick fish and provide a database of sick fish symptoms
  • Monitor and change the tank environment (water levels, lights, etc.)

Usability and Concept Testing

After determining our feature set, we needed to do some quick testing around the app, focusing on usability and overall value of the features. To do this, we did a quick group whiteboarding session around the general layout of the screens and created a quick prototype that we were able to show to other people.

Screens from the first prototype

Iterating and Adding Visual Polish

Our first prototype provided us with valuable feedback regarding the usability of our product. We asked users to perform tasks with the prototype and assessed whether their mental models aligned with our design. Using this data, we improved on the design and added some branding.

Screens from our final iteration

Our new design had some visual improvements that enhanced usability, such as:

  • the use of cards to create distinct groupings of content
  • colors that reflect urgency (red when something goes wrong, calm blue when for neutral system components)
  • clearer visual representations (replacing ambiguous line graphs with distinct numbers especially in the dashboard section)
  • improved navigation (a bottom nav separating different tasks/features: Dashboard, Fish List, Controls)
Interactive prototype of our final iteration, built with Marvel
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.