E-commerce for a natural skincare brand
E-commerce for a natural skincare brand
E-commerce for a natural skincare brand
FIRST SKINCARE PH WEBSITE
Give your skin love, and a way to share it.
Give your skin love, and a way to share it.
Give your skin love, and a way to share it.
FIRST is the first Filipino skincare brand built on plant-based active ingredients, for men and women. This project is the e-commerce website that lets Filipino shoppers browse and buy FIRST’s products, and join a Skinfluencer program to resell and earn from recommending them.
It’s for two audiences at once: customers who want clean, natural skincare, and the micro-sellers who want to turn their following into income.
FIRST is the first Filipino skincare brand built on plant-based active ingredients, for men and women. This project is the e-commerce website that lets Filipino shoppers browse and buy FIRST’s products, and join a Skinfluencer program to resell and earn from recommending them.
It’s for two audiences at once: customers who want clean, natural skincare, and the micro-sellers who want to turn their following into income.
FIRST is the first Filipino skincare brand built on plant-based active ingredients, for men and women. This project is the e-commerce website that lets Filipino shoppers browse and buy FIRST's products, and join a Skinfluencer program to resell and earn from recommending them.
It's for two audiences at once: customers who want clean, natural skincare, and the micro-sellers who want to turn their following into income.
OVERVIEW
The Problem
The Problem
More Filipinos are moving away from harsh chemicals toward natural skincare, but a clean product line still needs a place to sell that does two jobs at once. Most skincare sites only handle the first: browse, buy, check out.
FIRST also wanted a resell layer, a Skinfluencer program where customers become sellers, which changes the design problem.
More Filipinos are moving away from harsh chemicals toward natural skincare, but a clean product line still needs a place to sell that does two jobs at once. Most skincare sites only handle the first: browse, buy, check out.
FIRST also wanted a resell layer, a Skinfluencer program where customers become sellers, which changes the design problem.
More Filipinos are moving away from harsh chemicals toward natural skincare, but a clean product line still needs a place to sell that does two jobs at once. Most skincare sites only handle the first: browse, buy, check out.
FIRST also wanted a resell layer, a Skinfluencer program where customers become sellers, which changes the design problem.
The Approach
Treated trust as the first conversion problem. For an unfamiliar natural brand, the product pages had to do real work: ingredients, testimonials, and clear “how it works” content, not just an add-to-cart button.
Treated trust as the first conversion problem. For an unfamiliar natural brand, the product pages had to do real work: ingredients, testimonials, and clear “how it works” content, not just an add-to-cart button.
Treated trust as the first conversion problem. For an unfamiliar natural brand, the product pages had to do real work: ingredients, testimonials, and clear "how it works" content, not just an add-to-cart button.
Designed the Skinfluencer path as part of the store, not a separate destination. The resell program only grows the brand if a regular shopper can discover and join it without leaving the buying flow.
Designed the Skinfluencer path as part of the store, not a separate destination. The resell program only grows the brand if a regular shopper can discover and join it without leaving the buying flow.
Designed the Skinfluencer path as part of the store, not a separate destination. The resell program only grows the brand if a regular shopper can discover and join it without leaving the buying flow.
Kept checkout conventional and efficient. Cart, shipping details, payment, and order summary follow familiar e-commerce patterns so nothing slows the purchase.
Kept checkout conventional and efficient. Cart, shipping details, payment, and order summary follow familiar e-commerce patterns so nothing slows the purchase.
Kept checkout conventional and efficient. Cart, shipping details, payment, and order summary follow familiar e-commerce patterns so nothing slows the purchase.
My Role
My Role
Sole designer for this project at my previous employer, Ideo Studios, working alongside an account manager who handled client coordination. I led the end-to-end user experience, including the shopping flow, the Skinfluencer program, and the UI for every page. The brand identity was provided by the client; my role was to apply it consistently across the website.
Sole designer for this project at my previous employer, Ideo Studios, working alongside an account manager who handled client coordination. I led the end-to-end user experience, including the shopping flow, the Skinfluencer program, and the UI for every page. The brand identity was provided by the client; my role was to apply it consistently across the website.
Sole designer for this project at my previous employer, Ideo Studios, working alongside an account manager who handled client coordination. I led the end-to-end user experience, including the shopping flow, the Skinfluencer program, and the UI for every page. The brand identity was provided by the client; my role was to apply it consistently across the website.
SOLUTION
The Proposed Solution
The Proposed Solution
A storefront that sells products and recruits sellers, in one experience.
A storefront that sells products and recruits sellers, in one experience.
A storefront that sells products and recruits sellers, in one experience.
HI-FIDELITY DESIGNS
Final UI
Final UI
Final UI
The interface applies FIRST’s brand (a warm, earthy palette of terracotta, cream, and soft neutrals, with Brandon Grotesque type) to signal natural and premium without feeling clinical.
The interface applies FIRST’s brand (a warm, earthy palette of terracotta, cream, and soft neutrals, with Brandon Grotesque type) to signal natural and premium without feeling clinical.
The interface applies FIRST's brand (a warm, earthy palette of terracotta, cream, and soft neutrals, with Brandon Grotesque type) to signal natural and premium without feeling clinical.
HOMEPAGE
HOMEPAGE
HOMEPAGE
PRODUCTS PAGE
PRODUCTS PAGE
PRODUCTS PAGE
Product Individual Page
Product Individual Page
Product Individual Page
1
1
SHopping cart
SHopping cart
SHopping cart
2
2
Shipping details
Shipping details
Shipping details
3
3
Payment options
Payment options
Payment options
4
4
Order summary
Order summary
Order summary
ORDER HISTORY
ORDER HISTORY
ORDER HISTORY
Other pages
Other pages
Other pages
STYLE GUIDES
Color Palette
Color Palette
Brand Colors
Brand Colors
Sand
500
#B26F31
400
#C28B5D
400
#C28B5D
300
#D1A986
300
#D1A986
200
#E1C6AF
200
#E1C6AF
100
#F0E2D6
100
#F0E2D6
50
#F7F1EA
50
#F7F1EA
Brown
500
#7B5000
400
#96733D
400
#96733D
300
#B0966F
300
#B0966F
200
#CBB9A0
200
#CBB9A0
100
#E4DBD0
100
#E4DBD0
50
#F2EDE6
50
#F2EDE6
Rose
500
#E5C1B3
400
#EBCEC2
400
#EBCEC2
300
#EFDAD2
300
#EFDAD2
200
#F4E6E1
200
#F4E6E1
100
#FAF3EF
100
#FAF3EF
50
#FCF9F7
50
#FCF9F7
Crystal
500
#FAF3ED
400
#FBF6F0
400
#FBF6F0
300
#FBF8F4
300
#FBF8F4
200
#FDFAF8
200
#FDFAF8
100
#FEFDFC
100
#FEFDFC
50
#FEFEFD
50
#FEFEFD
Neutral Colors
Black 500
#121212
Gray 500
#D9D9D9
Light Gray 500
#F1F1F1
White 500
#FFFFFF
Typography
Typography
Brandon Grotesque
Brandon Grotesque
Brandon Grotesque
BOLD
BOLD
SEMI-BOLD
SEMI-BOLD
MEDIUM
MEDIUM
REGULAR
REGULAR
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
Back to works
TAKEAWAYS
Outcome / Impact
Overall
This site was designed and deployed in 2023, serving real customers as FIRST’s live storefront. I moved on after handoff, so I don’t have post-launch performance data, the targets below are illustrative, tied to the project’s goals:
This site was designed and deployed in 2023, serving real customers as FIRST’s live storefront. I moved on after handoff, so I don’t have post-launch performance data, the targets below are illustrative, tied to the project’s goals:
Shipped a complete e-commerce system covering the full journey: browse, product detail, cart, checkout, order history, and account.
Shipped a complete e-commerce system covering the full journey: browse, product detail, cart, checkout, order history, and account.
Shipped a complete e-commerce system covering the full journey: browse, product detail, cart, checkout, order history, and account.
Launched the Skinfluencer program as a built-in resell and community channel, designed into the storefront rather than bolted on.
Launched the Skinfluencer program as a built-in resell and community channel, designed into the storefront rather than bolted on.
Launched the Skinfluencer program as a built-in resell and community channel, designed into the storefront rather than bolted on.
The resell program’s success would be measured by Skinfluencer signups and the share of sales they drive, the core growth metric for a brand with no built-in distribution.
The resell program's success would be measured by Skinfluencer signups and the share of sales they drive, the core growth metric for a brand with no built-in distribution.
The resell program's success would be measured by Skinfluencer signups and the share of sales they drive, the core growth metric for a brand with no built-in distribution.
Learnings
Building Trust Through Storytelling
Building Trust Through Storytelling
Leading with the brand story and ingredient details helped build trust for an emerging natural skincare brand, while integrating the Skinfluencer program into the shopping journey created a more cohesive experience. Since I left after deployment, I wasn’t able to measure whether shoppers converted into active Skinfluencers. If I revisited the project, I’d define success metrics from the start and expand the seller experience with features like earnings tracking, performance insights, and sharing tools.
Leading with the brand story and ingredient details helped build trust for an emerging natural skincare brand, while integrating the Skinfluencer program into the shopping journey created a more cohesive experience. Since I left after deployment, I wasn’t able to measure whether shoppers converted into active Skinfluencers. If I revisited the project, I’d define success metrics from the start and expand the seller experience with features like earnings tracking, performance insights, and sharing tools.
Let’s Connect
Got a
challenge?
COnnect with me
or contact me directly at
alipiotrisha@gmail.com
Let’s Connect
Got a
challenge?
COnnect with me
or contact me directly at
alipiotrisha@gmail.com
Let’s Connect
Got a
challenge?
COnnect with me
or contact me directly at
alipiotrisha@gmail.com