Product: Mobile App Role: Digital Designer
Splosh
A monitor system where users are able to retrieve statistics and data in real-time about the changing water parameters in their aquarium.
Opportunities
Establishing an accessible design system: I incorporated universal design principles in my aquarium app, enhancing accessibility with features like color contrast, simple clear language and large touch target size.
Pitched to aquatic hobbyists and professionals: honed skills in crafting and delivering pitches to a wide range of aquatic hobbyists and professionals, ensuring the information is accurate, helpful and easy to use.
Juggled many different hats: My responsibilities spanned across a broad spectrum, from creating visually compelling graphic designs, crafting engaging motion graphics, to designing intuitive and user-friendly UI/UX interfaces.
The Issue
It has been brought to my attention that many owners’ fish lives have prematurely perished as they are unaware of the changing temperature and compound levels. Compounds found in the water, such as ammonia can emerge within the aquarium and is highly fatal to aquatic life. There are many other factors that can affect the overall health of the aquatic ecosystem and is important to have knowledge of while taking care of our watery friends.
The Goal
The objective of Splosh is to help users keep track and manage their aquariums’ health and growth. Users will understand the safe ranges of compound levels to help regulate their tanks much more efficiently. Splosh will send out advice based on the data it is collecting to help keep the aquatic environment stable and healthy.
User Research
As user interviews were conducted, the major pain points to maintaining an active lifestyle we found included:
-
Time Consuming
Tests are a time consuming task especially with several tanks to maintain.
-
Slow and Inaccurate Results
Many users use tests strips which tend to give inaccurate results.
-
Unreliable Resources
Misinformation of water parameters and compatibility for aquatic life.
Based on these pain points, a site map was created to help users navigate the app more easily and efficiently.
Creating Structure and Flow
Low-fidelity wireframes were made with marker and paper and then transferred over to Adobe Illustrator to create high-fidelity wireframes. These screens aim to show the users the current and past parameters of their aquarium at a glance. This app is designed to minimize confusion by replacing frequently used tables with area graphs and meters.
UI Design
The aim of the UI interface was to show the current and past parameters of the water and compound levels in a simple manner where users are able to understand the information by looking at the visuals.
The meters show the ideal levels of what the compound status should remain. This section is intentionally brought into the center of the measure to allow the user to read the info in an easy fashion and understand the health level of their aquarium.
Users will receive reminders for scheduled tasks and warning notifications if it detects errors within the equipment installed in the aquarium as well as compound levels reaching to dangerous levels.
-
Over 13 Metric Analytics to Monitor
-
Designed Accessible; Colour-Blind Friendly
Key Takeaways
Develop a strategic roadmap: Proper organization of the information architecture can streamline navigation, making it easier for users to find what they’re looking for. Always start with a strong foundation before moving on to the finer points.
User testing extends beyond development: Design is an ongoing cycle of enhancing the user experience. Continually seek methods to gather and pay attention to feedback from your users.
