Petco
Petco
UI Design
UI Design
.
.
Web Design
Web Design
.
.
Responsive
Responsive
Role
Role
UX Research, UI Design, Design System, Motion Graphics
UX Research, UI Design, Design System, Motion Graphics
Team
Team
Yoonseo Jeong
Yoonseo Jeong
Duration
Duration
2 months (8 Weeks)
2 months (8 Weeks)
Tools
Tools
Figma, Miro, Adobe CC
Figma, Miro, Adobe CC
Design Process
Design Process
01
01
Research
Research
Brand Research
Competitor Analysis
User Interview
Website Analysis
Brand Research
Competitor Analysis
User Interview
Website Analysis
02
02
Design
Design
Design Statement
Design Principle
UI Design
Design Statement
Design Principle
UI Design
03
03
Reflection
Reflection
Key Takeaways
Future Improvements
Key Takeaways
Future Improvements
Pet parents struggle to understand whether a product fits their pet’s needs because key information is buried in dense text and low visual hierarchy. The website’s plain layout and static promotional areas fail to capture attention or guide exploration, causing users to leave before discovering relevant details.
As a result, choosing the right product becomes overwhelming, especially for users who need to compare multiple items.
Pet parents struggle to understand whether a product fits their pet’s needs because key information is buried in dense text and low visual hierarchy. The website’s plain layout and static promotional areas fail to capture attention or guide exploration, causing users to leave before discovering relevant details.
As a result, choosing the right product becomes overwhelming, especially for users who need to compare multiple items.
It is difficult for pet parents to determine if a product can meet their pet's specific needs, size, or sensitivities due to dense product information.
It is difficult for pet parents to determine if a product can meet their pet's specific needs, size, or sensitivities due to dense product information.
Problem
Problem
Provided users with clarity through personalized features and visual storytelling to enhance user experience.
Provided users with clarity through personalized features and visual storytelling to enhance user experience.
Solution
Solution
Key feature 01
Key feature 01
Static promo into an interactive design
Static promo into an interactive design
01
01
What I noticed
What I noticed
Users described the website is plain and boring.
Users described the website is plain and boring.
02
02
Validation
Validation
User testing showed almost no interaction with the banner area and the ads.
User testing showed almost no interaction with the banner area and the ads.
03
03
Solution & Goal
Solution & Goal
Transformed the
static banner into an interactive card to keeps users exploring.
Transformed the
static banner into an interactive card to keeps users exploring.
04
04
Outcome
Outcome
Testing showed higher interaction rates within the promo section.
Testing showed higher interaction rates within the promo section.
Key feature 02
Key feature 02
Personalized Pet Profile
Personalized Pet Profile
Paste your design here
Paste your design here
Home / Dog / Dog Food
Home / Dog / Dog Food
Ship to 10003
Ship to 10003
Free Shipping on $35+
Free Shipping on $35+
Delivery
Delivery
Get it 12pm
Get it 12pm
Shipping
Shipping
Get it Saturday
Get it Saturday
Pick Up
Pick Up
Ready in 1 hr
Ready in 1 hr
Add To Cart
Add To Cart
Ollie Fresh Beef Dish
Ollie Fresh Beef Dish
$49.99
$49.99
(408)
(408)
1 LB
1 LB
5 LBS
5 LBS
Step 3 of 5
Step 3 of 5
Select breed
Select breed
Shih Tzu
Shih Tzu
Search for breed
Search for breed
Labrador Retriever
Labrador Retriever
Golden Retriever
Golden Retriever
French Bulldog
French Bulldog
Maltese
Maltese
Shih Tzu
Shih Tzu
Continue
Continue
German Shepherd
German Shepherd
Selected:
Selected:
German Shepherd
German Shepherd
Choose Breed
Choose Breed
A clear active state and checkmark help users choose the correct breed, while a confirmation bar reinforces accuracy before moving on.
A clear active state and checkmark help users choose the correct breed, while a confirmation bar reinforces accuracy before moving on.
Select Pet Type
Select Pet Type
Uses photos and simple illustrations so users can identify instantly without reading, reducing effort from the first step.
Uses photos and simple illustrations so users can identify instantly without reading, reducing effort from the first step.
Allergies & Care Needs
Allergies & Care Needs
Pre-selecting allergies and sensitivities builds trust and filters unsafe products later, leading to safer recommendations.
Pre-selecting allergies and sensitivities builds trust and filters unsafe products later, leading to safer recommendations.
Add Basic Info
Add Basic Info
Flexible inputs for name, age, and weight let users type or tap, making the flow fast and minimizing errors.
Flexible inputs for name, age, and weight let users type or tap, making the flow fast and minimizing errors.
Upload a Photo
Upload a Photo
Photo upload supports size accuracy and product visualization, helping reduce mismatched purchases and unnecessary returns.
Photo upload supports size accuracy and product visualization, helping reduce mismatched purchases and unnecessary returns.
Tips for a great photo
Tips for a great photo
A front-facing photo helps us create the most accurate 360° model.
A front-facing photo helps us create the most accurate 360° model.
All Set!
All Set!
Bella's profile is ready.
Let's find the perfect products for them!
Bella's profile is ready.
Let's find the perfect products for them!
Personalized recommendations
Personalized recommendations
We'll suggest products perfect for Cookie
We'll suggest products perfect for Cookie
Health & wellness tracking
Health & wellness tracking
Keep track of important dates and milestones
Keep track of important dates and milestones
Cookie
Cookie
German Shepherd
German Shepherd
2 years
2 years
60 lbs
60 lbs
Dog
Dog
Special care: Chicken, Dental Health
Special care: Chicken, Dental Health
01
01
What I noticed
What I noticed
Users struggled to choose the right product for their pet.
Users struggled to choose the right product for their pet.
02
02
Validation
Validation
The website lacked recommendations tailored to each pet’s unique needs.
The website lacked recommendations tailored to each pet’s unique needs.
03
03
Solution & Goal
Solution & Goal
A 5-step pet profile flow delivered personalized product suggestions.
A 5-step pet profile flow delivered personalized product suggestions.
04
04
Outcome
Outcome
Testing showed users trusted the recommendations more and spent less time searching.
Testing showed users trusted the recommendations more and spent less time searching.
Key feature 03
Key feature 03
Visual Storytelling
Visual Storytelling
01
01
What I noticed
What I noticed
Key ingredient information was buried in text, making comparison difficult for users.
Key ingredient information was buried in text, making comparison difficult for users.
02
02
Validation
Validation
Long text lists caused confusion, especially for users sensitive to ingredients.
Long text lists caused confusion, especially for users sensitive to ingredients.
03
03
Solution & Goal
Solution & Goal
“Ingredient Spotlight” to make complex information easier to scan and understand.
“Ingredient Spotlight” to make complex information easier to scan and understand.
04
04
Outcome
Outcome
Testing showed users could scan ingredients at a glance and make purchase decisions more quickly.
Testing showed users could scan ingredients at a glance and make purchase decisions more quickly.
Details Breakdown
Details Breakdown
Transforms text-heavy product details into clear, visual modules so users can scan details, descriptions, benefits and ingredients at a glance.
Transforms text-heavy product details into clear, visual modules so users can scan details, descriptions, benefits and ingredients at a glance.
Petco is a leading pet health & wellness company with 1,500+ locations and 100+ in-store veterinary hospitals. Their purpose is to improve the lives of pets, pet parents and Petco partners.
Petco is a leading pet health & wellness company with 1,500+ locations and 100+ in-store veterinary hospitals. Their purpose is to improve the lives of pets, pet parents and Petco partners.
Healthier Pets. Happier People. Better World.
Healthier Pets. Happier People. Better World.
Brand Archetype
Brand Archetype
Target Audience
Target Audience
Pet Parents (25–34)
Pet Parents (25–34)
Value clarity, convenience, and trustworthy product information.
Value clarity, convenience, and trustworthy product information.
about
about
60%
60%
40%
40%
Caregiver
Caregiver
Focuses on nurturing, trust, and emotional connection between pets and owners.
Focuses on nurturing, trust, and emotional connection between pets and owners.
Everyman
Everyman
Friendly, accessible, community-driven brand that feels familiar and welcoming.
Friendly, accessible, community-driven brand that feels familiar and welcoming.
design statement
design statement
A clear and interactive redesign that elevates Petco’s product detail page through bold visuals, intuitive structure, and playful brand expression.
A clear and interactive redesign that elevates Petco’s product detail page through bold visuals, intuitive structure, and playful brand expression.
design system
design system
TEXT STYLES NAME
TEXT STYLES NAME
DISPLAY M
DISPLAY M
HEADLINE L
HEADLINE L
HEADLINE M
HEADLINE M
BODY L
BODY L
BODY M
BODY M
BODY S
BODY S
BUTTON
BUTTON
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
FAMILY
FAMILY
WEIGHT
WEIGHT
SIZE
SIZE
LINE-HEIGHT
LINE-HEIGHT
SPACING
SPACING
PREVIEW
PREVIEW
display
display
text
text
text
text
text
text
text
text
text
text
text
text
bold
bold
semibold
semibold
semibold
semibold
regular
regular
regular
regular
medium
medium
medium
medium
30
30
22
22
20
20
18
18
16
16
14
14
22
22
38
38
30
30
25
25
22
22
20
20
18
18
27
27
0
0
0
0
0
0
0
0
0
0
0
0
0
0
TEXT STYLES NAME
TEXT STYLES NAME
DISPLAY L
DISPLAY L
Display M
Display M
HEADLINE L
HEADLINE L
HEADLINE M
HEADLINE M
BODY XL
BODY XL
BODY L
BODY L
BODY M
BODY M
BODY S
BODY S
BUTTON
BUTTON
LINK
LINK
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
FAMILY
FAMILY
WEIGHT
WEIGHT
SIZE
SIZE
LINE-HEIGHT
LINE-HEIGHT
SPACING
SPACING
PREVIEW
PREVIEW
display
display
display
display
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
semibold
semibold
bold
bold
semibold
semibold
semibold
semibold
medium
medium
semibold
semibold
regular
regular
regular
regular
semibold
semibold
bold
bold
50
50
45
45
35
35
26
26
24
24
22
22
20
20
19
19
30
30
24
24
60
60
53
53
43
43
32
32
30
30
27
27
24
24
23
23
37
37
29
29
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Proxima Nova
Proxima Nova
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
12345567890@#$%^&*(!?
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
12345567890@#$%^&*(!?
Aa
Aa
Typography
Typography
Iconography
Iconography
Primary
Primary
#206AFF
#206AFF
#FF6A2E
#FF6A2E
#FFCC34
#FFCC34
Secondary
Secondary
#001952
#001952
#FDF1E4
#FDF1E4
#FFFFFF
#FFFFFF
Primary
Primary
#ACACAC
#ACACAC
#BEBEBE
#BEBEBE
#C4C4C4
#C4C4C4
#E4E4E4
#E4E4E4
#EEEEEE
#EEEEEE
Color System
Color System
REVIEWS
REVIEWS
4.8
4.8
Select a row below to filter reviews.
Select a row below to filter reviews.
(408)
(408)
315
315
55
55
9
9
6
6
2
2
5 stars
5 stars
4 stars
4 stars
3 stars
3 stars
2 stars
2 stars
1 stars
1 stars
1 LB
1 LB
5 LBS
5 LBS
Ollie Fresh Beef Dish
Ollie Fresh Beef Dish
$49.99
$49.99
(4.8)
(4.8)
Delivery
Delivery
Get it 12pm
Get it 12pm
Pick Up
Pick Up
Ready in 1 hr
Ready in 1 hr
Select Size
Select Size
Premium Dog Food
Premium Dog Food
Shipping
Shipping
Get it Saturday
Get it Saturday
Card
Card
Sweet Potato
Sweet Potato
An excellent slow-burning carbohydrate and dietary fiber source, sweet potatoes are packed with nutrients like antioxidants and Vitamins A and C.
An excellent slow-burning carbohydrate and dietary fiber source, sweet potatoes are packed with nutrients like antioxidants and Vitamins A and C.
Day 1-2
Day 1-2
Scoop a small amount Ollie into your pup’s current food.
Scoop a small amount Ollie into your pup’s current food.
Shop Now
Shop Now
Crumps’ Mouth Care
Dental Sticks
Crumps’ Mouth Care
Dental Sticks
$13.99
$13.99
(203)
(203)
So great!
So great!
Eddie
Eddie
3 days ago
3 days ago
My dog eagerly devoured this food. The combination of beef and sweet potato seems to be a hit, offering a flavor that keeps him excited for mealtime.
My dog eagerly devoured this food. The combination of beef and sweet potato seems to be a hit, offering a flavor that keeps him excited for mealtime.
Cookie
Cookie
German Shepherd
German Shepherd
2 years
2 years
60 lbs
60 lbs
Dog
Dog
Special care: Chicken, Dental Health
Special care: Chicken, Dental Health
Grid
Grid
Key Takeaways and Future Improvements
Key Takeaways and Future Improvements
reflection
reflection
🌟
🌟
🌟
🌟
🌟
🌟
The 'Why' is Powerful: Communicating the 'Why' behind the solutions are important based on the user quotes.
The 'Why' is Powerful: Communicating the 'Why' behind the solutions are important based on the user quotes.
Motion as Function: Micro interactions are powerful tools for guiding user attention and enhancing ease-of-use in a minimal design.
Motion as Function: Micro interactions are powerful tools for guiding user attention and enhancing ease-of-use in a minimal design.
Measure Business Impact: I would like to conduct testing on the 'Personalized Pet Profile' to quantify the impact.
Measure Business Impact: I would like to conduct testing on the 'Personalized Pet Profile' to quantify the impact.
WOOF! WOOF! WOOF!
WOOF! WOOF! WOOF!
WOOF! WOOF!
WOOF! WOOF! WOOF!
WOOF! WOOF! WOOF!
WOOF! WOOF! WOOF!
WOOF! WOOF! WOOF!
WOOF! WOOF!
WOOF! WOOF! WOOF!
WOOF! WOOF! WOOF!
Resume
Resume
@ 2025 Yoonseo Jeong
@ 2025 Yoonseo Jeong