TIMELINE
May 2021 - July 2021
TEAM
Jennie Amrine, Design
MY ROLE
UX Research
UX Design
UI Design
Visual Identity
PROJECT INFORMATION
Aquascape is an aquarium management app designed to streamline the experience for new hobbyists learning the art of planted aquariums and improve the experience of seasoned tank veterans managing their tanks.
THE PROBLEM
There is a major barrier to entry into the plant tank hobby because it's complicated, costly, and requires significant time commitment upfront.
THE OPPORTUNITY
Provide hobbyists with a tool that streamlines necessary research and upkeep required for planted tanks. This will save invaluable time, money, and resources when managing their tanks.
DESIGN RESEARCH CONTENT
Competitive Analysis
User Research
User Stories
User Personas
I began my research by diving into existing aquarium maintenance apps to see what is available on the market, what features make the app successful, and identify blind spots and pain points.
I synthesized the offerings of 3 top rated Aquarium management apps and from there began taking notes on what features Aquascape would adapt, iterate upon, and change for planted tanks users.
KEY TAKEAWAY
There are several core features that all aquariums need and every aquarium app offers. Since Aquascape is a planted tank management app, I will only adapt features that are necessary for planted tanks.
I gathered information on aquarium owners and their experiences with current apps by looking at the app reviews. In addition, I also scoured planted tank forums and posted on Reddit’s planted tank subreddit to gather feedback from the planted tank community on their experiences with aquarium apps.
The findings were helpful in refining certain features Aquascape will use, but next time I hope to conduct interviews and have direct feedback from users.
APP REVIEWS
COMMUNITY FEEDBACK
KEY TAKEAWAY
Focus on refining 3-4 core features that are easy to use and contain all necessary information rather than offering dozens of features that are incomplete or buggy. In addition, the planted tank community wants learning material and plant databases.
Based on the culmination of my research, I put together 3 user stories that reflect what a user wants to accomplish by using Aquascape. These stories serve as the foundational user flows that will be built into the app.
USER STORY #1
As someone new to the planted tank hobby, I want to research what goes into tank maintenance so that I can be thoroughly informed before committing to and starting my own tank
USER STORY #2
As a planted tank owner, I want to journal water analytics so that I can track the aquarium’s health and review all progress overtime
USER STORY #3
As a planted tank owner with multiple tanks, I want to have a task manager so that I can stay on top of upkeep and juggle the needs of all my tanks
To further emphasize a user focused process, I put together a user persona. The user persona outlines the motivations, needs, and tank keeper profile that I can refer to when I build out the various user flows.
SOLUTION IDEATION CONTENT
Low Fidelity Wireframes
UI Patterns
Usability Testing
UI Elements & Style Guide
At first, I made rough sketches of what the interface could look like in Aquascape, considering what features should be on the pages of water analytics, maintenance, and home page.
PRELIMINARY SKETCHES
LOW FIDELITY WIREFRAMES
I converted the sketches into low-fidelity wireframes to further understand user touch points and built out the flows of Aquascapes core features. These wireframes were used to conduct usability testing and future refine the app.
I looked to a variety of apps for inspiration when building out Aquascapes features. I was intentional in choosing examples that have established UI patterns and interactions that users are familiar with.
TASK MANAGEMENT
Trello is a leading app for task management and organization, so I looked here for inspiration for Aquascapes task scheduling feature. I adopted the cards layout in Aquascape rather than list out upcoming tasks. Also in Trello, 1) you can view all the tasks you’ve already completed, 2) you have a start and end date, and 3) theres numerous icons that tell you more about that tasks. In addition, in order to edit the tasks, you tap on its card, which is an easy, intuitive interaction.
DATA DASHBOARD
I went to apps I use all the time for data dashboard inspiration (Apple Health + Robinhood). Specifically, I wanted to display data that has been collected over time and wanted the option to filter the data based on several parameters. I found that both the Apple Health app and Robinhood have segmented controls to view data by time, which I’ve included in Aquascape.
EDUCATIONAL SYSTEMS
Going into Aquascape, I knew there would be one feature that would be more complicated and take a lot more steps than others: setting up a fish tank in the app. I went to the iconic Duolingo for pointers, as it’s known for its clean, easy to use interface and is the golden standard for educational tools. I decided to adopt its modular layout, step by step piece meal sequence, and progress bar. I also adopted its use of illustrations where applicable in the app for a friendly, approachable feel.
Eight participants conduct usability testing which resulted in a variety of improvements to the app. While users enjoyed the look of interface, many found the ambiguous UX writing and lack of empty states to be confusing. Some processes were repetitive and looked too similar to other flows which further confused users. The process was a good reminder on how important testing is to the success of an app.
Aquascaping is the craft of arranging aquatic plants, rocks, and stones in an aesthetically pleasing manner. It is a foundational aspect of the planted tank process and yields the most beauty. As such, I choose to name the app Aquascape, a term readily recognizable by planted tank hobbyists.
The visual identity of Aquascape is inspired by the core elements that make up planted tanks. From colors to type faces, visual elements in Aquascape reflect the beauty found in the hobby and the technical aspects as well.
01 LOGO
The logo for Aquascape is a combination of a water droplet, fish, and leaf, which represents all the natural elements of a planted tank. They are interconnected and flow together in a harmonious way, as the elements do when the tank is healthy and kept well.
02 COLOR PALETTE
The color palette for Aquascape is a soft black, tones of grey, and vibrant green which mimics that of a planted tank set up. Hobbyists often choose black backgrounds for their tanks in order to showcase the vibrant plants and fish. Because of the high contrast, all other colors and details in the tank stand out.
03 TYPOGRAPHY
The typefaces used in Aquascape are Aqua Grotesque and San Francisco Display. I chose Aqua Grotesque for it’s aquatic vibe. San Francisco Display is easy to read and feels technical, which felt appropriate for a tank management app.
03 UI ELEMENTS
Icons and illustrations were custom made for CacheMoney and colored such that they aligned with the overall brand look and feel. Icons and buttons are all green, blue, and blue green. Primary button changes from green to blue depending on background color in order to create contrast.
Buttons
Illustrations
Iconography
Text Fields
Segmented Controls
Navigation Bar
Progress Bar
I had the opportunity to work with a PM on this project which yielded great results I would have never come up with on my own. It was incredibly productive and rewarding to work with someone over a few days and implement their feedback .
Challenges Faces
Keeping my Figma file organized, having better defined design hierarchies and methods in place for more efficient design executions. Again I found myself spending extra time manually implementing design changes that could have been automated.
Improvements for Next Time
The second iteration of Aquascape will ideally have more usability testing, user interviews from planted tank owners for in-person feedback, and refined prototyping so the app feels more real during testing.
Designed by Jennie Amrine · 2021
