Google certificate - Design an ingredient preview app for an organic cat food brand

Catolive Cat Food Ingredient Preview App Design Allie Li

Project overview

The product:

Project duration:

Catolive is a organic cat food product

April 2021 to May 2021, around 6 weeks

company. This project aims to create a new app for the company to help cats’ owners to identify cat food ingredient which their cats need with an easy and clear method.

Project overview

The problem:

The goal:

Many cat owners have difficulty to find a

Design an app for Catolive that allows users to

suitable cat food for their cats.

find suitable and healthy cat food for their cats in an easy and clear method.

Project overview

My role:

Responsibilities:

UX researcher and UX designer.

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

●

User research

●

Personas

●

Problem statements

●

User journey maps

User research: summary

In this research, I conducted interviews with four cat owners. Some of them are main caretakers but some of them are not. Some of them live in New Taipei city but they can’t speak English. All of them have 1 to 3 cats at home. Some of them also have special need cats.

Most of their concern about cat food is that 1) It’s difficult for them to identify cat food ingredient and composition. Even though there are labels about the ingredient but because the market tends to use medical jargon.

2) They don’t know if their cats will like the food they buy. There are many factors to influence that if cats will like their food, for example, flavor or food state.

User research: pain points 1

2

3

Composition

Language

Preference

With who is not Chinese, they couldn’t understand labels with Chinese

Cat’s owners don’t know if their cats will like cat food they buy

Cat’s owners can’t understand the ingredient and composition on cat food label

Persona: Kevin Wang Problem statement: Kevin Wang is a teacher and main caretaker of his cat who needs a clear and simple ingredients index of the special need cat food because he doesn’t have ability to identify every composition by himself.

User journey map Kevin’s user journey revealed that the cat food preview app can save much time for him to look for cat food he needs.

Persona: Joe Santos Problem statement: Joe Santos is a freelance designer and companion of her boyfriend’s cat who needs a cat food flavor rating, review and labels she can read with English because she wants to make sure her boyfriend’s cat will like cat food she buys.

User journey map Joe’s user journey revealed that the cat food preview app can save her money by not buying the wrong food which her cat won’t like and removing the language barrier

Starting the design

●

Paper wireframes

●

Digital wireframes

●

Low-fidelity prototype

●

Usability studies

Paper wireframes These paper wireframes show the basic structure of the app based user’s research, including home page, product information page, shop information page, account page, category page, purchase history, and review and rating page.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Digital wireframes I used more pictures and icons on the app. It’s easier to understand for user

Composition bar provides an easy and clear way for the user to understand the composition

compare to medical jargon The user can check the Rating & Review to decide which cat food is worth to try

Digital wireframes Based on user’s research, I designed bilingual interface so the user can find shop information easily with Google map

Google map and shop information can tell user where is the closest shop can get the cat food

Provides Chinese, English and screen reader interface to reduce the language barrier and increase the accessibility

Digital wireframes Purchase history can help the user to remember the cat food which cats like

Cat’s data provides the user an easy way to record cat’s health situation

The user can save all cat food ratings and reviews in purchase history

Low-fidelity prototype The low-fidelity prototype connected the primary user flow of searching and ordering a cat food, so the prototype could be used in a usability study with users.

View the Cat Food Preview App Lo-fidelity prototype

Usability study: parameters

Study type:

Location:

Unmoderated usability study

Taiwan, colocation, remote (one participant will go through the study colocation, and other of them will go through the study at their home.)

Participants:

Length:

5 participants

No longer than 30 minutes

Usability study: findings Insert a one to two sentence introduction to the findings shared below.

1 Composition pie People don thinks cat food composition pie is useful

2

3

Cat food portion suggestion

Finding

People think cat food portion suggestion is useful

People want to receive cat food delivery at home

Refining the design

●

Mockups

●

High-fidelity prototype

●

Accessibility

Mockups I removed the composition pie but only use different color bar to show every composition to make it easier to see

Before usability study

After usability study

Before usability study

Mockups There was no option that allow the user to receive cat food from home, I added Recipient information so that user can decide where will they receive the product

After usability study

Mockups

High-fidelity prototype The hi-fidelity prototype followed the same “search and order a cat food” user flow as the lo-fi prototype and included the design changes made after the usability study.

View the Cat Food Preview App high-fidelity prototype

Accessibility considerations 1

2

3

Provided bilingual interface for people who can understand only one language

Provided access to users who are vision impaired through adding alt text to images for screen readers.

Used food state imagery for cat food to help all users better understand the content.

Going forward

●

Takeaways

●

Next steps

Takeaways

Impact:

What I learned:

The app helps cat owners find cat food they

While designing this cat food preview app, I

need easily, also save their time and money.

learned that I really need to pay a lot attention on details. Usability studies are really helpful

“One quote from participant feedback:

and participants reminded me about many

I will use this for sure, this app is easy enough

details that I didn’t notice. Focusing on user’s

but it’s really helpful to find information that I

needs also make this app more useful and it

need.”

can really solve people’s problems.

Next steps 1

2

Conduct last round of usability studies and user research to validate whether the pain points users experienced have been effectively addressed and determine any new areas of need.

Close this project after the last round of usability studies and user research

Let’s connect!

Thank you for your time reviewing my work on the Catolive cat food preview app! If you’d like to see more or get in touch, my contact information is provided below.

Email: allie@quadrivium.xyz

Thank you!