A nutrition tracking app only for cats - Catcare

  • Role

    UX researcher and designer

  • Responsibility

    • User research

    • Wireframing

    • Prototyping

  • Duration

    Dec 2021 to Mar 2022

 

The problem

Numerous cat ailments result from obesity and nutritional deficiencies. Tracking nutrient intake and a lack of knowledge can make long-term feline health management difficult. An app offering both tracking and informational features would be beneficial for cat owners, particularly those with unwell cats.

The goal

Develop an app to monitor nutritional intake, daily data, and offer cat-related information along with personalized lifestyle recommendations.

User research

Summary

 

I conducted user interviews to ensure design alignment with their needs. The main target group consists of individuals focused on their cats' health but with limited knowledge.

The app should track factors beyond nutrition intake and offer various functionalities, as multiple elements impact health conditions.

Diet-related disorders

The lack of nutritionally complete and balanced food intake can result in various diseases, such as obesity, heart disease and diabetes.

The cat obesity chart is unclear

It is hard for cat owners to define the body condition of their cats according to the chart, which is the most accessible way.

Lack of knowledge

Most cat owners have a very minimum of cat-related knowledge, making them unable to keep their cats healthy and missing the best time for seeking professional help.

Pain points

Hard to track the nutrition

The nutrition of cat food varies with every brand. It is hard to keep track. And the owners don’t know the portion exactly.

Perona: Jane

Problem statement:

Jane is a middle-aged mother who needs easy ways to help her keep track of her cat’s health and channels to learn about cat-related knowledge. She wants her cat to stay with her for a long time.

 

User journey map

Mapping Jane’s user journey revealed how helpful it would be for users to access the Catcare app.

 

Starting the design

After brainstorming different combinations of functionality, I put a selection of functionality that provides the smoothest user experience in the last frame. It comprises a pet selection, calendar, upcoming schedule, recommendation, and menu bar.

Paper wireframes

Digital wireframes

  • The home page

    I want the app to look like a diary which gives users a journaling vibe when logging the data. The users can access to the previous information easily by selection a date on the calendar.

    Also, switching between different cats is essential for users with more than one cat.

  • Health graph and recommendation

    I think it is essential for the users to have an overview of the tracked data and gain personalized recommendations. Putting them in the same page can let the users understand the recommendation easier by linking the data with the recommendation.

Low-fidelity prototype

The low-fi prototype shows the user flow from selecting a pet on the welcome page to logging data, checking the health graph, and learning more about the cat’s health.

View the Catcare low-fi prototype

 

Usability study: findings

  • Goals

    To discover what specific difficulties users encounter when completing the core tasks of the app: logging data, checking health graphs and articles and editing the profile.

  • Round 1 findings – low-fi

    1. Users need clear indications of the profile button on the home page

    2. Users need buttons with better wordings instead of [more] and [learn more] to prevent confusion.

    3. Users need a better differentiation of the [health graph] page and the [tips & articles] page

  • Round 2 findings – hi-fi

    1. Users need a [log out] button

    2. Users need a instruction to begin with the app

    3. Users need a way to remove cats

Refining the design

Mockups

The first one is the homepage of Catcare.

I added an instruction screen for the new users so that they would not feel overwhelmed and confused by all the functions. Also, I changed the [activity] log to [daily pictures] as I realised that tracking a pet's activity is hard without an extra wearable. Besides, users can now record the length data too.

 

The second one is the screen for editing a cat’s profile.

I’ve centered the instruction under the camera button for better readability. I added a [unknown] button for users who might not know the exact date of birth. At the box button, there is an extra [remove this cat] button for the users to delete the cat for any reason.

 

Lastly, for the [health graph] page, I changed the colour of the selected button under the chart after the usability study, so the users will know what the graph is about.

Also, I used personalised text buttons instead of [learn more] to prevent using the exact wordings and make them more descriptive.

 

More screens

 
 
 

High-fidelity prototype

The high-fi includes several updates to the font, instructions, text buttons, and functionalities based on the mock-up.

For the complete prototype, please visit here.

 

Accessibility considerations

  • 1

    Use icons to make the navigation easier.

  • 2

    Provide accessibility with different colours, shapes and fonts. For examples:

  • 3

    Use different buttons and background colours to help the users to divide the severe symptoms.

Going forward

Takeaways

  • Impact

    The app helps users track their cat’s nutrition intake and daily records. This is especially helpful for ill cats.

    It also gives the users recommendations and information to learn more about cats and improve their lifestyle.

  • What I learned:

    While designing the app, I learned multiple things. Down below are some of the most important ones:

    • It is essential to give clear instructions to new users.

    • It is important to provide several different ways for users to go back to the previous steps.

Next steps

1

Conduct another round of usability studies to determine if the users’ pain points were reached.

2

Conduct more user research to determine any new areas of need.

Let’s connect!

Thank you for reviewing my Catcare app!

If you’d like to see more and get in touch, feel free to connect.