Purchase Flow Design
Purchase Flow Design
4X
4X
CONVERSION RATE
CONVERSION RATE
40X
40X
MONTHLY SALES
MONTHLY SALES
*Metrics have been rounded up.
*Metrics have been rounded up.
My contribution
My contribution
I was the only UIUX designer and finish the whole website from 0-1 under the supervision of my design lead - Qian
Participate in:
Branding
Product Management
Graphic Design
Lead:
Desktop/Mobile Design
Design System
User Research
Usability Test & Iteration
Collaborate with:
Marketing Team
Engineers
Copy Writer
Participate in:
Branding
Product Management
Graphic Design
THE BUSINESS PROBLEM
Low conversion rates
for products that “lack of cost-effectiveness
[Low Conversion Rate]
Less than 1% of traffic actually purchase products from Furrytail’s website
[Low Sales]
The whole year sales are very low with an ROI less than 1
Furrytail’s website before revamp
THE BUSINESS PROBLEM
Low conversion rates for products that “lack of cost-effectiveness
Furrytail’s website before revamp
[Low Conversion Rate]
Less than 1% of traffic actually purchase products from Furrytail’s website
[Low sales]
The whole year sales are very low with an ROI less than 1
THE BUSINESS RESULT
400% Increase in conversion rates
[400% Increase in Conversion Rate]
The conversion rate doubled in the first month and increased by 400% after 4 months compared to the same period last year.
[4000% Increase in sales]
Monthly sales increased 500% in the first month and surged 4000% after 4 months compared to the same period last year.
Website Launch
Website Launch
Furrytail’s conversion rate & sales increase (Compared to last year same time)
Shopify data
THE BUSINESS RESULT
400% Increase in conversion rates
[400% Increase in Conversion Rate]
The conversion rate doubled in the first month and increased by 400% after 4 months compared to the same period last year.
[4000% Increase in sales]
Monthly sales increased 500% in the first month and surged 4000% after 4 months compared to the same period last year.
Website Launch
Furrytail’s conversion rate & sales increase
(Compared to last year same time)
Here is How...
I dived deep to fuel conversion while cracking user puzzles.
Here is How...
I dived deep to fuel conversion while cracking
user puzzles.
USER PROBLEM
“I’m not sure if my “introverted” and “needy” cat will like the products or be scared of it. ”
Homepage
Cannot identify Furrytail’s brand advantages and build trust
Collection Page
Struggle to find their needed products and compare similar products in the same category
Product Detail Page
Worry about whether their “needy” “introverted” cats like this product or not.
USER PROBLEM
Not sure if their cats will like the product or not
Homepage
Cannot identify Furrytai’s brand advantages and build trust
Collection Page
Struggle to find their needed products and compare similar products in the same category
Product Detail Page
Worry about whether their “needy” “introverted” cats like this product or not.
“I’m not sure if my “introverted” and “needy” cat will like the products or be scared of it. ”
OPPORTUNITIES
Identify opportunities via How Users View The Websites
Page:
Attention:
Behaviors
Social Media
Homepage
Be attracted by cute cats’ images
Collection Page
Try to compare & find a product that their cats will love.
Product Detail Page
Check if cats are engaging with the products
1.
Engaging cat images
will always attract users.
2.
To determine if their cat will like the product,
users will keep checking if cats
sharing similar personalities
will engage with the product or not
OPPORTUNITIES
1.
Engaging cats’ images
will always attract users
2.
To determine if their cat will like the product,
users will keep checking if the engaging cats
share similar personalities with their cats
Page:
Attention:
Behaviors
Social Media
Homepage
Be attracted by cute cats’ images
Collection Page
Try to find and compare
“cat bed” to see which is more suitable for their cats
Product Detail Page
Check if cats are engaging with the products
IDEATION
“Cat Reviews” help users find out if their cats will like the products or not.
Cat personality
Cat personality
Exam
if my cats have the same personality with this cat
Build brand awareness that we care about cats’ personality
Build brand awareness that we care about cats’ personality
Skunk
outgoing
guard
“Love a little privacy here”
Product 1
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Shop Now
A cat is interacting
with the product
Be attracted
by cats engaging with the products
Attract users to stay
Content
Users’ Reaction
Business Goal
Cats’ “Review” about the product
Convince
that my cats will like the product
Introduce product features from the perspective of cats
Product information
View
objective information to make rational decisions.
Introduce the product’s objective features and price
Shop Now Button
Click
to enter product detail page
Lead users to start shopping
DESIGN IDEATION
Cat reviews help users find out
if their cats will like the products
FUNNEL
Put "cat reviews" into the Conversion Funnel
Free Shipping Site Wide & 20% OFF Selected Products : FURRYTAIL20
Toilet Training
Skunk
crabby
OCD
“Love a little privacy.”
Skunk
crabby
OCD
“Love a little privacy.”
Product 1
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Shop Now
Fun Play
Skunk
crabby
OCD
“Love a little privacy.”
Skunk
crabby
OCD
“Love a little privacy.”
Purrfect Pedestal
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Shop Now
Explore our Rest & Play collection
The best thing in life is to be chosen and loved by a cat
Our products are cat-approved
Solutions for cats and humans
Building a better life for all cats
Trusted and loved by 123,456+ cats and their humans
My boss love it!
“Lorem ipsum dolor sit amet consectetur. Et pellentesque fames scelerisque sodales proin. “
Shop Power Chair
Meet Our Feline Focus Group
All products received the coveted “tail up with a kink” from our in-house feline focus group.
Luna
Breed name, age
guard
outgoing
Luna
Breed name, age
guard
outgoing
Leo
Breed name, age
guard
outgoing
Enjoy 30% off site wide -->
Toilet Training
FurryTail’s solutions make the best out of a stinky situation.
Skunk
crabby
bossy
“Love a little privacy. Enjoy the quite sound
Self-cleaning Bathroom
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Warranty:
1-year
3-year
Add to Cart
Skunk
crabby
OCD
“Love a little privacy. Enjoy the quite sound”
Open Cat Litter Box
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Color: Green
Add to Cart
Shop for Other Collections
Toilet Training
Rest & Play
Travel & More
Enjoy 30% off site wide -->
Tested by Our Feline Focus Group
Skunk
crabby
OCD
“Love a little privacy.”
Skunk
crabby
OCD
“Love a little privacy.”
Designed for Human, too
ldolor sit amet
ldolor sit amet
ldolor sit amet
ldolor sit amet
Feature Highlight #1
Lorem ipsum dolor sit amet consectetur. Lorem suspendisse amet sem lectus luctus pretium. Amet diam cum purus a ac dis interdum.
Feature Highlight #1
Lorem ipsum dolor sit amet consectetur. Lorem suspendisse amet sem lectus luctus pretium. Amet diam cum purus a ac dis interdum.
Consideration
Collection Page
Awareness
Homepage
Conversion
Product Detail Page
THE DESIGN
Put “Cat Reviews” into the conversion funnel
Consideration
Collection Page
Awareness
Homepage
Conversion
Product Detail Page
FINAL DESIGN: HOMEPAGE
Attract users and build brand awareness
Research Insights:
Users will be attracted by cute cats
Research Insights:
Users will check if cats are engaged with products
Research Insights:
Users will be convinced if cats like theirs engage with the product.
Research Insights:
Users assess if their cat will like the product based on other owners' reactions.
Research Insights:
Users care if the brand truly owns cats, loves them, and can relate to them.
Show our
branding message
DESIGN: HOMEPAGE
Attract users and build brand awareness
Research Insights:
Users will be attracted by cut cats
Research Insights:
Users will check if cats are engaged with products
Research Insights:
Users will be convinced if cats like theirs engage with the product.
Research Insights:
Users care if the brand truly owns cats, loves them, and can relate to them.
Aware of the
branding message
Research Insights:
Users assess if their cat will like the product based on other owners' reactions.
HOW I GOT THERE
Home page product cards iteration
Before:
1 collection + N products
Toilet Training
Skunk
guard
outgoing
Product 1
$668.88
Product 2
$668.88
Collection 1
Skunk
guard
outgoing
Product 1
$668.88
Product 2
$668.88
Exceeds
1 screen length
[Engineer]:
Potential technique issues about assets management
[Content team]:
Hard to write “collection -focused” cat review
[Users]:
Not align with users’ expectation of read “products” instead of “collections”
Information Efficiency: Exceeds one screen length for 1 collection
After:
1 Collection + 1 Products + N Cat Reviews
Collection 1
Skunk
crabby
OCD
“Love a little privacy.”
Skunk
crabby
OCD
“Love a little privacy.”
Product 1
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Shop Now
Collection 2
Skunk
crabby
OCD
“Love a little privacy.”
Skunk
crabby
OCD
“Love a little privacy.”
Purrfect Pedestal
Easy in & out for chubby, short-legged and senior cats
$668.88
$668.88
Shop Now
Displays 2 collections on 1 screen.
[Engineers]:
The image will be the stored on shopify and being product oriented
[Content team]:
Write a “Product-focused” cat review
[Users]:
I learn about how different cats love the products
Information Efficiency: Can view 2 collections on one screen.
HOW I GOT THERE
Home Page Product Cards Iteration
Before:
Show 1 Collection + N Products
Exceeds 1 screen length
[Engineer]: Potential technique issues about assets management
[Content team]: Hard to write “collection -focused” cat review
[Users]: Not align with users’ expectation of read “products” instead of “collections”
Information Efficiency: Exceeds one screen length for 1 collection
After:
Show 1 Collection + 1 Products
Displays 2 collections on 1 screen.
[Engineers]: The image will be the stored on shopify and being product oriented
[Content team]: Write a “Product-focused” cat review
[Users]: I learn about how different cats love the products
Information Efficiency: Can view 2 collections on one screen.
DESIGN: COLLECTION PAGE
Engage users to easily pick one product under the same collection
Quick link to the product detail page.
Allow users to view the product while seeing how different cat personalities adapt to it.
Allow users to navigate to other collections
DESIGN: COLLECTION PAGE
Engage users to easily pick one product under the same collection
HOW I GOT THERE
Collection Page Product Cards Iteration
Before:
Show 1 Collection + N Products
Exceeds 1 screen length
[Users]: Cannot see “Cat Review” & “Add to Cart” on the same screen: I need to scroll up and down to see all information about one product
Information Efficiency: Exceeds one screen length for 1 product
After:
Show 1 Collection + 1 Products
Displays 2 collections on 1 screen.
Able to view cat reviews, product image, product information & “Add to Cart” on the same screen
HOW I GOT THERE
Collection Page Product Cards Iteration
Before:
Show 1 Collection + N Products
Exceeds 1 screen length
[Users]: Cannot see “Cat Review” & “Add to Cart” on the same screen: I need to scroll up and down to see all information about one product
Information Efficiency: Exceeds one screen length for 1 product
After:
Show 1 Collection + 1 Products
Displays 2 collections on 1 screen.
Able to view cat reviews, product image, product information & “Add to Cart” on the same screen
DESIGN: PRODUCT DETAIL PAGE
Guide users towards making a purchase decision
Research Insights:
Users in the product detail page focus on objective features and make initial decisions quickly without much scrolling.
Research Insights:
Cat owners care about returns in case their cats dislike the product.
Research Insights:
Users actively to look for icons quickly review the product features.
Research Insights:
Users value human experiences more as they get closer to the lower funnel.
Research Insights:
Users scan the website before reading in detail, so we use tags to highlight product advantages.
Research Insights:
Cat owners form an invisible community, observing if others have the similar number of cats.
Research Insights:
Users actively examine whether their cat will engage with the product based on similar cats.
Product page on mobile is too big to load, Thank you!
Please see desktop for product page design & iteration.
Not the End
Not the End
LEARNINGS
LEARNINGS
Branding
Crafting E-commerce Experiences That Spark User Imagination
Crafting E-commerce Experiences That Spark User Imagination
Particularly for lifestyle brands, it's essential to empathize with users' pain points.
For Furrytail, users often worry whether their cats will like a particular product. By designing experiences that spark users' imagination—helping them envision their cats' happiness with the product—we can effectively enhance user experience and purchase intent.
Leveraging Design Language to Stimulate User Imagination:
Particularly for lifestyle brands, it's essential to empathize with users' pain points.
For Furrytail, users often worry whether their cats will like a particular product. By designing experiences that spark users' imagination—helping them envision their cats' happiness with the product—we can effectively enhance user experience and purchase intent.
Leveraging Design Language to Stimulate User Imagination:
User research revealed that users are easily attracted to engaging cat images and tend to imagine whether their own cats would enjoy the product. Respecting and enhancing this imagination, I designed a "Cat Review" module featuring cat avatars, personality descriptions, images of cats interacting with the product, and their evaluations.
User research revealed that users are easily attracted to engaging cat images and tend to imagine whether their own cats would enjoy the product. Respecting and enhancing this imagination, I designed a "Cat Review" module featuring cat avatars, personality descriptions, images of cats interacting with the product, and their evaluations.
Flow
Optimizing E-commerce Flow: From Interest To Action
Optimizing E-commerce Flow: From Interest To Action
From the upper funnel (homepage) to the product detail page, we adhered to a flow of "interest, engagement, trust, action," ensuring that users receive the necessary information and experience at each stage to smoothly complete their purchase.
From the upper funnel (homepage) to the product detail page, we adhered to a flow of "interest, engagement, trust, action," ensuring that users receive the necessary information and experience at each stage to smoothly complete their purchase.
Consideration
Collection Page
Awareness
Homepage
Conversion
Product Detail Page
Interest:
Capture attention with visuals and compelling highlights.
Engage:
Help users to find the product that suits them best.
Trust:
Build confidence with reliable information and social proof.
Action:
Simplify the path to purchase with clear CTAs and incentives.
Consideration
Collection Page
Awareness
Homepage
Conversion
Product Detail Page
Interest:
Capture attention with visuals and compelling highlights.
Engage:
Help users to find the product that suits them best.
Trust:
Build confidence with reliable information and social proof.
Action:
Simplify the path to purchase with clear CTAs and incentives.
Collaboration
Collaborating with Development Teams to Clarify Information Storage Logic
Collaborating with Development Teams to Clarify Information Storage Logic
When structuring content storage for an e-commerce website using Shopify, it's important to distinguish between:
Front-End Information: Static content and design elements managed within the theme's code, which don't require frequent updates.
Product-Related Information: Details like descriptions, prices, and images stored in the Shopify backend for efficient management.
Regularly Updated Non-Product Content: Content such as promotional banners or announcements that need periodic updates should be managed through Shopify's content management features, enabling non-technical staff to make changes without altering the site's code.
When structuring content storage for an e-commerce website using Shopify, it's important to distinguish between:
Front-End Information: Static content and design elements managed within the theme's code, which don't require frequent updates.
Product-Related Information: Details like descriptions, prices, and images stored in the Shopify backend for efficient management.
Regularly Updated Non-Product Content: Content such as promotional banners or announcements that need periodic updates should be managed through Shopify's content management features, enabling non-technical staff to make changes without altering the site's code.
Front-End Information
Information to be managed directly in the front-end code:
Product-Related Information
Product-related information to be stored in Shopify's product pages using metafields:
Examples of product page on Shopify backend
Regularly Updated Non-Product Content
Product-related information to be stored in Shopify using metaobjects, linked to products for easy management by non-technical staff:
Examples of meta-object on Shopify backend
Front-End Information
Information to be managed directly in the front-end code:
Product-Related Information
Product-related information to be stored in Shopify's product pages using metafields:
Examples of product page on Shopify backend
Regularly Updated Non-Product Content
Product-related information to be stored in Shopify using metaobjects, linked to products for easy management by non-technical staff:
Examples of meta-object on Shopify backend
Design isn't free-form
Design isn't free-form
Design isn't free-form
When determining image dimensions, it's crucial to consider how they'll be stored in Shopify.
It's best to maintain uniform dimension ratios for images stored in the same location.
When determining image dimensions, it's crucial to consider how they'll be stored in Shopify.
It's best to maintain uniform dimension ratios for images stored in the same location.
When determining image dimensions, it's crucial to consider how they'll be stored in Shopify.
It's best to maintain uniform dimension ratios for images stored in the same location.
Thank You!
