A mockup of two phones showcasing a pet supervision app.
PetWarden's light logo.

The ultimate smart command center for your pet.

Case Study

The Problem

Leaving pets home alone for hours can cause boredom and anxiety. Most owners carry constant stress when they can’t be there to manage their pet's routines or provide stimulation. Currently, at-home surveillance and feeding solutions are exorbitantly expensive and difficult to manage, resulting in further stress for pet owners.

Roughly 40% to 44% of pet owners report feeling significant stress or anxiety themselves just by leaving their pet home alone for the day.

A hand holding a phon with PetWarden displayed on it's screen.

The Solution

PetWarden is a centralized hub that lets you monitor and care for your pets from anywhere, by syncing your app to at-home modular surveillance and feeding devices. It handles the essentials like food and water through an automated system, but focuses on pet interactions with cameras, microphones, and a built-in ball launcher. The PetWarden app syncs your phone to your home ecosystem, so you can keep your pets on their normal routine and make sure they're staying active and happy while you’re out.

The Method

This project started with a presentation brief where I outlined details such as target audiences, a competitive analysis, and an in-depth description of the app to develop the concept further. I moved into Figma to create a diverse set of low and mid-fidelity wireframes, keeping the user experience and simplicity at the forefront of the page layouts.

I also created a detailed UI Kit, including app components, brand colors, and design assets to serve as a "toolbox" to build the final designs. Finally, I designed the high-fidelity wireframes, which implemented the UI Kit and were prototyped in Figma to create a functional prototype of the app.

Two mid-fidelity wireframes of PetWarden's interface.

Skills Used

Figma Prototyping UX Research UI Kit Use Marketing

Project Showcase

An orange and purple document outlining deliverables of PetWarden.

PetWarden's deliverables outlined from a brand brief.

"Health Recap" high-fidelity mockup page.

"Health Recap" high-fidelity mockup page.

"My Devices" high-fidelity mockup page.

"My Devices" high-fidelity mockup page.

"Quick Actions" high-fidelity mockup page.

"Quick Actions" high-fidelity mockup page.

"Pet Profile" high-fidelity mockup page.

"Pet Profile" high-fidelity mockup page.

A mockup of Petwarden's main dashboard.

PetWarden's main high-fidelity dashboard mockup page.

A screenshot of Figma frames showcasing medium-fidelity wireframes.

Key mid-fidelity wireframes from the design process.

A Figma screenshot of low-fidelity mobile mockups.

Key low-fidelity wireframes from the design process.

A Figma screenshot showcasing UI kit elements with purple and orange colours.

Fully developed brand UI kit, consisting of several Figma components.