Andrea
Fratto
Profile
Resume
ILIA Beauty
Show & Sell
Visual-first experience balancing brand storytelling with commerce performance
Role
UX Strategy + Design Lead
Timeline
2025 : 3 months
Platform
Shopify Plus
Impact
12% increase in Collection navigation
1.2% revenue lift per session
above the fold
top 25% of the screen
Live site using 2020 design template
Competing promo drivers | Conventional Hero |
Two featured products
hi-fidelity prototype with fpo assets
View all promos modal | Visual Collection Nav |
Brand message | 28 curated products
Context
The Challenge
ILIA's homepage was functional but uninspiring—a stack of product grids with category doors at the bottom—this didn't reflect the brand's premium positioning or guide shoppers effectively. New customers lacked clear entry points, and the Hero carousel needed to evolve for flexible seasonal sales, product launches and campaigns.The tension: Creative team wanted brand storytelling. Product team wanted conversion optimization. How do we enable both without compromise?
Business
Reflect premium brand positioning, drive Collection engagement, support seasonal flexibility
Shoppers
Clear navigation paths, compelling visual discovery, reduced decision fatigue
My goal
Make it beautiful AND make it convert
The Impact
Conversion & Engagement
- 12% increase in navigation to Collection screens—validated visual-first approach
- 1.2% lift in revenue per session
- Improved scroll depth and time on page
- Higher engagement with strategic features (VIP, Subscription, Shade Finder)
Brand Experience
- "Feels like ILIA" - customer feedback
- Visual storytelling resonated with target audience without sacrificing conversion
- Empowered Creative team to express brand story within commerce framework
- Established editorial & commerce framework
Operational Efficiency
- Modular template system reduced design/dev time for seasonal updates
- Content teams empowered to make updates without design dependency
- Scalable architecture supporting future personalization
- Clear testing elements enabling rapid optimization
Key insight that drove strategy
"Before we talk conversion rate and AOV, let's talk connection and interaction. Understanding the amount of content people stream daily, let's give their mind a rest and prioritize compelling visuals that communicate in seconds."
Offload the cognitive burden
My Role + Team
My Role
As UX Strategy + Design Lead, I owned the entire redesign from research through launch:
- Cross-functional workshop aligning UX, Product, Creative, Editorial, and CX teams
- Conducted competitive analysis of best-in-class e-commerce across retail, fashion, beauty, wellness
- Designed flexible template system balancing brand elevation with conversion performance
- I left the ILIA team before launch, but they:
- Shared 30-day metrics validating design decisions
- Created documentation enabling content teams to manage ongoing updates
- Evolved the design language with typography and image styling
Workshop Partners
E-commerce Leads Identify and design for merchandising + content efficiencies for sprint workflows
Creative Stay aligned with flexible components to support their new design language
Digital Product Align on MVP scope vs future roadmap
Workshop Results
Defined shared goals increase Collection navigation, improve revenue per session, strengthen brand impression
Flexible structure Established content requirements and hierarchy
Parallel workstreams created for design, content, development and authoring
3 Key Design Decisions
Key Design Decisions
#1 Visual-First Navigation
Bestsellers
Complexion
Skincare
Eye
Lip + Cheek
Sets + Bundles
Tools
Bestsellers
Complexion
Skincare
Eye
Lip + Cheek
Sets + Bundles
Tools
Swipe
The Challenge
Replaced conventional hero with visual array prioritizing Collections and best sellers.
The Solution
Design principle Reduce cognitive burden by letting compelling imagery communicate in seconds rather than forcing shoppers to process text and product grids.
Anticipate a reduced bounce rate with clearer entry points
The Impact
Conceptual Ease
Reduced cognitive load with more visual cues and images
+12%
Clear Entry points
Increased navigation to Collection screens
Look + Feel
Visual storytelling resonated: "Feels like ILIA”
Design flow
Creative team empowered to express brand without sacrificing conversion
Key Design Decisions
#2 Template for Modular Concepts
Flexible Hero Template
Hero
Business-as-usualVisual collection navgivation
Hero
Product launch + CampaignsSingle message driver
Hero
Seasonal and strategic salesUpdated daily during sale
The Challenge
The old homepage was static—Marketing needed agility for product launches and campaigns and Creative needed flexibility without sacrificing brand consistency.
The constraint
Had to understand Shopify Plus platform capabilities to empower content teams to make updates independently.
The Solution
Designed modular template system with content-agnostic components:
Design principle
- Create "big swings" wireframes with FPO content allowing Creative and Editorial teams to start parallel work while design finalized.
Enabling content teams:
- Template variations for seasonal campaigns
- Asset library for reusable components
- No design/dev dependency for content swaps
The Impact
Responsive Modules
Modular system performed well across devices (70%+ mobile traffic)
New vs Personalized
Designed for shoppers who are new to ILIA, but also suited for audience-specific variations
Empower Creatives
Flexibility for transition to a new design language
Easy updates
Seasonal updates went from weeks to days
Key Design Decisions
#3 Brand & Commerce Balance
Brand & Commerce Template
Initial wireframe
Hi-fidelity prototype + FPO Assets
Main Nav
+ Link to view ALL promos
Marquee / HERO
Visual Collections
Brand Message
Brand identity and affinity
Promos Modal
View current / evergreen promos
Merchandising
28 products Curated by category
Brand Story
Video teaser drives to full story
Formula Harmony
Shop-able
Natural + synthetic ingredient story
Strategic Features
ILIA VIP Rewards
Subscription
Find Your Shade
Social Proof — Mirror
UGC Video shopping
Social Proof — REviews
Shop-able
Curated reviews
Social Proof — Editors
Shop-able
Curated editorial quotes
Optimized Footer
Callout ethical commitments
VIP Section
Promos Section
Scroll
The Challenge
The core tension: Creative team needed full brand expression and storytelling. Product team needed conversion optimization and commerce performance. These felt like opposing goals, but could they be symbiotic?The risk: Either compromise brand for conversion or sacrifice performance for aesthetics. Neither was acceptable for ILIA's positioning.
The Solution
This MVP would be tested to validate brand storytelling and commerce performance coexist:
- Framework established
- Clear hierarchy + Navigation
- Compelling visuals with less text
Key insight validatedVisual-first approach with compelling imagery INCREASED engagement AND conversion. Reduced cognitive burden (less text, clearer hierarchy, compelling visuals) improved both brand perception and commerce performance.
The Impact
+1.2%
Proven Hypothesis
CR lift validated homepage editorial + commerce content
Harmony in concept
Established mindset of both/and vs either/or
Creative Production
Created repeatable framework for brand-commerce balance
Alignment
Cross-functional team aligned around shared success metrics
Workshop artifacts
Goals
Content
Templates
Modeling + UI
Promo System
Global access
Nav Heroes
Top 25% of the screen
Strategic Features
VIP • Subscription • FMS
Merchandising
one-click
Social Proof
Customer + Editor
Swipe
What I Learned
Cross-functional alignment from the start prevents late-stage compromises and creates better outcomes for everyone.
Key Insights
Workshops work Bringing UX, Product, Creative, Editorial, and CX together early created a shared vision and prevented mis-aligned hand-offs and stakeholder concerns. When everyone contributes to the solution, everyone champions the result.
Data is reassuring Numbers build confidence in unconventional approaches. Stakeholders were pleased with the 12% navigation lift to collections and the 1.2% revenue lift to validate that beautiful, visual-first nav would convert.
Start with user testing earlier I would have collected shopper feedback sooner through usability testing. It’s always better to take a big design swing with qualitative proof during your workflow.
Roadmap
Future Iterations
This MVP is designed for new customers, it will evolve into a personalized home screen experience.
The modular template system we built creates foundation for personalization:
- Audience-specific homepage variations (new vs returning vs VIP customers)
- Dynamic content based on browsing behavior and purchase history
- A/B testing individual modules without full homepage redesigns
- Anticipate a reduced bounce rate with clearer entry points
Recent Projects
Ilia Beauty
Remove The Barrier
Ilia Beauty
Demo vs. Details
Ilia Beauty
Compare Shades
Ilia Beauty
Let’s Get Personal
Coming
Soon
Align Technology
Unified Global CRM
Coming
Soon
Andrea Fratto
Profile
Resume
ILIA Beauty
Show & Sell
Visual-first experience balancing brand storytelling with commerce performance
Role
UX Strategy + Design Lead
Timeline
2025 : 3 months
Platform
Shopify Plus
Impact
12% increase in Collection navigation
1.2% revenue lift per session
above the fold — top 25% of the screen
Live site using 2020 design template
hi-fidelity prototype with fpo assets
Competing
promo drivers
Single, global
link to view
all promos
Conventional
Hero
Visual
Collection
navigation
Brand
message
Two featured
products
28 curated
products
The Challenge
The Impact
ILIA's homepage was functional but uninspiring—a stack of product grids with category doors at the bottom—this didn't reflect the brand's premium positioning or guide shoppers effectively. New customers lacked clear entry points, and the Hero carousel needed to evolve for flexible seasonal sales, product launches and campaigns.The tension: Creative team wanted brand storytelling. Product team wanted conversion optimization. How do we enable both without compromise?
Business
Reflect premium brand positioning, drive Collection engagement, support seasonal flexibility
Shoppers
Clear navigation paths, compelling visual discovery, reduced decision fatigue
My goal
Make it beautiful AND make it convert
Conversion & Engagement
- 12% increase in navigation to Collection screens—validated visual-first approach
- 1.2% lift in revenue per session
- Improved scroll depth and time on page
- Higher engagement with strategic features (VIP, Subscription, Shade Finder)
Brand Experience
- "Feels like ILIA" - customer feedback
- Visual storytelling resonated with target audience without sacrificing conversion
- Empowered Creative team to express brand story within commerce framework
- Established editorial & commerce framework
Operational Efficiency
- Modular template system reduced design/dev time for seasonal updates
- Content teams empowered to make updates without design dependency
- Scalable architecture supporting future personalization
- Clear testing elements enabling rapid optimization
Key insight that drove strategy
"Before we talk conversion rate and AOV, let's talk connection and interaction. Understanding the amount of content people stream daily, let's give their mind a rest and prioritize compelling visuals that communicate in seconds."
Offload the cognitive burden
My Role + Team
My Role
As UX Strategy + Design Lead, I owned the entire redesign from research through launch:
- Cross-functional workshop aligning UX, Product, Creative, Editorial, and CX teams
- Conducted competitive analysis of best-in-class e-commerce across retail, fashion, beauty, wellness
- Designed flexible template system balancing brand elevation with conversion performance
- I left the ILIA team before launch, but they:
- Shared 30-day metrics validating design decisions
- Created documentation enabling content teams to manage ongoing updates
- Evolved the design language with typography and image styling
Workshop Partners
E-commerce Leads Identify and design for merchandising + content efficiencies for sprint workflows
Creative Stay aligned with flexible components to support their new design language
Digital Product Align on MVP scope vs future roadmap
Workshop Results
Defined shared goals increase Collection navigation, improve revenue per session, strengthen brand impression
Flexible structure Established content requirements and hierarchy
Parallel workstreams created for design, content, development and authoring
3 Key Design Decisions
Key Design Decisions
#1 Visual-First Navigation
Bestsellers
Complexion
Skincare
Eye
Lip + Cheek
Sets + Bundles
Tools
Bestsellers
Complexion
Skincare
Eye
Lip + Cheek
Sets + Bundles
Tools
Swipe
The Challenge
Replaced conventional hero with visual array prioritizing Collections and best sellers.
The Solution
Design principle Reduce cognitive burden by letting compelling imagery communicate in seconds rather than forcing shoppers to process text and product grids.
Anticipate a reduced bounce rate with clearer entry points
The Impact
Conceptual Ease
Reduced cognitive load with more visual cues and images
+12%
Clear Entry points
Increased navigation to Collection screens
Look + Feel
Visual storytelling resonated: "Feels like ILIA”
Design flow
Creative team empowered to express brand without sacrificing conversion
Key Design Decisions
#2 Template for Modular Concepts
Flexible Hero Template
Hero
Business-as-usualVisual collection navgivation
Hero
Product launch + CampaignsSingle message driver
Hero
Seasonal and strategic salesUpdated daily during sale
The Challenge
The old homepage was static—Marketing needed agility for product launches and campaigns and Creative needed flexibility without sacrificing brand consistency.
The constraint
Needed to understand Shopify Plus platform capabilities to empower content teams to make updates independently.
The Solution
Designed modular template system with content-agnostic components:
Design principle
- Create "big swings" wireframes with FPO content allowing Creative and Editorial teams to start parallel work while design finalized.
Enabling content teams:
- Template variations for seasonal campaigns
- Asset library for reusable components
- No design/dev dependency for content swaps
The Impact
Responsive Modules
Modular system performed well across devices (70%+ mobile traffic)
New vs Personalized
Designed for shoppers who are new to ILIA, but also suited for audience-specific variations
Empower Creatives
Flexibility for transition to a new design language
Easy updates
Seasonal updates went from weeks to days
Key Design Decisions
#3 Brand & Commerce Balance
Brand & Commerce Template
Initial wireframe
Hi-fidelity prototype + FPO Assets
Main Nav
+ Link to view ALL promos
Marquee / HERO
Visual Collections
Brand Message
Brand identity and affinity
Promos Modal
View current / evergreen promos
Merchandising
28 products Curated by category
Brand Story
Video teaser drives to full story
Formula Harmony
Shop-able
Natural + synthetic ingredient story
Strategic Features
ILIA VIP Rewards
Subscription
Find Your Shade
Social Proof — Mirror
UGC Video shopping
Social Proof — REviews
Shop-able
Curated reviews
Social Proof — Editors
Shop-able
Curated editorial quotes
Optimized Footer
Callout ethical commitments
VIP Section
Promos Section
Scroll
The Challenge
The core tension: Creative team needed full brand expression and storytelling. Product team needed conversion optimization and commerce performance. These felt like opposing goals, but could they be symbiotic?The risk: Either compromise brand for conversion or sacrifice performance for aesthetics. Neither was acceptable for ILIA's positioning.
The Solution
This MVP would be tested to validate brand storytelling and commerce performance coexist:
- Framework established
- Clear hierarchy + navigation
- Compelling visuals with less text
Key insight validatedVisual-first approach with compelling imagery INCREASED engagement AND conversion. Reduced cognitive burden (less text, clearer hierarchy, compelling visuals) improved both brand perception and commerce performance.
The Impact
+1.2%
Proven Hypothesis
CR lift validated homepage editorial + commerce content
Harmony in concept
Established mindset of both/and vs either/or
Creative Production
Created repeatable framework for brand-commerce balance
Alignment
Cross-functional team aligned around shared success metrics
Workshop artifacts
Goals
Content
Templates
Modeling + UI
Promo System
Global access
Nav Heroes
Top 25% of the screen
Strategic Features
VIP • Subscription • FMS
Merchandising
one-click
Social Proof
Customer + Editor
What I Learned
Cross-functional alignment from the start prevents late-stage compromises and creates better outcomes for everyone.
Key Insights
Workshops work Bringing UX, Product, Creative, Editorial, and CX together early created a shared vision and prevented mis-aligned hand-offs and stakeholder concerns. When everyone contributes to the solution, everyone champions the result.
Data is reassuring Numbers build confidence in unconventional approaches. Stakeholders were pleased with the 12% navigation lift to collections and the 1.2% revenue lift to validate that beautiful, visual-first nav would convert.
Start with user testing earlier I would have collected shopper feedback sooner through usability testing. It’s always better to take a big design swing with qualitative proof during your workflow.
Roadmap
Future Iterations
This MVP is designed for new customers, it will evolve into a personalized home screen experience.
The modular template system we built creates foundation for personalization:
- Audience-specific homepage variations (new vs returning vs VIP customers)
- Dynamic content based on browsing behavior and purchase history
- A/B testing individual modules without full homepage redesigns
- Anticipate a reduced bounce rate with clearer entry points
Recent Projects
Ilia Beauty
Remove The Barrier
Ilia Beauty
Demo vs. Details
Ilia Beauty
Compare Shades
Ilia Beauty
Let’s Get Personal
Coming
Soon
Align Technology
Unified Global CRM
Coming
Soon
ILIA Beauty
Show & Sell
Visual-first experience balancing brand storytelling with commerce performance
Role
UX Strategy + Design Lead
Timeline
2025 : 3 months
Platform
Shopify Plus
Impact
12% increase in Collection navigation
1.2% revenue lift per session
above the fold — top 25% of the screen
Live site using 2020 design template
hi-fidelity prototype with fpo assets
Competing
promo drivers
Single, global
link to view
all promos
Conventional
Hero
Visual
Collection
navigation
Brand
message
Two featured
products
28 curated
products
The Challenge
The Impact
ILIA's homepage was functional but uninspiring—a stack of product grids with category doors at the bottom—this didn't reflect the brand's premium positioning or guide shoppers effectively. New customers lacked clear entry points, and the Hero carousel needed to evolve for flexible seasonal sales, product launches and campaigns.The tension: Creative team needed brand storytelling. Product team needed conversion optimization. How do we enable both without compromise?
Business
Reflect premium brand positioning, drive Collection engagement, support seasonal flexibility
Shoppers
Clear navigation paths, compelling visual discovery, reduced decision fatigue
My goal
Make it beautiful AND make it convert
Conversion & Engagement
- 12% increase in navigation to Collection screens—validated visual-first approach
- 1.2% lift in revenue per session
- Improved scroll depth and time on page
- Higher engagement with strategic features (VIP, Subscription, Shade Finder)
Brand Experience
- "Feels like ILIA" - customer feedback
- Visual storytelling resonated with target audience without sacrificing conversion
- Empowered Creative team to express brand story within commerce framework
- Established editorial & commerce framework
Operational Efficiency
- Modular template system reduced design/dev time for seasonal updates
- Content teams empowered to make updates without design dependency
- Scalable architecture supporting future personalization
- Clear testing elements enabling rapid optimization
Key insight that drove strategy
"Before we talk conversion rate and AOV, let's talk connection and interaction. Understanding the amount of content people stream daily, let's give their mind a rest and prioritize compelling visuals that communicate in seconds."
Offload the cognitive burden
My Role + Team
My Role
As UX Strategy + Design Lead, I owned the entire redesign from research through launch:
- Cross-functional workshop aligning UX, Product, Creative, Editorial, and CX teams
- Competitive analysis of best-in-class e-commerce across retail, fashion, beauty, wellness
- Designed flexible template system balancing brand elevation with conversion performance
- I left the ILIA team before launch, but they:
- Shared 30-day metrics validating design decisions
- Created documentation enabling content teams to manage ongoing updates
- Evolved the design language with typography and image styling
Workshop Partners
E-commerce Leads Identify and design for merchandising + content efficiencies for sprint workflows
Creative Stay aligned with flexible components to support their new design language
Digital Product Align on MVP scope vs future roadmap
Workshop Results
Defined shared goals increase Collection navigation, improve revenue per session, strengthen brand impression
Flexible structure Established content requirements and hierarchy
Parallel workstreams created for design, content, development and authoring
3 Key Design Decisions
Key Design Decisions
#1 Visual-First Navigation
Bestsellers
Complexion
Skincare
Eye
Lip + Cheek
Sets + Bundles
Tools
Bestsellers
Complexion
Skincare
Eye
Lip + Cheek
Sets + Bundles
Tools
Swipe
The Challenge
Replaced conventional hero with visual array prioritizing Collections and best sellers.
The Solution
Employing the main design principle to reduce cognitive burden by letting compelling imagery communicate in seconds rather than forcing shoppers to process text and product grids.
Anticipate a reduced bounce rate with clearer entry points
The Impact
Conceptual Ease
Reduced cognitive load with more visual cues and images
+12%
Clear Entry points
Increased navigation to Collection screens
Look + Feel
Visual storytelling resonated: "Feels like ILIA”
Design flow
Creative team empowered to express brand without sacrificing conversion
Key Design Decisions
#2 Template for Modular Concepts
Flexible Hero Template
Hero
Business-as-usualVisual collection navgivation
Hero
Product launch + CampaignsCollection doorways reprioritized
Hero
Seasonal and strategic salesCollection doorways reprioritized
The Challenge
The old homepage was static—Marketing needed agility for product launches and campaigns and Creative needed flexibility without sacrificing brand consistency.
The constraint
Needed to understand Shopify Plus platform capabilities to empower content teams to make updates independently.
The Solution
Designed modular template system with content-agnostic components:
Design principle
- Create "big swing" wireframes with FPO content allowing Creative and Editorial teams to start parallel work while design finalized.
Enabling content teams:
- Template variations for seasonal campaigns and strategic sales
- Asset library for reusable components
- No design/dev dependency for content swaps
The Impact
Responsive Modules
Modular system performed well across devices (70%+ mobile traffic)
New vs Personalized
Designed for shoppers who are new to ILIA, but also suited for audience-specific variations
Empower Creatives
Flexibility for transition to a new design language
Easy updates
Seasonal updates went from weeks to days
Key Design Decisions
#3 Brand & Commerce Balance
Brand & Commerce Template
Initial wireframe
Hi-fidelity prototype + FPO Assets
Main Nav
+ Link to view ALL promos
Marquee / HERO
Visual Collections
Brand Message
Brand identity and affinity
Promos Modal
View current / evergreen promos
Merchandising
28 products Curated by category
Brand Story
Video teaser drives to full story
Formula Harmony
Shop-able
Natural + synthetic ingredient story
Strategic Features
ILIA VIP Rewards
Subscription
Find Your Shade
Social Proof — Mirror
UGC Video shopping
Social Proof — REviews
Shop-able
Curated reviews
Social Proof — Editors
Shop-able
Curated editorial quotes
Optimized Footer
Callout ethical commitments
VIP Section
Promos Section
Scroll
The Challenge
The core tension: Creative team needed full brand expression and storytelling. Product team needed conversion optimization and commerce performance. These felt like opposing goals, but could they be symbiotic?The risk: Either compromise brand for conversion or sacrifice performance for aesthetics. Neither was acceptable for ILIA's positioning.
The Solution
This MVP would be tested to validate brand storytelling and commerce performance coexist:
- Framework established
- Clear hierarchy + Navigation
- Compelling visuals with less text
Key insight validatedVisual-first approach with compelling imagery INCREASED engagement AND conversion. Reduced cognitive burden (less text, clearer hierarchy, compelling visuals) improved both brand perception and commerce performance.
The Impact
+1.2%
Proven Hypothesis
CR lift validated homepage editorial + commerce content
Harmony in concept
Established mindset of both/and vs either/or
Creative Production
Created repeatable framework for brand-commerce balance
Alignment
Cross-functional team aligned around shared success metrics
Workshop artifacts
Goals
Content
Templates
Modeling + UI
Promo System
Global access
Nav Heroes
Top 25% of the screen
Strategic Features
VIP • Subscription • FMS
Merchandising
one-click
Social Proof
Customer + Editor
What I Learned
Cross-functional alignment from the start prevents late-stage compromises and creates better outcomes for everyone.
Key Insights
Workshops work Bringing UX, Product, Creative, Editorial, and CX together early created a shared vision and prevented mis-aligned hand-offs and stakeholder concerns. When everyone contributes to the solution, everyone champions the result.
Data is reassuring Numbers build confidence in unconventional approaches. Stakeholders were pleased with the 12% navigation lift to collections and the 1.2% revenue lift to validate that beautiful, visual-first nav would convert.
Start with user testing earlier I would have collected shopper feedback sooner through usability testing. It’s always better to take a big design swing with qualitative proof during your workflow.
Roadmap
Future Iterations
This MVP is designed for new customers, it will evolve into a personalized home screen experience.
The modular template system we built creates foundation for personalization:
- Audience-specific homepage variations (new vs returning vs VIP customers)
- Dynamic content based on browsing behavior and purchase history
- A/B testing individual modules without full homepage redesigns
- Anticipate a reduced bounce rate with clearer entry points
Recent Projects
Ilia Beauty
Remove The Barrier
Ilia Beauty
Demo vs. Details
Ilia Beauty
Compare Shades
Ilia Beauty
Let’s Get Personal
Coming
Soon
Align Technology
Unified Global CRM
Coming
Soon