
Creating a pet e-commerce platform with meet-up features
PROJECT OVERVIEW
Petsona is an all-in-one platform for pet owners. It combines a pet e-commerce marketplace with a social media platform that enables owners to host and attend in-person and virtual pet-related events and activities. My goal is to create a warm and accessible community for pets and owners, providing everything they need for a full pet-centric lifestyle.

My Role
-
UX Research
-
UI/UX Designer
-
Design Strategy

Duration
-
3 weeks

Design Tools
-
Figma
-
Adobe Illustrator
-
Adobe Photoshop
-
Maze

DESIGN PROCESS

RESEARCH AND EMPATHIZING PHASE
UNDERSTAND USERS
USER OBSERVATION
I attended the pet event with my friend which was organized by another owner online to observe owners' behaviors and understand the purpose and benefit of the event.
-
Building relationships with like-minded individuals and making new friends in the pet community.
-
Learning from other pet owners and sharing knowledge about pet care and behavior.
-
Discovering new products and services that can enhance pet health and wellness.
-
Having fun and enjoying quality time with pets and other pet owners.

Image: ManyPets
THE CHALLENGE
Pet owners often face challenges when trying to organize or attend pet events in public places. This includes
-
Difficulty finding pet-friendly locations and relevant and interesting pet meetups in their area.
-
Difficulty coordinating schedules with other pet owners for meetups.
-
Concerns about the compatibility and behavior of their pets with other animals at the meetup
To Address These Challenges, Pet Owners Using The App May Need The Following Features
A user-friendly interface that makes it easy to find and join relevant pet meetups in their area.
-
A search function that allows users to search for pet meetups by location, date, and type of pet.


Features that allow pet owners to communicate with each other before, during, and after meetups, such as a chat or messaging system.
-
A chat or messaging system that enables pet owners to communicate with each other before, during, and after meetups.
-
Group messaging capabilities that allow organizers to send updates and announcements to all attendees.
-
The option to share photos and videos within the messaging system.
Integration with other useful features such as
e-commerce and social media to provide a comprehensive platform for pet owners.
-
A marketplace for pet-related products and services that allows users to buy and sell items.
-
The ability to create and share pet-related content, such as photos, videos, and blog posts.
-
The ability to book pet-related services such as grooming, pet-sitting, and training through the app.

USER INTERVIEW
I recruited my target users from the observation and conducted interviews to understand what inconveniences and wonderful experiences their pets have brought to their lives, and what they need to improve the quality of life with pets. Through the feedback in the research, to develop an app to satisfy their needs.

Users have pets they keep at home
Understand their needs and preferences when purchasing pet supplies

Pet Enthusiast Community Organizers
Learn how they organize pet events and gatherings

Potential Users
Discuss their expectations and concerns regarding such an application
The insights gathered from the interviews were organized and grouped into an affinity map as displayed below. I grouped them based on the users' objectives and the features of the platform.



Pet Social Media
Pet Adoption
Pet Community
Travel
Pet E-commerce Marketplace
Platform Credibility




Others
DEFINE
DEFINE USER NEED STATEMENTS
PERSONA


HOW MIGHT WE
The HMW (How Might We) questions were created based on thorough research. By synthesizing the research findings, I identified the primary challenge: how to effectively integrate e-commerce and social networking to foster strong connections among users on the platform.




USER JOURNEY MAP
I used Carol's goal to create a user’s journey to get a visual sense of how she would interact with the product from start to finish and how she feels about each step of the process so that I can then identify design and innovation opportunities.

Carol’s Journey Map

HEURISTIC ANALYSIS OF COMPETITORS
I compared 2 similar e-commerce applications and 1 social media platform which is Meetup. These companies offer similar solutions that I defined when coming up with an idea for my project.

IDEATE
EXPLORING THE POSSIBILITIES
SITEMAP
I started drafting information architecture and exploring site navigation. According to user needs and behaviors, I labeled some categories and created a diagram that will show all of the different screens within the app and visualize how they are all connected.

USER FLOW
I created a specific route for a user how to navigate through the app to identify the essential path and achieve joining an event.


DESIGN
STARTING THE DESIGN
SKETCHING
According to the user flow, I started drafting the basic ideas in the paper wireframes and transfer them to the digital wireframes in Figma to implement the usability testing findings.






LOW-FIDELITY WIREFRAMES
I transferred the sketches to digital wireframes and created the wireflow. It visualizes the user flow directly and lets me know how many multiple states of the same screen when I create it, such as when there are numerous actions a user can take while on a screen that won’t necessarily take them to a new screen.
UI STYLE GUIDE
I decided to choose the green and orange combo to be the style colors. Orange is the color of social communication and optimism, green is the color of balance and growth. They are both universally associated with nature and can represent a warm and friendly atmosphere. For the font, I’ve chosen Roboto. The forms are largely geometric and it features friendly and open curves.
Logo


Font

Primary Colors
Secondary and Accent Colors
Dark Teal
#014347
Knockout
Orange
#E0713B
Fairfax Grey
#DCE7EA
Dawn Pink
#F1E9E5
Grays
Charcoal
#1C1C1C
Dim Gray
#747474
Silver
#F2F2F2
Bottom Navigation

Button


Icons








TEST & PROTOTYPE
REFINING THE DESIGN

INITIAL USABILITY TESTING
I conducted two rounds of usability testing. The first round of testing was on the initial low-fidelity wireframe design to ensure user flow, layout and features are intuitive and easy to use.
I set up moderated remote usability testing in Maze and conducted it over Google Meet to evaluate the digital wireframe design, and filter.
THE 1st ROUND OF FINDINGS & DESIGN ITERATIONS
Before
-
There is no pet category on the home page to help users search
After
-
Add a section of the pet category and users will have one more option to search for what they need.

Home Page

Before
-
In the search results, users can not eliminate the outcomes that they don't like.
After
-
Add the button of dislike to remove unnecessary results and improve AI data system filtering the outcomes matching users' needs

Meet Up Page

Before
-
The pet information is not complete, and the vaccination status of the pet is unknown
-
Users can not eliminate the outcomes that they don't like.
After
-
Improve pet information to provide complete details to users
-
Add the button of dislike to improve AI data system filtering the outcomes matching users' needs

Event Description

Before
-
There is a lack of promoted section to inspire customers to purchase and back to the app
After
-
Increase promotions and deals to keep customers.

Account Page

THE 2nd ROUND OF USABILITY TESTING
The participants who did the second round of usability testing were those who attended the pet event I went to for user observation. These participants are the users who will use the user flow of pet meet-up directly. The second usability testing focuses on the user flow of pet meet-up to validate if the path would work when they use it for the pet event as they did last time and if the function I created is what they need.
Before
-
In the initial Profile edit, it was confusing which main profile was between the owner and the pet.
-
There was no extra option for owners with more than one pet in the pet profile.
After
-
The pet profile is under the owner profile, and there is option to add more than one pet in the profile.




Edit Profile
Before
-
The initial meet-up section was more like a one-on-one matched pairing. The users wanted to be more like a group or event organization and show a description of the date and time.
After
-
The iterated mockup has different sections on the meet-up page, it is updated to event attendance from one-on-one matched pairing.
-
It has more details of description and also features for saving and sharing

Meet Up Page


Before
-
There was no date and location on the event detail page.
-
It didn't show how many participants had attended the event.
-
The button of like also couldn't represent that the user had joined the event.
After
-
The iterated event detail page provides the date, location, map, and participants, it helps users know the event and triggers them to attend the event.
-
The page can be shared with friends on other platforms and saved to the account.
-
Once click join, it will pop up the screen to let users know it has been saved in the account calendar automatically.



Event Detail Page
Before
-
The initial account page only showed one pet but there was no owner information.
-
It was no account features as a social media
After
-
In the iterated design, I separate the account page and account setting on different pages and make a pet account under owner's.
-
It shows users' followers and following to have features of social media.
-
Add user's calendar to save any events and reservations to remind users




Account Page
OUTCOME
IMPRESSIVE METRICS
The pet app's prototype showed promising results, with 90% of users surveyed reporting high satisfaction with the
e-commerce and social media features. The all-in-one platform improved user experience and engagement, providing a convenient space for pet owners to connect and share experiences, while also increasing sales potential.
TAKEAWAYS
I wish this app could provide a more friendly living environment for animals and pet owners in society so that having pets is the same as ordinary daily life.
Understand your users
-
The survey of the app is mainly based on my friends who have pets. They all hope that their lives with pets will be more convenient. The investigation is not only for owners, also needs to understand pet businesses. The social platform can be operated continuously if it provides each other's needs.
Find solutions based on problem statements
-
Evaluate solutions by checking if they provide appropriate answers to HMW questions.
