Petto
Case study · UX/ui design · ux research
INTRODUCTION
Petto is a mobile platform that enables users to find their perfect pet companion, keep track of the adoption process and interact with the pet community!
MY ROLE
THE TEAM
TIMELINE
UX Researcher, UI Designer
Janice Wang,
James Halim (Myself)
James Halim (Myself)
July 2021 — September 2021
MY TOOLS
Figma, Miro, After Effects, Procreate
OVERVIEW OF THE REDESIGNED EXPERIENCE
Guiding the users through an onboarding process
Questionnaire process to help match users
with their ideal pet companions
with their ideal pet companions
Overview of dashboard, pet information,
and adoption status menu
and adoption status menu
As a pet owner of a lovingly annoying cat, my partner and I noticed many of my friends and peers share the same struggles in adopting their lovely pets. This sparked the question...
How might we create a seamless pet adoption process that helps users find the pets that fit their lifestyles?
How might we create a seamless pet adoption process that helps users find the pets that fit their lifestyles?
PROBLEM STATEMENT
We kicked off the process with a comprehensive research phase - gathering quantitative data from user interviews and surveys. Interviews of 6 participants were conducted 1:1 online virtually.
Pet adoption process can be long and confusing
“There are times where I’m not sure how the adoption process is done, or what the requirements are.”
“There are times where I’m not sure how the adoption process is done, or what the requirements are.”
iNTRO: RESEARCH PHASE
User interviews Insights
Too much time spent trying to find information through various sources.
“I had to google a lot of the information about the pet and it's traits, however there were conflicting information since it mainly came from people's opinions...”
“I had to google a lot of the information about the pet and it's traits, however there were conflicting information since it mainly came from people's opinions...”
In most adoption websites and apps, the pet is displayed without any clear filters.
“There are so many pets to choose from. I don't know if they are right for me."
“There are so many pets to choose from. I don't know if they are right for me."
🔎Research PROCESS
Identifying and prioritising potential solutions.
A comprehensive affinity map were framed and organized. This exercise laid the foundation for the project's MVP.
🔎research PROCESS
Charting user
empathy maps
empathy maps
Visualizing and articulating the current understanding of the users, user needs, and pin points additional key insights
💭Key Takeaways
From the research conducted we established key pain points that the users experienced. When prospecting the idea of pet adoption, users are influenced by those around them, as well as, their current living conditions. Users are also unsure how to go about caring for their potential pets. With that in mind, we set out to find a solution that best aligns with the user needs.
✔️SOLUTION
Petto Mobile App
Our solution is to create an app that provides an accessible and streamlined pet adoption process users to enjoy. The app also provides all the necessary features conducted during the research phase. The features included are an easier adoption process, a social category where users can view posts regarding their pets, and keep track of their adoption process.
Design Goals
The user research process also helped us define our focus areas for the featured design.
Efficient
Social
Manage
Petto focuses on empowering the users to be have a streamlined and efficient pet adoption process
Users have a social community space to read and share pet insights
Users have a dedicated space to view and track adoption process
THE USERS OF Petto
We created two user personas that focus on two different lifestyles. The first user persona, Nora, is an experienced pet owner looking to adopt another pet for their existing pet at home. The second user, Drew, is a first-time pet owner looking to find a pet suitable for their lifestyle. Both users are interested in adopting a pet but have vastly different goals and lifestyles.
Students
Teachers monitor, manage, and create various voice and chat channels where all the student's courses info show up
Some universities partner with student associations in creating an accessible and open Discord community server
Teacher
Universities Students
From elementary to high school, students are utilizing discord as a means of communications and social platform.
User Flow chart
🎨Design Process
In the early stages of the design process, both my partner and I set out to design a user flow chart that illustrates the user navigating from the onboarding stage to various pages within the app. This helped us gain a better understanding of the overall scope of the project and what features to include if needed.
🎨Design Process
Low fidelity sketches
Afterwards, I quickly sketched out some low-fidelity sketches. The goal in the sketching process was to come up with rapid designs and see which one would be most viable to implement in the final design.
Low FIDELITY WIREFRAMES
🎨DESIGN Process
1. Onboarding process
2. pet adoption process
3. community page
2. pet adoption process
3. community page
After coming up with the low fidelity sketches, I created a series of low-fidelity wireframes that can be quickly tested and refined over time. For the low fidelity prototypes, I explored a comprehensive set of user experience flows that would be split into three stages:
✏️Testing & Iterations
Iterating and testing
through unbiased and
lean design
through unbiased and
lean design
At this stage, I find it critical to involve the
user within the design process. Based on various feedback from 6 other peers + mentor feedback, I continually iterated our designs over the span of 2 weeks. This resulted in 4 major improvements.
user within the design process. Based on various feedback from 6 other peers + mentor feedback, I continually iterated our designs over the span of 2 weeks. This resulted in 4 major improvements.
✏️Testing & Iterations
4 major improvements
in my design
in my design
After receiving various user feedback and mentor feedback, the following weeks consisted of updating and addressing any user concerns on the current mid-fi wireframes.
Students
Teachers monitor, manage, and create various voice and chat channels where all the student's courses info show up
Some universities partner with student associations in creating an accessible and open Discord community server
Teacher
Universities Students
From elementary to high school, students are utilizing discord as a means of communications and social platform.
1. Updating NAV Icon contrast
Based on user feedback and mentor feedback,
users found themselves having trouble seeing the
nav icons. This also poses an accessibility issue in accordance to the WCAG contrast compliance standards.
The new icons have updated font colours that are more visible and passes the WCAG AA contrast standards.
users found themselves having trouble seeing the
nav icons. This also poses an accessibility issue in accordance to the WCAG contrast compliance standards.
The new icons have updated font colours that are more visible and passes the WCAG AA contrast standards.
2. CLEARER TOP LEVEL
NAVIGATION
NAVIGATION
In the community page, users can click and view between subcategories, as well as, change the pet section they are currently viewing. However, upon testing, users were not sure how the buttons function in relation to one another.
To solve this issue, the top nav bar was redesigned to utilize familiar design patterns and reduce complexities for the user.
To solve this issue, the top nav bar was redesigned to utilize familiar design patterns and reduce complexities for the user.
3. clear Call to action
During the sign up phase, users overlooked the sign up button and instead proceeded to sign in. Upon further interview questions, we found out that the issues stems from the button placement and the lack of visual clarity.
The updated login page now has a clear visual CTA (call to action) and follows the same visual pattern as seen in all buttons within the app.
The updated login page now has a clear visual CTA (call to action) and follows the same visual pattern as seen in all buttons within the app.
4. HELPFUL TOOL TIP
During the initial adoption process test, users were not sure how to navigate their way to the adoption process.
An adoption tip was later added within the homepage to help users better understand how the adoption process works.
An adoption tip was later added within the homepage to help users better understand how the adoption process works.
The Final Product
The Style Guide
CONCLUSION + REFLECTIONS
1. What I'd do differently next time: Looking back on this project, if I had more time, I would like to explore more ways to improve and increase pet shelter engagements. Potentially have a feature that allows user’s to share their own adoption posts. Conduct additional user surveys whenever a pet owner has completed an adoption application. As well as, better adhering to WCAG standards for accessibility.
2. Challenges I've faced: Working on this project has been challenging but also very rewarding. Coming into this project, I had to make some design compromises. Part of being in a group project is to acknowledge and listen to everybody's ideas. Sometimes my partner and I had clashing design ideas but in the end we presented our ideas and reasoning and compromised together.
3. What I've learned. This project has taught me the important of remembering that with every design iterations, the design itself should still align with the user needs. It has also taught me the important of work accountability, as this was a group project, with no deliverables being marked for grades, this was basically up to us to complete whenever we liked. Luckily, we were both on the same page and aligned ourselves to work through the project in a sprint fashion.
