Project Details

Duration

Role

Tools

Deliverables

4 weeks

UX Designer

Adobe XD, Figma, Adobe Illustrator, Airtable, Miro

UX Design, UX Research, Mobile App UI Design, Prototyping, Usability Testing

Challenge

Create a platform for pet owners to connect and exchange information without overwhelming friends and families with their posts about pets on IG and Facebook.

Solution

Home feed and story create the same experience as the major social media.

Users can view and access all functions at the bottom tool bar as easily as possible.

User profile allows users to manage their posts and discussion.

Forum platform allows pet owners to connect and ask questions openly. It also encourages user engagement.

Topics of discussion are divided into three categories, users can easily search for what they look for.

Ability to search pet-friendly spots in the platform enhances user experience.

Background

As a pet owner, I usually tend to find google to be the best resource to look for answers to a lot of pet-related problems. Or on the walks, I will be able to talk to other pet owners about the pet care issues I have and chat for advice from experienced owners. There are other times I just want to find a good playdate for my pup. There are tons of pet stores and grooming services for pets, but I can’t seem to find a good social platform for pet owners to connect, share information, and ask questions other than Reddit and Google searches.

There is a demand for a friendly community for pet owners to connect and meet other owners who may have the same struggles and be able to discuss pet-related information.

Problem

Although there are a lot of pet stores and training resources for pet owners to find, they seem to have a hard time finding an inclusive community to connect with other owners and ask about daily pet care issues. They love sharing little things about their pets, but on regular social media, it can be overwhelming for their friends to see every update about the pets. Having a pet exclusive social media platform to build a community would be a great solution to give pet owners the opportunity to connect with others and don’t have to worry about others’ judgments.

Deliverables: Competitive Analysis | Secondary Research | Survey

Research Goals

To find out the importance of secondary resources to pet owners when it comes to pet care.
To understand pet owners’ expectations when they join a pet community/ social platform.
To understand what are the features pet owners expect to see on the app.

Empathize

Secondary Research

The secondary research shows that having pets will likely increase the opportunity to have human-human interaction which helps to build a community. I was also able to find out some of the major topics pet owners care about. With these secondary research findings, I was more confident going into this project.

“Social networks that are developed based on shared concern over the welfare of animals can lead to increased human-human interaction, as well as activities involving pets.”

-L.F. Carver, Author of from The Conversation

Here are some of the key findings:

45% of pet owners say that training their pets and managing behavioral issues has been a particularly difficult part.

One in six say they’ve created a social media profile specifically for their pet – and half of those pet owners say their pets get more social attention than they do!

65% of pet owners post about their furry friends on social media an average of two times per week.

People with pets often find that activities with their companion animals create connections with other people.

Survey

The survey result shows that most pet owners consider secondary resources important, and they like to talk to other pet owners regarding pet care issues. The problem identified from the survey is how would we attract pet owners to using the pet-only social media app. Other than that, I still received some valuable insights from the survey result.

I recruited a total of 16 pet owners to participate in this survey, here are the key findings:

100%

of pet owners would Google when they have questions about pet care.

85.7%

of pet owners talk about pet care issues with other owners.

87.5%

of pet owners would like to see a pet-friendly location finder feature on the pet-only social media app.

I also found out the top three topics pet owners care most about which would help to define the categories in the forum feature:

Pet Care

Behavior Issues

Training

Competitive Analysis

I conducted the competitive analysis with some of the major competitors in the market to compare the features they have, as well as their strengths and weaknesses. Understanding what are available to the pet owners can help me better define the features to include in PetPals.

Problem Statement

I looked into the research and participants’ feedbacks, I can conclude that creating a pet-only social media platform will help reinforce the idea of building a pet-owner community.

I was able to further refine the question that I had in mind and came up with a clear problem statement:

How might we create an inclusive social platform for pet owners to exchange information and connect?

Deliverables: Persona | Empathy Map

Persona and Empathy Map

Define

With the research conducted thus far and the insight provided by the participants, I came up with a user persona and empathy that reflects the various needs and pain points from the research findings.

Meet Stella- a project manager who lives in Los Angeles with her puppy Mochi. She’s hoping there is an easier way to meet other pet owners to share things about her pet and ask for pet care advice.

Deliverables: User Flow | Site Map | Style Guide | Mid-Fi Wireframes | Hi-Fi Wireframes

User Flow

I focused on the two major tasks I am designing for the usability testing for the user flow map. By creating the user flow chart, it helps to understand how users would navigate to complete these tasks.

Ideate

Site Map

I created a site map to help me visualize the information architect of this app and to keep the structure of the app clear when I am designing.

Design System

I started visualizing the design elements with the color choice I envision this app to be. I hope this app gives users the impression of being fun, friendly, and engaging when they use this app.

Mid Fidelity Wireframes

Design System

I started to design the wireframes through Adobe XD to get the core app struture clear to follow later.

Home feed

Discover

Forum

Pet friendly spots

Setting

High Fidelity Wireframes

Once I have the core structure of the wireframes, I started to work on the hi-fi wireframes on Figma.

Home feed

Setting

Pet friendly spots

Profile

Hi-Fi Wireframes

Posting

Photo selection

Photo filter

Review

Confirmed

Add tags

Add location

Posted

Add caption

Forum

Search result

Test

Forum post

Comment

Deliverables: High Fidelity Prototype | Usability Test | Test Findings | Affinity Map

Usability Test

In order to test the PetPals features amongst pet owners, I developed a high-fidelity prototype in Adobe XD with two complete task flows. This would allow me to test some of the main features I designed and collect valuable feedback to understand if there are any flaws in the design for the iteration stage.

Methodologies
Unmoderated usability testing through Maze, an online prototype testing tool.

Participant requirement
Participants who have one or more pets.

Total participants: 14

Discover

Usability Test Findings

Once I had completed my testing, I added every note, comment, and observation onto an affinity map. From there, I pulled out patterns to figure out what I should update in my wireframes.

Insights:

Most of the participants found the tasks straightforward and easy to complete.
Positive feedback about the forum and pet-friendly spots feature, as well as UI elements.
Camera and Forum icons are confusing to the users of what they meant.
The CTA prompt is not pronounced enough on the posting screen.
The ability to tag a profile is missing on the posting screen.
Location color is too light for users to read.

Recommendations:

Change Post icon to “+” instead of the camera to make it clear to the users.
Add more padding between forum bubbles for better readability.
Make forum category headers bigger for better readability.
Make the comments collapsible in the forum article to make the UI cleaner.
Add more categories or filter features for the forum.

Deliverables: Prioritize Revision | Iterate Wireframes | Takeaways

Revision Priority

Iterate Wireframes

After I prioritized what to change, I went back to revise the most impactful changes. One of the important pieces of feedback from the users is the icons of Posting and Forum are confusing. Therefore I started iterating my design from there and added a pop-up of posting selection after clicking the post to give users a clear prompt of what to do next.

Previous posting route

Posting selection

Post screen

Forum

Post comments

Takeaways

In this project, I focused on building an end-to-end mobile app to deliver a consistent user experience to the target users. I enjoyed the whole process from conceptualizing the idea to the research stage and finally designing the wireframes and prototype. It was the most time-consuming project to ideate the design system and design pattern from craft with tons of research to back.

I looked back and there are some valuable takeaways:

What did I learn?

I learned that other designer peers’ feedbacks are valuable no matter at which stage. I have received feedback from other designers throughout the project, and I found that extremely helpful for me to identify areas of improvement in the design early on.

Because I had to create an MVP, I made sure that my app only included the most essential features and complete flows for the prototype. I still tried to include ones that would give my app a competitive advantage.

What could I have done better?

Due to the tight project turnaround, I jumped into designing after I thought I had every research element to support the design stage. The truth is that I wished I could have done more pattern research on other social media apps to look at some other possibilities that could fit my concept better. I realized that after my usability test is completed and saw some of the feedbacks from the users mentioning uncommon UI design in the prototype. If I could do it over, I would work on the design pattern research before the ideation to collect more ideas which could prevent to iterate on small issues of the UI design.

Venmo, adding a new feature

A-Pou's Taste, rebrand the restaurant website

Deliverables: Competitive Analysis | Secondary Research | Survey

To find out the importance of secondary resources to pet owners when it comes to pet care.

To understand pet owners’ expectations when they join a pet community/ social platform.

To understand what are the features pet owners expect to see on the app.

“Social networks that are developed based on shared concern over the welfare of animals can lead to increased human-human interaction, as well as activities involving pets.”

Here are some of the key findings:

100%

85.7%

87.5%

I also found out the top three topics pet owners care most about which would help to define the categories in the forum feature:

I conducted the competitive analysis with some of the major competitors in the market to compare the features they have, as well as their strengths and weaknesses. Understanding what are available to the pet owners can help me better define the features to include in PetPals.

I looked into the research and participants’ feedbacks, I can conclude that creating a pet-only social media platform will help reinforce the idea of building a pet-owner community. I was able to further refine the question that I had in mind and came up with a clear problem statement:

How might we create an inclusive social platform for pet owners to exchange information and connect?

Deliverables: Persona | Empathy Map

Deliverables: User Flow | Site Map | Style Guide | Mid-Fi Wireframes | Hi-Fi Wireframes

I focused on the two major tasks I am designing for the usability testing for the user flow map. By creating the user flow chart, it helps to understand how users would navigate to complete these tasks.

I created a site map to help me visualize the information architect of this app and to keep the structure of the app clear when I am designing.

I started visualizing the design elements with the color choice I envision this app to be. I hope this app gives users the impression of being fun, friendly, and engaging when they use this app.

I started to design the wireframes through Adobe XD to get the core app struture clear to follow later.

Once I have the core structure of the wireframes, I started to work on the hi-fi wireframes on Figma.

Deliverables: High Fidelity Prototype | Usability Test | Test Findings | Affinity Map

Once I had completed my testing, I added every note, comment, and observation onto an affinity map. From there, I pulled out patterns to figure out what I should update in my wireframes.

Insights:

Most of the participants found the tasks straightforward and easy to complete.

Positive feedback about the forum and pet-friendly spots feature, as well as UI elements.

Camera and Forum icons are confusing to the users of what they meant.

The CTA prompt is not pronounced enough on the posting screen.

The ability to tag a profile is missing on the posting screen.

Location color is too light for users to read.

​Recommendations:

Change Post icon to “+” instead of the camera to make it clear to the users.

Add more padding between forum bubbles for better readability.

Make forum category headers bigger for better readability.

Make the comments collapsible in the forum article to make the UI cleaner.

Add more categories or filter features for the forum.

Deliverables: Prioritize Revision | Iterate Wireframes | Takeaways

What did I learn?

I learned that other designer peers’ feedbacks are valuable no matter at which stage. I have received feedback from other designers throughout the project, and I found that extremely helpful for me to identify areas of improvement in the design early on.

​

Because I had to create an MVP, I made sure that my app only included the most essential features and complete flows for the prototype. I still tried to include ones that would give my app a competitive advantage.

What could I have done better?

I looked into the research and participants’ feedbacks, I can conclude that creating a pet-only social media platform will help reinforce the idea of building a pet-owner community.

I was able to further refine the question that I had in mind and came up with a clear problem statement:

Recommendations: