Target: Home aquarium hobbyists of different experience levels.
Dark UI with pops of color inspired by aquatic life.
How do hobbyists view tank data when they own multiple tanks?
The objective was to make it easy for users to know which tank they were looking at, a solution that could scale from a single tank to multiple tanks. By displaying the tank’s image and name, the user knows which tank’s data they are viewing, and can switch between tanks with ease.
How could we personalize the process of diagnosing the user’s specific pet?
Users can take a quick “quiz” to help identify problems with their fish and learn about treatment options. Different species of aquatic life face different complications and diseases. When logging symptoms, users see a visual representation of their pet’s species (similar to their fish in real life), making it feel more personal and easier to identify problem areas.
Challenge: How can we simplify tank data to make it easy for the user to digest and understand?
The dashboard helps the user see their tank health at a glance. Rather than relying on complex data points for the user to decipher (ph, nitrate, nitrite etc), user can instead scan the overall tank health, and click into an area to see more detailed information. Color association is used in context with iconography to make the status of each item easy for the user to understand.
I experimented with various methods of representing temperature scales that showed a target zone. Ultimately, the “dial” option felt a little like something for a car UI, and the circular one didn’t really intuitively suggest “temperature”. I went with a more literal representation of temperature that users would already be familiar with.
In the filter module, it was important to show the users the status of their filter, and when it was time for a filter change. Usually users have to change the filter monthly, so having some type of time progression where the filter started at “clean” after a filter change, and progressed to being dirty as the days went on seemed appropriate. I played around with having little particles collect within the module to actually look and feel “dirty”, but ultimately went with a circular solution where the status in the middle would change. The dots would count back as the days went on until it was time to change the filter, in addition to a status change in the center, making it easy to know when filter change day is approaching.
One challenge with the light module was the 24 hour clock schedule. Leveraging a familiar UI to the user, I ended up with something similar to a fish tank light timing device, where the user can see which hours their lights are set to “ON” and which are set to “OFF”.
Originally I was going to display the total number of fish in the tank, but that doesn’t provide a whole lot of useful information, so I looked into adding health status at this level (users can mark fish as “healthy” or “sick”). I ended up grouping fish based on their community groups, so users can see at a glance what communities they have, and how many healthy/sick fish are in each community. Users can dive into details from here.
After exploring options for the dashboard modules I worked on the hierarchy of elements and how the modules should be associated, grouping items into the following categories “equipment”, “water quality”, “my aquatic life” and “recommendations”.
Challenge: How can we make it easy for users to diagnose and treat their fish? (keeping in mind different levels of knowledge)
When something seems off, users can find out which disease or problem their fish is having and learn how to treat it. Users have the option to search a specific disease, browse common diseases, or to take a symptom quiz that is based on their specific pet. In the quiz users can log multiple behavior and/or appearance symptoms to generate a diagnosis that displays information about the disease, treatment options, and a way for the user to add treatment reminders so they can easily remember how to treat their pet.
There are a few different ways the users can go about diagnosing their pets, and one of those ways is just by browsing. I played around with different ways to browse, including image based browsing where the user could click into an image to get details, and the other images would slide to the left column for easy navigation. I didn’t comp out these screens (you see a little bit of browsing at the bottom of the diagnosis landing page) but instead of this method I decided to maintain simplicity with the browsing and following a pattern established elsewhere in the app for consistency.
Helping the user identify issues related to their specific pet was an important way to think about the diagnosis process. After thinking through a couple of ways to log symptoms, I identified 2 different types of changes that can occur when something is wrong with the user’s pet. First are changes in behavior, and second are changes in appearance. Selecting one of these options pushes the user into a symptom logging flow (in this case we are looking at the changes in appearance flow). Especially for appearance changes, the goal was to make it easy for the user to quickly identify what physical areas their fish was having issues with, which led to a solution that utilized a visual representation of their fish that could be tapped to log symptoms.