Designing a pet bird app that trains humans on how to train their birds

My Role

UI Designer

Side Project

Birdhouse

Year

2022

Background

Birdhouse is my passion project after caring for pet parrots for over 20 years. Birdhouse aims to educate and empower pet bird owners so they can form long-lasting friendships with their birds.

With growing ownership, increasing spending, and the long lifespans of their pets, pet bird owners should be happy shoppers in the pet industry. Instead, the number of pet birds owners is quickly outpacing the pet bird products and services available on today’s market.

I discovered in user research that owners want to train their birds in some way—to perch on hands, eat veggies, or curb aggression and/or hormones—but they didn’t know how! Most existing products are not designed for pet birds and can actually promote undesired behaviors.

Pet bird owners are calling for products to provide enrichment. I created Birdhouse to be that answer to that flock call. It trains humans on how to train their birds!

Challenge

How might we make learning about animal training fun?

Birdhouse helps pet bird owners build connections by teaching them—both humans and birds—healthy habits. The app’s main purpose is educating pet bird owners on bird behavior. It does so through a habit tracker that lets users explore habit-forming activities that promote the health/wellness of their birds.

My research revealed even experienced pet bird owners may feel unconfident in their caretaking as they encounter misinformation from pop culture and navigate around pet products designed for cats and dogs.

Therefore, Birdhouse needed a “back to basics” approach that allowed pet bird owners of all experience levels to learn about their birds.

The app’s visual design must:

skew feminine to appeal to women, who were more engaged in pretotyping
look modern to help illustrate content is up-to-date and relevant
feel fun and engaging to keep people coming back and building those healthy habits

Birdhouse users must keep returning to the app to learn and practice healthy caretaking habits.

Team

Me, UI Designer

Tools

Platforms

After Effects • Figma • Illustrator • Miro

Deliverables

User task flow chart

Lo-fi wireframes

Brand and visual identity

Design system

Supporting illustration and animation

Hi-fi prototype (the MVP)

Process

Determining the key path scenario

I identified several task flows for the habit tracking app: (below). However, the key path scenario for a first-time user is logging their first habit.

Onboarding into the app
Choosing a birdkeeping activity
Recording the completion an activity*
*The key path scenario
Journaling about the activity
Viewing completion streaks

First, I drafted the key path task flow in Miro. Then, I used my sketches and sticky notes to match each task to a screen from the UI design.

My key path scenario changed little from concept to MVP. However, I reworked the secondary task flows for journaling and viewing completion streaks a lot over the UI design’s iterations.

Wireframing

Once I determined the key path, I refined each screen’s UI along the way. From pen and paper, to B&W lo-fi wireframes, to shaded wireframes, to full-color app screens in Figma.

Using illustration for avian advocacy

One of the hot topics in pet bird caretaking is the practice of wing clipping.

In decades past, owners commonly clipped their pet bird’s wings to discourage aggression, promote tameness, and minimize risk of a pet bird escaping outdoors, where recovery and survival rates are low.

However, many owners today understand the importance of allowing their birds flight time—with all their natural feathers—to promote mental and physical health. Indeed, many people in my earlier discovery interviews want to pursue flight training for this benefit.

Unfortunately, misinformation and pop culture continue to promote the unhealthy practice of wing-clipping.

To promote keeping pets flighted, I illustrated every one of the birds with their full flight of feathers. These illustrations will help users picture their own birds flighted and healthier.

Creating the design system & UI components

The Birdhouse design system is comprehensive, thorough, and growing.

I used atomic design to start saving little pieces into large, recyclable, and scalable UI components. For example, a button font style and color swatches turn into a button, which turns into a multi-columned fluid row of buttons.

I created components from the very first B&W wireframe and added new ones and maintaining them as the app grew. Detailed documentation notes usage rules and highlights key CSS styles.

Furthermore, I can easily expand the design system. Icons have a template which allow line art within to be swapped out and still maintain a consistent look, size, and feel. Colors and illustrations have similar groundwork.

Finally, components apply Figma’s Auto Layout to be fluid and responsive for any device mock-up. This allows users to observe realistic app behavior in the interactive prototype.

The design system addresses specs and usage of UI components like:

Navigation
Buttons
Typography
Color palette
Iconography
Illustration, both textural and avian
Wrappers, containers, and columns

Results

The Birdhouse MVP app lets users explore up to six (6) unique and popular bird caretaking activities such as Training 101, cage arranging, and bathing.

Pen & Paper Sketches

Wireframes, from Lo-Fi to Hi-Fi

0 k+

Words Written

Interactive Prototype

Conclusion

I used my discovery user research and competitor analysis to inform the mobile app’s user task flow.

Then, I developed the Birdhouse brand, styles, and design system elements and applied them to a working, high-fidelity MVP prototype.

It’s now ready for usability testing and further iteration!