Pet Care app concept: a white phone showing Barsik's health cards beside the Pet Care title on a pink and white background
Pet Care

Pet Care

Mobile appUI/UXInteraction design

Winner of a design competition. App concept for pet care.

My role

Designer

  • Research
  • Wireframes
  • Interface design
  • Animations

Competition

The brief

Design a concept app for pet owners. Scientists have made a chip that sits in a pet’s body and reads hundreds of health parameters, and the app has to show them to the owner. The pet was up to us, and I chose a dog.

  • Entries

    300

    Designers took part

  • Competition

    1 week

    Several tasks, with this app as the last one

  • Deadline for last task

    2 days

    To research, design and animate the app

  • Prize I won

    3 months

    Paid internship at AIC, a leading design agency, with accommodation included.

Competition prizes

  1. 1st place

    I won

    3-month internship

  2. 2nd place

    MacBook Pro

  3. 3rd place

    iPhone Pro

Research

What a dog needs

The two days started with research: what a dog needs to live well, and which signs show the state of its body best.

Needs

  • Healthy, balanced food
  • A home, even for dogs that live outside
  • Training

Main health signs

  • Body temperature
  • Heart rate
  • Digestion
  • Emotional state

Process

Wireframes

After the research, I started with wireframes of the four main screens: the pet’s main screen, physical data, emotional state and the pet’s needs. The final design keeps this layout.

Four grey wireframes of the app: the main screen with a pet card and four sign cards, physical data with a curved category selector and hemoglobin charts, emotional state with a Positive score and three bars, and the needs screen with food satiety and toilet time reminders

Pets tab

Main screen

  • Pet card

    Photo, name, breed, age, height and weight. Swiping the card opens the next pet, and the screen changes to that pet’s colour: orange for Barsik, pink for Uncle Fedor.

  • Signs

    Heart rate, temperature, digestion and emotional state, each with a status such as Normal, Good or Angry Dog. The Signs Analysis button checks all parameters at once.

  • Tab bar

    Physical and Emotional are the two main sections. The button in the centre opens the pet’s needs and collects alerts. More is for secondary features.

The main screen: the pet card swipes from Barsik in orange to Uncle Fedor in pink and back, and the whole screen changes colour with it

Physical tab

Physical data

The data is split into categories, such as haematological, chemical and renal function, each with an overall score. Swiping the arc at the top switches the category.

Below the arc are the processes in the body at the moment: leukocytes, hemoglobin, erythrocytes, monocytes and more, each with a chart by day.

The Physical tab: the arc swipes from Haematological at 76% to Renal Function at 83% and back, and the list of charts scrolls
The app's cards laid out on coral: leukocytes and erythrocytes with line charts, hemoglobin and monocytes with charts by day, and small cards for heart rate, temperature, digestive system and emotional condition

Emotional tab

Emotional state

At the top is the dog’s overall mood, here Positive at 81%, with Negative and Neutral on either side. Below it, three bars show pleasure, delight and joy, and further down is the love of master score.

The Emotional tab: a Positive score of 81% with a smiley face on a curved selector, and three tall bars for Pleasure at 70%, Delight at 79% and Joy at 48%

Centre button

The pet’s needs

Food satiety shows how full the dog is and the split between fats, proteins and carbohydrates. The owner can set a reminder to buy food.

Under Toilet time, the system works out when the dog needs to go out. Each time has a reminder 10 minutes before and a switch to turn it off.

The needs screen: food satiety at 47% with fats, proteins and carbohydrates rings, and toilet times at 06:45, 12:30 and 19:45 being switched off and on

Style guide

Colours and type

Four colours make the two gradients in the app. The text is set in SF Pro Display, the iPhone system typeface, in two weights.

Colours

  • Orange

    #FAAC6B

    Start of the orange gradient

  • Coral

    #F27477

    End of the orange gradient and buttons

  • Pink

    #F15093

    Start of the pink gradient

  • Magenta

    #DF42C4

    End of the pink gradient

Pet Care

Logo and app icon

The dog from the pet card in the app’s pink gradient, with the name to match.

Three lines of sample text in SF Pro Display Bold

SF Pro Display Bold

Pet names, values and buttons.

Three lines of sample text in SF Pro Display Regular

SF Pro Display Regular

Labels, units and statuses.