Automatic Ocean
Case Study
Automatic Ocean is a new app that is designed for the Saltwater Reefing Community and plans to make this hobby safer, more stable and more controllable than ever before.
Reefers will now be able to monitor, control and automate their home aquariums from wherever they are in the world offering them peace of mind, and their pets the stability they need to thrive.
The main problem reefers face, and this solution will address, is enabling the user to know there is a problem with their tank so they can act on it as soon as possible.
Overall Impact
Validated need for app in the industry by collaborating with potential users through research. Created and designed the complete experience including user journey and design system.
Responsibilities
-
User Research
-
UX Design
-
UI Design
-
Prototyping
-
Usability Testing
The Reason Why...
When faced with the prompt for this project I knew I wanted to solve a problem that I personally had!
I have a career as a Captain in the U.S. Merchant Marines and have spent a lot of time at sea. Likewise, in my off time I love to travel for fun but this lifestyle has always conflicted with another love of mine... REEFKEEPING.
Since I was young I’ve always marveled coral and saltwater aquariums so I decided to tackle an all in one aquarium controller accessible to users 24/7, from anywhere in the world via their phone.
Understanding the Industry Trends
-
Component products accounted for the largest share in 2020 owing to strong developments in the products supporting these reef aquariums.
-
Controllability and customization are two trends that continue to gain the most momentum.
-
Various advancements in smart technology continue to add new functionalities to fish keeping from adjustable lighting to feeding and controlling water parameters.
-
Reef owners rely on daily/weekly water parameter checks. Always done manually until last few years.
The Problems
-
Reef Keeping is a difficult and expensive hobby with a steep learning curve.
-
Stability is absolutely essential in a marine tank. This means the better monitoring and the closer we keep track, the more success users will have.
-
Users need a quick and easy way to check their reef tanks parameters from wherever they are in the world.
-
Reef keepers want to be notified of problems and have the ability to take immediate action remotely.
The Project Goals
-
Design app that allows aquarium owners to monitor and control their tanks via mobile device.
-
Define branding for the app (logo, name and color scheme)
-
Identify key features & wants/needs that will be available to users on the app.
-
Design the look and feel for the brand as well as how the app will flow easily for the users.
-
Understand why mid/high end reef keepers want automated systems.
Research Key Insights
-
Controllability and customization are two trends that are ever more popular in the recent years of the hobby (i.e. auto light scheduling, auto feeders, daily dosing schedules)
-
The most important water parameters to be checked daily are Water Temperature, Alkalinity and Salinity.
-
All surveyors stated that they were anxious about leaving their tanks while away from the house.
-
All stated having some type of automation on their tanks, often from separate companies with various apps to control each.
-
Reef monitors and controllers available today are too expensive and very complicated.
-
The most common trend for having a completely controlled tank was to have peace of mind while away, which confirms my assumptions from the beginning.
-
However, the second most common trend was people wanted automation and monitoring in order to catch issues (water parameters, equipment failure etc.) as soon as they happen because all agreed in keeping a successful reef environment it’s all about stability.
Creating Empathy
Based on my research I found it necessary to represent different groups of reef keepers. I created 3 personas, each based on the level of experience they might have. Finding themes between these groups would serve as important reference points for design decisions moving forward.
Seeing as how keeping a salt water reef aquarium is a complex hobby that many people may be unfamiliar with, I thought it would be a good idea to explain how the app could work for those who don’t know. So, I pulled out my iPad to write and illustrate a childrens story about it.
Creating a Story That Everyone Understands
Because Automatic Ocean is such a complex idea I wanted to be sure that the UI felt light and fun, and who has more fun than clowns...
For the logo, I created an “Ocellaris Clown Fish” swimming around a piece of coral by using just the vector pen. This is something that I had struggled using originally so I took the opportunity to challenge myself.
Branding & Design
At this point in the design process I felt that creating a logo would really start to give this project some life. Below are some initial sketches I made using Procreate on the iPad.
Using lower-fidelity wireframes to better understand what users found intuitive
An initial round of lower-fidelity prototype testing helped me better understand what tasks users were able to complete freely and just as importantly what avenues needed to be built out further.
Wireframing
Solidifying Screen Designs
Visually representing the Automatic Ocean brand meant defining a design system that projected themes of reliability, logic and fun to potential users. I wanted Automatic Ocean’s visual design to always refer back to its core mission: Stability and Control, to help reef keepers keep a healthy reef.
During the UI design I stole from a boat my father had when I was a child. It had great lines and was always very clean looking. I used predominantly blue palettes, cobalt and white hues. Spacing, simple button states and clear iconography would help make complex tasks feel more manageable.
User Testing with Hi-Fidelity Prototype
The hi-fidelity prototype brought users the closest we’ve come yet to the real experience. However, it did reveal several trending issues...
During testing several key problems were:
-
The "Feed Mode" is out of place and icon is difficult to understand.
-
The gear icons are too close to the switches, making it difficult for users to select.
-
The (On/Auto/Off) buttons are difficult to read at a quick glance.
-
"There really is no Nav. bar!"
Below are the results broken into several categories based on comments and actions from the usability testing on our prototype.
Home Screen Redesigns Based on Usability Testing
The original home screen design allowed users to quickly see the status of the elements the monitor at the top of the page.
User could also keep an eye on their tank with a live video stream.
The top nav. bar hosts a hamburger button, "Feed Mode button" which stops certain pumps & "lock/unlock button." This feature is to ensure no important equipment is accidentally turned off during a routine check up.
Users can quickly see the status of various equipment items as well as turn them on/off or set a schedule.
Redesigns for Better User Experience
More Iterations
During testing, users stated "the feed mode button should be more prominent because it's a function that gets used every single day." By making it larger and set in the middle of the screen with fixed both the UI as well as the placement.
I added color to the (On/Auto/Off) buttons as well as made an indicator for when the slider is in the off position so users can quickly notice a difference.
My original design for Automatic Ocean has no navigation bar. This is because (besides onboarding) the app screens are not linear. Users don't go from one after another, rather to one screen and then back home.
After many iterations and asking the testers to either swipe back or navigate through the hamburger icon, I finally had to fold on my original design and add a nav bar at the bottom.
Despite sacrificing some real estate, the usability was greatly improved.
The final redesign is sleeker, more professional and easier to understand. The usability was greatly improved since the original design and throughout the usability testing and iteration process I was able to address all of the users concerns and frustrations.
Final Home Screen: Redesigned
How Usability Might Be Improved
Expanding for Longer-Term Development
-
Customization! One of the biggest trends in the aquarium industry is the use of automation and customization. While Automatic Ocean offers default settings we think most reefers will find useful as well as being able to customize them, expanding in this area would be great for the future.
-
Better log and trend monitoring. With Reefers becoming more sophisticated in the ways they keep their parameters stable, a beneficial feature would be an element swing predictor. Thus, allowing users to better understand when and why their tanks elements take dramatic swings.
Lessons Learned
My main struggle during this project was dealing with the navigation. Since the screens are non-linear my original idea was to have a type of "satellite navigation," that would always take you back home before another screen. This proved confusing to the user and no matter how many times I reworked it, it just made more sense to add a bottom nav bar. I learned that you don't need to reinvent the wheel, and when to recognize when a certain design isn't working early on.
I found that in an already expensive and complicated hobby, users didn't want anymore headache. They wanted an app that felt light, simplistic and well thought out. During the research phase many customers complained about lengthy and complicated set ups which made it essential that Automatic Ocean be as seamless as possible. Plug, Play, Thrive.
Every aquarium is different so customization and reliability are key.
I learned that many other Reef Keepers felt the same way I did. Either we must have someone watch the tank or some do not go away at all because they feel that they couldn't. Hopefully now, with apps like Automatic Ocean reefers can enjoy their aquariums and their vacations without having to choose between.
1.
2.
3.
4.
