Aquabuildr
The right fish for the right tank.
The first fish-pairing app, designed as an iPad kiosk for big-box pet stores. It shows first-time buyers only the fish that can live together, and gets them to checkout in a few taps.
- Role: Senior Product Designer
- Platform: iPad kiosk
- Year: 2017
- Scope: Identity, UX, prototype
Put the wrong fish in the same tank and they die.
Many species can't share a tank. Before Aquabuildr, a first-time buyer had to decode outdated pet-store pamphlets or spend hours researching online to get it right.
Hours
Researching online before buying a single fish.
Or decoding a store pamphlet that was already out of date.
The buyer
Had no way to check which fish could live together.
Water type, tank size, and temperament all matter. A beginner has no way to know.
The store
Paid for every bad pairing.
Dead fish came back as returns, and staff needed training to answer compatibility questions.
The brief
A kiosk prototype to pitch the largest pet retailers.
Aquabuildr was raising capital and taking the product to big-box pet stores. The prototype had to show the whole idea working on an iPad, from the first tap to checkout.
01
Filter by compatibility
Show only the fish that can live with what's already in the tank.
02
Guide a first-time buyer
Walk someone who has never owned fish through choosing any number of them for a new aquarium.
03
Checkout in a few taps
Easy to use, and quick to get from choosing fish to paying for them.
I mapped every path on paper first.
Aquabuildr was raising money, and the MVP had to carry the full vision for investors. I mapped the core features and every path a buyer could take, then sketched pencil wireframes for the iPad layout.
Wireframes, from the first screen to checkout.
Five decisions that shaped the kiosk
The greatest challenge was showing what's in stock, pairing compatible fish, and offering packages for a quick purchase, all on one touch screen.
Lead with color
The first screen is a moving carousel of the fish in stock, in bright color, to draw people to the kiosk.
Starter aquariums sit right below it, for anyone who would rather not choose fish one at a time.
Compatible Fish come first
Compatible Fish is the first tab in the Tank Builder, and it’s where the buyer starts. Every fish added narrows the list to the ones that can share the tank.
The tank stays pinned on the left with a count and a running total. When nothing fits, the kiosk says so and suggests removing a fish.
Compatible fish, out of 142 in the catalog. With two clownfish and a yellow tang already in the tank.
Warn, explain, recommend
Notifications step in at the moment a choice matters. Buyers hear about a bad combination before it's in the cart, and get suggestions for good ones. The goal was better-informed owners and fewer dead fish.
Compatibility warning
Adding a fish that won't get along with the tank stops the flow and asks if you're sure.
Fish advisory
Species advice at the moment it applies, like keeping one Yellow Tang per aquarium.
Pair fish
Suggests a companion when a fish lives longer with one, like a clownfish and its female mate.
A shortcut for the overwhelmed
Some buyers want an aquarium without picking every fish. Pre-built starter aquariums bundle the tank, the gear, and a set of compatible fish into one purchase.
Each kit is put together by aquarium professionals.
- Saltwater Starter Aquarium
- Freshwater Starter Aquarium
- Betta Starter Aquarium
Built for a kiosk
A kiosk gets used standing up, in the middle of a store. I designed large touch targets and stripped out anything that wasn’t needed.
The tank drawer lists every fish with its price and quantity, asks if you need a tank, and gets you to checkout in a few taps.
An icon instead of a logo.
The mark had to represent fish, both freshwater and saltwater. I chose an icon over a traditional logo to give the startup room to grow.
Freshwater and saltwater colors wrap around a water drop. The same three colors run through the kiosk.
What the kiosk was designed to change
Aquabuildr was a startup prototype, and there are no shipped numbers to report. Here's what it was built to do.
For the buyer
Compatible fish in a few taps, and an education about their new pets along the way.
For the store
Fewer dead-fish returns, lower staffing needs, and less spent on training employees.
For Aquabuildr
Regular care emails based on each purchase, keeping the brand in mind for the next one.
“Through Chris’s hard work, patience and dedication to excellence, he educated and walked me through every step of the process. He put WAY more hours into creating what WE ALL envisioned. It was about making a quality product.”
- Team
- Jefferson VanBloem, content and project manager. Ben Meyer, early exploration.
- My role
- Identity, product design, prototype design, and iconography.
- Tools
- Sketch, InVision, Adobe Illustrator, Adobe Photoshop, Lucidchart.
Up next
Photon
I created Angel’s shared design system, bringing web, mobile, and TV together under one design language now used by seven teams.
Read the case