top of page
Desktop - 6-2.png

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.

Group 1072.png

My Role

  • UX Research

  • UI/UX Designer

  • Design Strategy

Vector.png

Duration

  • 3 weeks

Vector-1.png

Design Tools

  • Figma

  • Adobe Illustrator 

  • Adobe Photoshop

  • Maze

mockups.png

DESIGN PROCESS

process-1.png

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.

0_bmgal2.webp

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.

Group 1150.png

Users have pets they keep at home

Understand their needs and preferences when purchasing pet supplies

Group 1152.png

Pet Enthusiast Community Organizers

Learn how they organize pet events and gatherings

Group 1180.png

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 community.png
adoption.png
pet social media.png

Pet Social Media

Pet Adoption

Pet Community

Travel

Pet E-commerce Marketplace

Platform Credibility

e-commerce.png
platform credibility.png
travel.png
others.png

Others

DEFINE

DEFINE USER NEED STATEMENTS 

PERSONA

Carol persona.png
Ella persona.png

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.

problem 1.png
problem 2.png
problem 3.png
problem 4.png

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

Customer Journey-1.png

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.

Competitor analysis.png

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.

User flow-2.png

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.

meetup detail.png
meetup account.png
account.png
home.png
meetup.png
work flow.png

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

logo.png
logo 2.png

Font

font.png

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

navigation.png

Button

Icons

Rectangle 603.png
Group 1136.png

TEST & PROTOTYPE

REFINING THE DESIGN

Group 1164.png

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. 

Frame 1021.png
Home Page
iPhone 13 Mockup.png

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

Frame 1022.png
Event Description
iPhone 13 Mockup-2.png

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. 

Frame 1019.png
Account Page
iPhone 13 Mockup-3.png

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.

iPhone 12 Mockup-1.png
iPhone 12 Mockup.png
iPhone 13 Mockup-1.png
iPhone 13 Mockup.png
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
iphone copy-2.png
iphone copy-3.png

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.

iphone copy 2.png
iphone copy.png
iPhone 13 Mockup-3.png
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

iphone copy-6.png
iPhone 13 Mockup-5.png
iPhone 13 Mockup-4.png
iPhone 13 Mockup-6.png
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.

bottom of page