Case Study · Pet Healthcare · 2023

tailsync
your dog's
health, tracked.

Dark-first mobile app for dog activity tracking — GPS routes, health metrics, Apple Watch integration, and a design system built for clarity in low-light contexts.

RoleUX/UI Designer
Year2023
PlatformiOS · Apple Watch
IndustryPet Healthcare
TailSync cover — pet healthcare app
About & Goal

"A thoughtful approach to your dog's specific needs — daily goals, steps, time outdoors, calories, favourite places."

TailSync innovates the concept of dog activity tracking with a special focus on daily walks. Beyond basic duration and distance, the app records your dog's favourite places — giving owners the option to create personalised routes that suit their style and needs.

The goal was clear: ensure a healthy, active and happy life for your faithful friend, through a product that felt as natural to use on an outdoor walk as it did at home on the sofa.

The Challenge

Dark UI.
Outdoor context.

Designing for outdoor, on-the-go use introduced constraints that a standard bright-mode app would ignore — glare, one-handed usage, gloved fingers, and split attention. Every UI decision had to account for the real context of use: a walk in the park with a dog on the lead.

"The hardest part wasn't the tracking features — it was making a data-rich app feel effortless when your hands are full and you're moving."

Challenge 01

Dark-mode first design system

Building a component library that maintained contrast ratios and readability across true dark backgrounds, OLED-optimised for outdoor sunlight conditions.

Challenge 02

Apple Watch companion

Designing a coherent experience across phone and watch — same session, different form factors. The watch UI had to surface only what mattered mid-training.

Challenge 03

Multi-activity tracking

From outdoor walks to swimming and mountain hikes — the activity model had to be flexible enough to cover very different session types without overcomplicating the UI.

Challenge 04

Serving two user types

Dog owners and dogsitters have different needs in the same app — owner profiles, dog profiles, and session handoffs all had to feel intuitive for both.

TailSync goal and design process

About & goal · Design process — double diamond

Design Process

Research-led.
Context-first.

The design process followed the full Double Diamond — from competitive analysis and user interviews through to interactive prototyping and a complete UI kit ready for handoff.

01

Empathise

  • Competitor analysis
  • User surveys
  • User interviews
02

Define

  • Personas analysis
  • Jobs to be done
  • User journey map
03

Ideate

  • Brainstorm
  • Information architecture
  • User flow
04

Prototype

  • Wireframes
  • Prototype
  • Hi-Fi design · UI Kit
05

Deliver

  • Project presentation
  • Ready for dev
TailSync UI screens — home, activities, Apple Watch

Product design — home, activity log, Apple Watch companion, GPS tracking

User Analysis

Three profiles.
One pack.

Each user type has distinct needs, routines, and moments of app use. Persona work shaped which features surfaced first and how session data was displayed across dog owner, rookie owner, and dogsitter contexts.

Age 30–60+

Dog Owner

Experienced pet owner who wants detailed health tracking, historical data, and GPS route logging for their dog's daily routine.

Age 20–35

Rookie Dog Owner

First-time owner, anxious about doing things right. Needs clear guidance, easy session setup, and reassuring health feedback without data overload.

Age 20–45

Dogsitter

Manages multiple dogs, needs quick session starts, simple handoff to the real owner, and clear activity summaries to share after each walk.

Visual Design

Dark. Alive.
Built for outdoors.

The palette was designed for outdoor readability — deep blacks for OLED contrast, a sparkling cyan accent that pops in sunlight, and warm greys that keep the interface feeling organic rather than clinical.

Soft-Black
#1E1E1E
Sparkling Green
#28FFE5
Warm-Grey
#8B8987
White Smoke
#F2F2F2
Silver
#C6C6C6
TailSync user analysis and color palette

User analysis · Color palette — three personas & five-colour system

Reflection

What I took away.

TailSync was the project where I fully committed to dark-mode-first design — not as an aesthetic choice, but as a functional requirement. It changed how I think about contrast, hierarchy, and context-aware UI permanently.

Takeaway 01

Context of use reshapes every decision

Designing for someone walking a dog outdoors — one hand, possibly gloves, bright sunlight — forced me to question every tap target, every label size, every contrast ratio from scratch.

Takeaway 02

Multi-platform coherence is a UX problem

Keeping phone and Apple Watch feeling like one product — not two — required defining a shared session model before touching any screen design. Architecture first, visuals second.

Back to start

View all projects

NovaVista · YELDO · Harold · TailSync

All projects →