← Back to Projects
UX Research & Design · Aug – Dec 2021

Nutracker

What if there were no more poorly fed pets with digestive problems?

Mobile App
End-to-end UX
Solo Project
Pet Nutrition
Nutracker app screens
5
User Interviews
2
Usability Rounds
4
Design Stages
3
WCAG Criteria
Overview

Scheduling, tracking &
assessing pet nutrition

Pet owners lack reliable resources for checking the quality of their pets' diet. Nutracker brings meal scheduling, food quality analysis, and access to nutritionists into one friendly app.

The Problem

Pet owners lack reliable resources for checking the quality of their pets' diet.

!
The Goal

Provide pet owners with a simple, reliable tool for scheduling, tracking and assessing their pets' nutrition.

My Design Process

Four stages, research to handoff

Stage 01 Understanding the User

Interviews to
4 core pain points

I conducted online user interviews with 5 pet owners who cared about their pets' health and nutrition. Using the recordings, I built empathy maps, then distilled them into 4 pain points that shaped every design decision.

👥
Pain Point 01
Multiple Owners

When more than one person cares for a pet, coordination breaks down: who followed the feeding schedule? Did someone give an extra treat?

Allow multiple owners to connect to one pet, share feeding notifications, and stay informed of nutrition updates in real time.
Pain Point 02
Lack of Consistency

Shifting meal times make nutrition harder to track and can cause digestive problems over time. Memory alone isn't enough.

Enable meal scheduling with push notifications when it's time to feed, building routine without relying on memory.
🔍
Pain Point 03
Unreliable Info Sources

Contradictory claims online make it nearly impossible to know whether a pet's diet is actually healthy or if the food brand is any good.

Provide recommendations based on age, breed & condition, and automatically analyze food contents against nutritional standards.
💊
Pain Point 04
Digestive Problems

Pets with medical conditions need professional nutrition guidance, but qualified pet nutritionists are expensive and hard to access.

Connect owners with certified pet nutritionists for chat or video consultations at a reasonable price, directly in the app.

Personas

Three personas,
three design decisions

Each persona directly informed a specific feature, keeping design decisions grounded in real needs rather than assumptions.

Meredith
Pet with special nutritional needs
Meredith persona

Informed the Nutritionist Page, easy scheduling of consultations or on-the-go chat with a specialist.

John
Multi-owner household
John persona

Informed scheduled meals & "Who Fed" indicator, see who fed the pet, when, with zero back-and-forth.

Mary
First-time pet owner
Mary persona

Informed the Nutrition Analysis feature, see nutrient gaps and get breed-specific feeding recommendations.


User Journey Maps

Finding the
emotional valleys

Journey mapping revealed where users would experience frustration, and pushed the design to address those moments proactively, not just the happy path.

Meredith's User Journey Map
Meredith's Journey How Nutracker assists owners of pets with special nutritional needs through access to professional guidance.
John's User Journey Map
John's Journey How Nutracker helps couples track their pet's nutrition together without confusion or double-feeding.
Stage 02 Information Architecture

User flow, OOUX
& CTA inventory

Before touching screens, I needed to map the structure of the app. This stage taught me something valuable about when the "standard" process breaks down.

Honest reflection

How the User Flow confused me, and how OOUX saved the project

The user flow felt logical at first, but the app's matrix structure meant user behavior wasn't sequential, it was too complex to trace linearly. Object-Oriented UX rescued the project: mapping objects and their relationships instead of tasks gave me the clarity I needed to understand what needed to exist in the app and how everything connected.

User Flow
User Flow, useful but insufficient for matrix-structured apps
OOUX Object Mapping
OOUX, revealed what objects need to exist and how they relate
Lo-fi CTA Inventory
Lo-fi CTA Inventory, sticky notes mapping possible actions per object
Hi-fi CTA Inventory
Hi-fi CTA Inventory, prioritized by Level of Effort vs. Priority in Google Sheets
Stage 03 Design & User Testing

Paper to prototype,
tested twice

Two rounds of usability studies, first on the lo-fi prototype to shape the move to mockups, then on the hi-fi to catch what the first round missed.

Paper to digital wireframe 1
Home screen: reducing clutter, surfacing key actions
Paper to digital wireframe 2
Meal log: making the "mark as fed" action unmissable
Paper to digital wireframe 3
Food database: simplifying the add-item entry flow

Usability Study Results

What users told us
in two rounds

🔬 Round 1, Lo-Fi
Lo-fi prototype test
  • 01 Couldn't find the button to add a new food item to the database. 3 / 5
  • 02 Weren't sure the scheduled meal had been marked as fed after tapping. 75%
  • 03 Tried to add a new food item from the homepage, not from the database. 4 / 5
✨ Round 2, Hi-Fi
Hi-fi prototype test
  • 01 Still confused after pressing "Mark as fed", needed stronger confirmation cues. 3 / 5
  • 02 Unsure whether a just-added item was automatically selected in the menu. 75%
  • 03 Choosing time and food amount took too long, users showed signs of annoyance. 3 / 5
Stage 04 Refining the Design

Hi-fi prototype,
informed and organized

With study findings in hand, I built the hi-fi prototype. The visual design choices were informed by a mood board I created. The sticky sheet with the main components helped me keep the design system consistent from the start.

Mood board
Mood BoardDefined visual direction, palette, and the emotional tone of the app.
Sticky sheet
Sticky SheetComponent library ensuring consistency across all screens throughout the project.

Accessibility

Built for
every user

  • 1

    High contrast for color blind and low-contrast users WCAG 1.4.3

    All content meets the contrast ratio requirements ensuring readability for users with visual impairments or in bright environments.

  • 2

    Sequential navigation for assistive technology WCAG 2.4.3

    Every page can be navigated sequentially with a screen reader. Hierarchy is consistent so assistive technology users experience the app in a logical, meaningful order.

  • 3

    Touch target sizing for all users WCAG 2.5.5

    All tappable elements meet the minimum target size requirements, ensuring accurate interaction for users with motor impairments or on small screens.


Takeaways

What this project
taught me

🎯
Takeaway 01

Choose the Right Scope

As my first project, I tried to solve every problem at once. I now know that for any real product to succeed, scope is everything, even solving only one problem would have been enough to practice every aspect of UX design.

👥
Takeaway 02

Recruit a Diverse Testing Group

I was lucky to find a fairly diverse group in terms of age and gender. Next time I'll push even harder, the more different people's perspectives you test with, the brighter the insights and the harder the blind spots are to hide.

🧱
Takeaway 03

Design Systems Save Lives

I learned it the hard way: next time, I'll build a proper design system from day one. Editing one component and watching it update throughout the entire document is worth every minute of setup time.

Get in touch

Let's work together

Reach out and I'll share more about how I can solve your problem!