top of page
Design Portfolio Images.png

Purrception

Designed an educational mobile app to help new and prospective cat owners bond with and take care of their cats. Here's a link to the prototype.

ROLE

UI/UX Designer & Strategist

TOOLS

Figma

TEAM

Solo

Adobe Illustrator

The Problem

Many people get cats on impulse, without truly understanding what it means to take care of another living being. People often pick up cats from the street or other random places. Even legitimate institutions like shelters give the bare minimum in terms of education. As a result, many new cat owner’s don’t understand their cats, and they’re often given to shelters in the end.

Unfortunately, understanding cats involves a lot of research, and that can be inconvenient in people’s busy lives.

Guiding Question

How might I help people understand how cats communicate and how to respect their boundaries in order to build positive a relationship? And how can I do this in an easily digestible way?

Solution

An app that consolidates information in books, websites, articles, and documentaries about cats. The app will focus on cat behavior that goes beyond their base-level needs (like food, water, play, immunizations), and it will help owners bond with and respect their cats. Here's a link to the prototype.

Slide 16_9 - 49.png

Timeline

Here's a part of my overall timeline. I structured it in a similar way to an agile creation process.

Screen Shot 2024-06-17 at 5.17.35 PM.png

Preliminary Research

I started by looking at other informational and pet training apps. I found that there were extensive apps for dogs, but cat apps were focused more on training than building that initial bond. Before training can even happen, the cat must feel trust and feel safe in their environment. There were some AI apps that attempted to help people understand cats better, but the reviews showed that they were untrustworthy.

Competitive Analysis.png

Preliminary Interviews

Based on my secondary research, I'd found a knowledge gap in new cat owners. This was also based on my own experience when I adopted a cat years ago. However, I wanted other people to weigh in on this, and I wanted to see how high the learning curve was for others. So, I asked a few people about their experiences. I wanted to understand the story of how they adopted their cat and how their initial relationship was.

Constraints

Because the user group I wanted was pretty specific, it was difficult to recruit people who were new cat owners. I ultimately had to compromise and interview people who had cats for many years. However, I supplemented that with in-depth secondary research and created personas later on.

Preliminary Interviews.png
Interview Summary.png

Defining the Target Audience

Audience.png
Frame 5.png
Frame 6.png

Initial User Flow

Here's the flow of the three features: Learning modules, Forum, and Diary

User Flow.png

Low-Fidelity Wireframes

Learning Modules

Here's the main wireframes of the navigation, the actual learning module pages, and the test quizzes at the end.

Lo-Fi 1.png

Forum & Diary

Ask specific questions about your cat and write about your interactions with your cat.

Lo-Fi 2.png

User Testing

I asked 5 potential users (2 new cat owners, 1 prospective cat owner,  and 1 experienced cat owner) to give feedback on the wireframes. I also asked other designers and my project advisor for feedback.

Constraints

I unfortunately couldn't find someone who was a brand new cat owner, meaning someone who's had a cat for less than three weeks. However, the 5 people I interviewed could all clearly remember the beginning stages with their cat.

Testing Method

I asked the testers to go through one page in one learning module and stop. I wanted to see how well they retained information and how understandable the information was. I recorded thoughts, facial expressions, challenges, and successes.

​

Then, I asked them to go through my entire prototype and give me feedback on flow, mechanics, and access to information.

Questions

These were the questions asked throughout:

​​

  • What are your overall thoughts on information layout in the modules? Is there anything that could be improved?

  • If you ever had a specific question about a subject, do you think this information layout and flow would help or hinder your search?

  • What are your overall thoughts about this consolidated information format? Is it better or worse than using the internet or AI to learn about cats?

  • Were you able to concentrate and retain information well? Can you relay to me what you just read?

  • Any other thoughts?

Takeaways

Navigation

People mentioned that it would be difficult to jump around in a module because there was no way to access the directory while your were learning. They also wanted internal page links so that they could jump around within pages themselves.

Info Layout

People found it hard to retain information because there were too many info tables. They also mentioned that the tables felt too repetitive and wanted information presented in different ways. One person felt that the text was too small.

Progress

People wanted additional methods of seeing their progress overtime.

Revisions

Overall Navigation

To navigate around in the old version of an informational page, you had to go back to the home page. This was inconvenient.

Slide 16_9 - 59.png

Internal Page Navigation

Each module page has a lot of information, so it made sense to add navigational links at the top for quick access to different sections.

Slide 16_9 - 60.png

Section Design

Each module page has a lot of information, so in user testing, some people lost focus. In the old version, the information felt constrained and rectangular, so I tried to make it more visually interesting.

Slide 16_9 - 61.png

Information Layout + Retention

Each module page has a lot of information, so they’re long. Some pages also have 3 or 4 tables in a row, and it’s difficult to process the information. The old version had all tables in the expanded format.

Slide 16_9 - 57.png

Information Layout + Retention

Each module page has a lot of information, and recalling information is one of the best ways to retain it. So, mini quizzes were added to the end of every page. There are also fun facts to provide some relief from the info tables.

Slide 16_9 - 58.png

High Fidelity Wireframes

Here's a link to the prototype. There are three flows in this prototype, so make sure to open the side panel!

Learning Modules (Navigation, Info Pages, Quizzes)

Slide 16_9 - 49.png

Forum + Diary

Slide 16_9 - 62.png

Brand & Style Guide

I wanted to create a brand that felt warm, friendly, and approachable. The app is meant to help users become friends with their cats, so that tone felt appropriate. I created the entire brand and brand book.

​

Click the left and right arrows below for a sneak peak, and you can click here for the full guide!

Front Cover.png

Component Library

Screen Shot 2024-06-17 at 10.38.54 PM.png
Screen Shot 2024-06-17 at 10.41.16 PM.png
Screen Shot 2024-06-17 at 10.41.25 PM.png
Screen Shot 2024-06-17 at 10.37.18 PM.png
Screen Shot 2024-06-17 at 10.37.27 PM.png
Screen Shot 2024-06-17 at 10.40.12 PM.png
Screen Shot 2024-06-17 at 10.50.16 PM.png
Screen Shot 2024-06-17 at 10.36.46 PM.png
Screen Shot 2024-06-17 at 10.37.51 PM.png
Screen Shot 2024-06-17 at 10.36.56 PM.png
Screen Shot 2024-06-17 at 10.38.04 PM.png
Screen Shot 2024-06-18 at 12.19.28 PM.png
Screen Shot 2024-06-17 at 10.36.28 PM.png
Screen Shot 2024-06-17 at 10.38.39 PM.png
Screen Shot 2024-06-17 at 10.38.39 PM.png
Screen Shot 2024-06-18 at 12.18.44 PM.png

Next Steps

Friendly Homepage

Right now, the homepage only has the learning modules on it, and it feels a bit cold and impersonal. To resolve this, there could be:
 

  • Personalized daily tasks

  • Sign in rewards

  • A ‘Welcome’ section at the top with illustrations

Data Visualizations

In meditation apps, there’s usually a ‘how are you feeling today?’ question with a multiple choice response. There could be a version of this focusing on your relationship with your cat. Then, that data could be used in a graph to show progress overtime.

AI Chatbot

An AI chatbot helper who can answer specific questions. It will pull information from the modules.

bottom of page