The right fish for the right tank.

Aquabuildr

Clown fish isolatedClown fish isolatedBlue regal fish isolatedBlue Angel fish isolated facing rightRegal fish isolated

The Client and Brief:

Contribution

  • Identity design
  • Product design
  • Prototype design
  • Iconography

Tools Used

  • Adobe Photoshop
  • Adobe Illustrator
  • Lucid Chart
  • Sketch
  • InVision

Aquabuildr is the first-ever fish-pairing app designed to help customers find the right fish for the right aquarium. Before Aquabuildr, users would have to decode out-dated pet store pamphlets or hours of online research to build the right tank.

The scope of this project was to design a kiosk prototype to market to leading pet specialty retailers. The prototype needed to display how the product could filter fish based on compatibility. It was also important to walk users through what a first-time fish buyer would experience in choosing any number of fish for their new aquarium. It must be easy-to-use, get the customer to checkout with a few taps, and purchase quickly.

view prototype
A look at some of the user flow process using paper and pens.

The Identity:

Create an identity that could represent fish, both saltwater and freshwater.

The identity needed to be modern and visually represent fish, both saltwater and freshwater. Through the conceptual phase, an icon design was chosen over a traditional logo to provide more flexibility to the identity as the startup grew. Using color to represent the different fish types helped tie the design together as fresh and salt water colors wrap around a water icon.

view brand guide
Aquabuildr color breakdown
Aquabuildr logo concept sketches

Userflow and Wireframes:

Think through all variables so the MVP can be as effective as possible.

Working with a startup is a great responsibility. It was my job as the UX designer to ensure that I consider the most valuable features are packed into the MVP so the client could go out and win as they try to raise capital. Critically mapping out the core features would ensure potential investors could see the full vision. I then translated those core ideas into pencil wireframes that would help lay the iPad interface framework.

Aquabuildr fish lo-fidelity wireframes 01Aquabuildr fish lo-fidelity wireframes 02Aquabuildr fish lo-fidelity wireframes 04Aquabuildr fish lo-fidelity wireframes - checkoutAquabuildr fish lo-fidelity wireframes 03Aquabuildr fish lo-fidelity wireframes - Search

First Time Experience:

Build a welcoming experience for new customers.

The first-time user experience is designed around providing a moving carousel of available fish with bright colors to draw in customers. Pre-built aquariums present curated experiences to enable quick purchase for customers who don’t want the hassle of looking at each fish and tank but still want the satisfaction of an aquarium purchase.

Aquabuildr welcome screen
Clown fish product detailsFish tank collection
Fish cards

Compatibility:

Pair the right fish with the right tank, every single time.

The greatest challenge was to find an efficient way to display available fish in inventory, pair compatible fish with one another, and offer packages for quick purchasing. Since the design was for a touch screen interface, I designed large touch points and stripped away all unnecessary elements to create an effortless experience for potential consumers.

Fish pairing results screenSide window checkout screen

Intelligent Notifications:

How might we create better educated owners and more return customers?

Carefully crafted notifications ensured customers would be aware of problematic fish combinations and provide useful fish recommendations. These notifications would help create better-informed owners and reduce fish deaths.

Smash warning notification modal
Clown fish isolatedClown fish isolated
Smash notification window 01
Yellow tang fish isolated image
Smash notification window 02

Conclusion - Fish Pairing Perfection:

Finally, a way to find the right fish for the right tank.

Credit

  • Jefferson VanBloem  -  Content & project manager
  • Ben Meyer - Early exploration

The end result provides customers with the power to effortlessly purchase compatible fish while also being educated about their new pets. The benefits to store owners include: reduced dead fish returns, decreased staffing requirements, and lower employee training expenses.

This app also provides added value via regular educational emails to the customer with proper care instructions based on their purchase history. This regular communication also keeps the Aquabuildr brand in mind for customers. In the end, it increases brand loyalty and results in a higher rate of return on future purchases.

view prototype
Finger pointing up icon
go to top
light
mode
dark
mode