2023
Manic Panic
Revamping the eCommerce experience for a rebellious beauty brand rooted in self-expression.
Brand-Driven UX
E-Commerce
Optimization
Summary
As the UX Designer for Manic Panic, I led the eCommerce redesign across homepage, product discovery, and PDP flows, tackling:
43% bounce rate on mobile
Confusing product structure + hierarchy
Cart abandonment + PDP friction
6.5s average mobile load time
We hypothesized that simplifying the navigation and PDP content structure would reduce friction and boost mobile conversions. Our solution centered around a mobile-first, hierarchy-led system that delivered bold visual expression without compromising performance or clarity.
The result? A faster, more intuitive shopping experience that balances Manic Panic’s rebellious brand voice with frictionless commerce and reduced mobile bounce rate by 22%.
Role
UX Designer
Tools
Figma
Google Analytics
Hotjar
Notion
Team
1 UX Designer
1 Developer
1 Brand Strategist
Duration
6 weeks
The Challenge
A rebellious brand held back by a rigid shopping experience.
Manic Panic is an iconic brand in alternative beauty, known for its bold hair colors and rebellious self-expression. But their digital experience wasn’t keeping up.
Overwhelming mega-dropdown menu structure that lacks visual clarity and category hierarchy, creating friction for first-time users exploring hair color options.
Product detail page with unbalanced visual weight, large image dominates while product info, CTAs, and social proof lack emphasis and visual grouping.
Product listing page showing high redundancy in layout and little storytelling, makes it hard for users to differentiate or emotionally connect with shades.
Customer reviews section with useful user-submitted imagery, but presented with minimal structure, hurts scannability and makes it hard to validate trust.
The original site had critical UX and performance issues:
Inconsistent product hierarchy made it difficult for users to browse or compare shades.
PDPs suffered from information overload, unclear CTAs, and friction in the add-to-cart flow.
The mobile experience lagged behind, averaging 6.5s load times, contributing to a 43% bounce rate.
The mobile experience lagged behind, averaging 6.5s load times, contributing to a 43% bounce rate.
Key Problems
Poor mobile performance
High mobile bounce (43%)
High mobile bounce (43%)
Unclear product structure
PDP abandonment on key flows
PDP abandonment on key flows
Long load times
Reduced AOV & cart conversion
Reduced AOV & cart conversion
No visual feedback on action
Drop-offs during checkout path
Drop-offs during checkout path
Funnel Drop-Off Chart showing user loss across key eCommerce stages, highlighting critical abandonment points on PDPs and cart entry.
"With a growing Gen Z customer base, Manic Panic needed a site that could scale with its product lines, work seamlessly on mobile, and still scream punk rock. The brand needed clarity, speed, and stronger conversion, without compromising identity."
— Direct User Feedback, Gen Z Customer Survey
The data showed us what was broken, but it was the users who helped us understand how it actually felt to use the site.
Understanding the Users
Understanding the Users
Punk on the outside, digital natives on the inside.
We engaged directly with Manic Panic’s Gen Z and Millennial audience to uncover what they loved, what they struggled with, and how to bridge self-expression with seamless shopping.
Who We Spoke To
10 one-on-one interviews with frequent and first-time buyers
5 guerrilla usability tests on mobile and desktop
Post-purchase survey responses from over 80+ customers
Google Analytics + session recordings to validate patterns
Meet the Core Personas
What We Heard
Too much choice, not enough clarity
“I just want to find a shade that works. The categories don’t help, they confuse me.”
“I just want to find a shade that works. The categories don’t help, they confuse me.”
Mobile felt clunky and overwhelming
“I only shop on my phone. If it lags or looks crowded, I bounce.”
“I only shop on my phone. If it lags or looks crowded, I bounce.”
Lack of trust signals
in the UI
“The reviews are messy. I wish I could see them by hair type or skin tone.”
“The reviews are messy. I wish I could see them by hair type or skin tone.”
Add-to-cart flow felt outdated and slow
“There’s too much going on. I just want to click, confirm, and buy.”
“There’s too much going on. I just want to click, confirm, and buy.”
Design Solutions
Design Solutions
Turning chaos into clarity — without losing the edge.
Our approach was grounded in simplification, speed, and self-expression. We rebuilt the experience to be punk in soul, but premium in flow.
What We Focused On
Rebuilt PDPs for clarity, speed, and purchase confidence
Streamlined the mobile checkout flow to reduce drop-offs
Restructured the entire product hierarchy and mega menu for easier navigation
Integrated smarter visual storytelling across listing and detail pages
Added trust layers, including reviews, before/after visuals, and shade comparisons
Before & After Highlights
Even the boldest brands can get lost in clutter. Our goal was to strip away friction, amplify clarity, and bring back that loud, unapologetic energy — without compromising usability. Here’s how we reimagined Manic Panic’s key user touchpoints.
Product Detail Page
Overloaded, image-dominant, no structure
Balanced layout with clear CTAs, reviews, and ingredient callouts
Navigation & Product Hierarchy
Endless dropdowns, poor visual grouping
Clean top-level navigation and filters that guide discovery
Product Listing Page
Wall of thumbnails, no logic to product order, no way to compare easily
Clean grid layout with better spacing, filters, and shade grouping
Visual Identity Refresh "Punk Meets Premium"
Introduced sharper typography with gritty textures to echo the brand’s DIY roots
Introduced sharper typography with gritty textures to echo the brand’s DIY roots
Applied a minimalist layout system with high-contrast visuals for faster scannability
Applied a minimalist layout system with high-contrast visuals for faster scannability
Built an accent color palette inspired by real hair dye swatches
Built an accent color palette inspired by real hair dye swatches
Created clean UI components with accessible contrast ratios for all users
Created clean UI components with accessible contrast ratios for all users
Used punk design elements (spray paint, glitch, stickers) strategically, not excessively
Used punk design elements (spray paint, glitch, stickers) strategically, not excessively
We translated the refreshed brand essence into distinct stylescapes that blend rebellion with modern clarity.
Design That Works - We didn’t just make it look better, we made it work harder.
Strategy
Structure backed by behavior
We rebuilt the flow using GA insights and drop-off data — every UX choice tied to real user friction.
We rebuilt the flow using GA insights and drop-off data — every UX choice tied to real user friction.
Visual System
Bold, but clear
We kept the punk vibe alive while refining layout, type, and contrast for effortless mobile navigation.
We kept the punk vibe alive while refining layout, type, and contrast for effortless mobile navigation.
Conversion Flow
Fast paths to purchase
From PDP to checkout, we stripped the friction and optimized each step for confidence and speed.
From PDP to checkout, we stripped the friction and optimized each step for confidence and speed.
Impact & Outcomes
Impact & Outcomes
Results That Speak for Themselves
From a cluttered, slow-loading store to a high-performing, punk-powered eCommerce experience.
Our redesign delivered measurable wins in engagement, speed, and conversion, without compromising the brand’s rebellious identity.
Key Metrics
Mobile Bounce Rate
0%
0%
0%
0%
Faster load times, simplified nav
Checkout Starts
0%
0%
0%
0%
Streamlined cart flow from 6 clicks to 3
Mobile Load Time
0s
0s
0s
0s
Down from 6.5s after asset & layout optimization
Product Views per Session
0x
0x
0x
0x
Improved hierarchy & filtering
Cart Abandonment
0%
0%
0%
0%
Trust badges, clearer pricing, stock status
"The new site finally feels like us, loud, bold, but so much easier to use."
— Brand Strategist, Manic Panic
Reflection & Learnings
Reflection & Learnings
Punk, But Make It Convert
From bold visuals to back-end fine-tuning, this project proved that rebellious design can drive serious business results. Here’s what we learned and where the brand can go next.
Key Learnings
1
Clarity Sells
A simplified nav and stronger product hierarchy tripled product views per session.
2
Speed Converts
Mobile load time dropped from 6.5s to 2s, cutting bounce rates by 27%.
3
Trust Wins Carts
Adding trust badges, pricing clarity, and real-time stock status reduced cart abandonment by 15%.
Future Opportunities
1
Personalized Journeys
Use customer segments to serve tailored promos and product recs.
2
Community Content
Build a UGC-powered “Punk Gallery” to deepen brand connection.
"The new site finally feels like us, loud, bold, but so much easier to use."
— Brand Strategist, Manic Panic
Final Thought
This project proved that you don’t have to choose between wild creativity and hard results. By pairing Manic Panic’s fearless personality with conversion-focused UX, we built an eCommerce experience that doesn’t just look iconic, it performs like a rockstar.
UI Showcase
UI Showcase
Final designs spotlight a mobile-first UI built for speed, clarity, and rebellion. Trust signals, intuitive flows, and storytelling visuals work together so users can explore shades, compare ingredients, and buy fast, without losing the Manic Panic streak.
More Works
(GQ® — 02)
©2024
More Works
(GQ® — 02)
©2024
2023
Manic Panic
Revamping the eCommerce experience for a rebellious beauty brand rooted in self-expression.
Brand-Driven UX
E-Commerce
Optimization
Summary
As the UX Designer for Manic Panic, I led the eCommerce redesign across homepage, product discovery, and PDP flows, tackling:
43% bounce rate on mobile
Confusing product structure + hierarchy
Cart abandonment + PDP friction
6.5s average mobile load time
We hypothesized that simplifying the navigation and PDP content structure would reduce friction and boost mobile conversions. Our solution centered around a mobile-first, hierarchy-led system that delivered bold visual expression without compromising performance or clarity.
The result? A faster, more intuitive shopping experience that balances Manic Panic’s rebellious brand voice with frictionless commerce and reduced mobile bounce rate by 22%.
Role
UX Designer
Tools
Figma
Google Analytics
Hotjar
Notion
Team
1 UX Designer
1 Developer
1 Brand Strategist
Duration
6 weeks
The Challenge
A rebellious brand held back by a rigid shopping experience.
Manic Panic is an iconic brand in alternative beauty, known for its bold hair colors and rebellious self-expression. But their digital experience wasn’t keeping up.
Overwhelming mega-dropdown menu structure that lacks visual clarity and category hierarchy, creating friction for first-time users exploring hair color options.
Product detail page with unbalanced visual weight, large image dominates while product info, CTAs, and social proof lack emphasis and visual grouping.
Product listing page showing high redundancy in layout and little storytelling, makes it hard for users to differentiate or emotionally connect with shades.
Customer reviews section with useful user-submitted imagery, but presented with minimal structure, hurts scannability and makes it hard to validate trust.
The original site had critical UX and performance issues:
Inconsistent product hierarchy made it difficult for users to browse or compare shades.
PDPs suffered from information overload, unclear CTAs, and friction in the add-to-cart flow.
The mobile experience lagged behind, averaging 6.5s load times, contributing to a 43% bounce rate.
Key Problems
Poor mobile performance
High mobile bounce (43%)
Unclear product structure
PDP abandonment on key flows
Long load times
Reduced AOV & cart conversion
No visual feedback on action
Drop-offs during checkout path
Funnel Drop-Off Chart showing user loss across key eCommerce stages, highlighting critical abandonment points on PDPs and cart entry.
"With a growing Gen Z customer base, Manic Panic needed a site that could scale with its product lines, work seamlessly on mobile, and still scream punk rock. The brand needed clarity, speed, and stronger conversion, without compromising identity."
— Direct User Feedback, Gen Z Customer Survey
The data showed us what was broken, but it was the users who helped us understand how it actually felt to use the site.
Understanding the Users
Punk on the outside, digital natives on the inside.
We engaged directly with Manic Panic’s Gen Z and Millennial audience to uncover what they loved, what they struggled with, and how to bridge self-expression with seamless shopping.
Who We Spoke To
10 one-on-one interviews with frequent and first-time buyers
5 guerrilla usability tests on mobile and desktop
Post-purchase survey responses from over 80+ customers
Google Analytics + session recordings to validate patterns
Meet the Core Personas
What We Heard
Too much choice, not enough clarity
“I just want to find a shade that works. The categories don’t help, they confuse me.”
Mobile felt clunky and overwhelming
“I only shop on my phone. If it lags or looks crowded, I bounce.”
Lack of trust signals
in the UI
“The reviews are messy. I wish I could see them by hair type or skin tone.”
Add-to-cart flow felt outdated and slow
“There’s too much going on. I just want to click, confirm, and buy.”
Design Solutions
Turning chaos into clarity — without losing the edge.
Our approach was grounded in simplification, speed, and self-expression. We rebuilt the experience to be punk in soul, but premium in flow.
What We Focused On
Rebuilt PDPs for clarity, speed, and purchase confidence
Streamlined the mobile checkout flow to reduce drop-offs
Restructured the entire product hierarchy and mega menu for easier navigation
Integrated smarter visual storytelling across listing and detail pages
Added trust layers, including reviews, before/after visuals, and shade comparisons
Before & After Highlights
Even the boldest brands can get lost in clutter. Our goal was to strip away friction, amplify clarity, and bring back that loud, unapologetic energy — without compromising usability. Here’s how we reimagined Manic Panic’s key user touchpoints.
Product Detail Page
Overloaded, image-dominant, no structure
Balanced layout with clear CTAs, reviews, and ingredient callouts
Navigation & Product Hierarchy
Endless dropdowns, poor visual grouping
Clean top-level navigation and filters that guide discovery
Product Listing Page
Wall of thumbnails, no logic to product order, no way to compare easily
Clean grid layout with better spacing, filters, and shade grouping
Visual Identity Refresh "Punk Meets Premium"
Introduced sharper typography with gritty textures to echo the brand’s DIY roots
Applied a minimalist layout system with high-contrast visuals for faster scannability
Built an accent color palette inspired by real hair dye swatches
Created clean UI components with accessible contrast ratios for all users
Used punk design elements (spray paint, glitch, stickers) strategically, not excessively
We translated the refreshed brand essence into distinct stylescapes that blend rebellion with modern clarity.
Design That Works - We didn’t just make it look better, we made it work harder.
Strategy
Structure backed by behavior
We rebuilt the flow using GA insights and drop-off data — every UX choice tied to real user friction.
Visual System
Bold, but clear
We kept the punk vibe alive while refining layout, type, and contrast for effortless mobile navigation.
Conversion Flow
Fast paths to purchase
From PDP to checkout, we stripped the friction and optimized each step for confidence and speed.
Impact & Outcomes
Results That Speak for Themselves
From a cluttered, slow-loading store to a high-performing, punk-powered eCommerce experience.
Our redesign delivered measurable wins in engagement, speed, and conversion, without compromising the brand’s rebellious identity.
Key Metrics
Mobile Bounce Rate
0%
0%
Faster load times, simplified nav
Checkout Starts
0%
0%
Streamlined cart flow from 6 clicks to 3
Mobile Load Time
0s
0s
Down from 6.5s after asset & layout optimization
Product Views per Session
0x
0x
Improved hierarchy & filtering
Cart Abandonment
0%
0%
Trust badges, clearer pricing, stock status
"The new site finally feels like us, loud, bold, but so much easier to use."
— Brand Strategist, Manic Panic
Reflection & Learnings
Punk, But Make It Convert
From bold visuals to back-end fine-tuning, this project proved that rebellious design can drive serious business results. Here’s what we learned and where the brand can go next.
Key Learnings
1
Clarity Sells
A simplified nav and stronger product hierarchy tripled product views per session.
2
Speed Converts
Mobile load time dropped from 6.5s to 2s, cutting bounce rates by 27%.
3
Trust Wins Carts
Adding trust badges, pricing clarity, and real-time stock status reduced cart abandonment by 15%.
Future Opportunities
1
Personalized Journeys
Use customer segments to serve tailored promos and product recs.
2
Community Content
Build a UGC-powered “Punk Gallery” to deepen brand connection.
"The new site finally feels like us, loud, bold, but so much easier to use."
— Brand Strategist, Manic Panic
Final Thought
This project proved that you don’t have to choose between wild creativity and hard results. By pairing Manic Panic’s fearless personality with conversion-focused UX, we built an eCommerce experience that doesn’t just look iconic, it performs like a rockstar.
UI Showcase
Final designs spotlight a mobile-first UI built for speed, clarity, and rebellion. Trust signals, intuitive flows, and storytelling visuals work together so users can explore shades, compare ingredients, and buy fast, without losing the Manic Panic streak.
More Works
(GQ® — 02)
©2024
2023
Manic Panic
Revamping the eCommerce experience for a rebellious beauty brand rooted in self-expression.
Brand-Driven UX
E-Commerce
Optimization
Summary
As the UX Designer for Manic Panic, I led the eCommerce redesign across homepage, product discovery, and PDP flows, tackling:
43% bounce rate on mobile
Confusing product structure + hierarchy
Cart abandonment + PDP friction
6.5s average mobile load time
We hypothesized that simplifying the navigation and PDP content structure would reduce friction and boost mobile conversions. Our solution centered around a mobile-first, hierarchy-led system that delivered bold visual expression without compromising performance or clarity.
The result? A faster, more intuitive shopping experience that balances Manic Panic’s rebellious brand voice with frictionless commerce and reduced mobile bounce rate by 22%.
Role
UX Designer
Tools
Figma
Google Analytics
Hotjar
Notion
Team
1 UX Designer
1 Developer
1 Brand Strategist
Duration
6 weeks
The Challenge
A rebellious brand held back by a rigid shopping experience.
Manic Panic is an iconic brand in alternative beauty, known for its bold hair colors and rebellious self-expression. But their digital experience wasn’t keeping up.
Overwhelming mega-dropdown menu structure that lacks visual clarity and category hierarchy, creating friction for first-time users exploring hair color options.
Product detail page with unbalanced visual weight, large image dominates while product info, CTAs, and social proof lack emphasis and visual grouping.
Product listing page showing high redundancy in layout and little storytelling, makes it hard for users to differentiate or emotionally connect with shades.
Customer reviews section with useful user-submitted imagery, but presented with minimal structure, hurts scannability and makes it hard to validate trust.
The original site had critical UX and performance issues:
Inconsistent product hierarchy made it difficult for users to browse or compare shades.
PDPs suffered from information overload, unclear CTAs, and friction in the add-to-cart flow.
The mobile experience lagged behind, averaging 6.5s load times, contributing to a 43% bounce rate.
Key Problems
Poor mobile performance
High mobile bounce (43%)
Unclear product structure
PDP abandonment on key flows
Long load times
Reduced AOV & cart conversion
No visual feedback on action
Drop-offs during checkout path
Funnel Drop-Off Chart showing user loss across key eCommerce stages, highlighting critical abandonment points on PDPs and cart entry.
"With a growing Gen Z customer base, Manic Panic needed a site that could scale with its product lines, work seamlessly on mobile, and still scream punk rock. The brand needed clarity, speed, and stronger conversion, without compromising identity."
— Direct User Feedback, Gen Z Customer Survey
The data showed us what was broken, but it was the users who helped us understand how it actually felt to use the site.
Understanding the Users
Punk on the outside, digital natives on the inside.
We engaged directly with Manic Panic’s Gen Z and Millennial audience to uncover what they loved, what they struggled with, and how to bridge self-expression with seamless shopping.
Who We Spoke To
10 one-on-one interviews with frequent and first-time buyers
5 guerrilla usability tests on mobile and desktop
Post-purchase survey responses from over 80+ customers
Google Analytics + session recordings to validate patterns
Meet the Core Personas
What We Heard
Too much choice, not enough clarity
“I just want to find a shade that works. The categories don’t help, they confuse me.”
Mobile felt clunky and overwhelming
“I only shop on my phone. If it lags or looks crowded, I bounce.”
Lack of trust signals
in the UI
“The reviews are messy. I wish I could see them by hair type or skin tone.”
Add-to-cart flow felt outdated and slow
“There’s too much going on. I just want to click, confirm, and buy.”
Design Solutions
Turning chaos into clarity — without losing the edge.
Our approach was grounded in simplification, speed, and self-expression. We rebuilt the experience to be punk in soul, but premium in flow.
What We Focused On
Rebuilt PDPs for clarity, speed, and purchase confidence
Streamlined the mobile checkout flow to reduce drop-offs
Restructured the entire product hierarchy and mega menu for easier navigation
Integrated smarter visual storytelling across listing and detail pages
Added trust layers, including reviews, before/after visuals, and shade comparisons
Before & After Highlights
Even the boldest brands can get lost in clutter. Our goal was to strip away friction, amplify clarity, and bring back that loud, unapologetic energy — without compromising usability. Here’s how we reimagined Manic Panic’s key user touchpoints.
Product Detail Page
Overloaded, image-dominant, no structure
Balanced layout with clear CTAs, reviews, and ingredient callouts
Navigation & Product Hierarchy
Endless dropdowns, poor visual grouping
Clean top-level navigation and filters that guide discovery
Product Listing Page
Wall of thumbnails, no logic to product order, no way to compare easily
Clean grid layout with better spacing, filters, and shade grouping
Visual Identity Refresh "Punk Meets Premium"
Introduced sharper typography with gritty textures to echo the brand’s DIY roots
Applied a minimalist layout system with high-contrast visuals for faster scannability
Built an accent color palette inspired by real hair dye swatches
Created clean UI components with accessible contrast ratios for all users
Used punk design elements (spray paint, glitch, stickers) strategically, not excessively
We translated the refreshed brand essence into distinct stylescapes that blend rebellion with modern clarity.
Design That Works - We didn’t just make it look better, we made it work harder.
Strategy
Structure backed by behavior
We rebuilt the flow using GA insights and drop-off data — every UX choice tied to real user friction.
Visual System
Bold, but clear
We kept the punk vibe alive while refining layout, type, and contrast for effortless mobile navigation.
Conversion Flow
Fast paths to purchase
From PDP to checkout, we stripped the friction and optimized each step for confidence and speed.
Impact & Outcomes
Results That Speak for Themselves
From a cluttered, slow-loading store to a high-performing, punk-powered eCommerce experience.
Our redesign delivered measurable wins in engagement, speed, and conversion, without compromising the brand’s rebellious identity.
Key Metrics
Mobile Bounce Rate
0%
0%
Faster load times, simplified nav
Checkout Starts
0%
0%
Streamlined cart flow from 6 clicks to 3
Mobile Load Time
0s
0s
Down from 6.5s after asset & layout optimization
Product Views per Session
0x
0x
Improved hierarchy & filtering
Cart Abandonment
0%
0%
Trust badges, clearer pricing, stock status
"The new site finally feels like us, loud, bold, but so much easier to use."
— Brand Strategist, Manic Panic
Reflection & Learnings
Punk, But Make It Convert
From bold visuals to back-end fine-tuning, this project proved that rebellious design can drive serious business results. Here’s what we learned and where the brand can go next.
Key Learnings
1
Clarity Sells
A simplified nav and stronger product hierarchy tripled product views per session.
2
Speed Converts
Mobile load time dropped from 6.5s to 2s, cutting bounce rates by 27%.
3
Trust Wins Carts
Adding trust badges, pricing clarity, and real-time stock status reduced cart abandonment by 15%.
Future Opportunities
1
Personalized Journeys
Use customer segments to serve tailored promos and product recs.
2
Community Content
Build a UGC-powered “Punk Gallery” to deepen brand connection.
"The new site finally feels like us, loud, bold, but so much easier to use."
— Brand Strategist, Manic Panic
Final Thought
This project proved that you don’t have to choose between wild creativity and hard results. By pairing Manic Panic’s fearless personality with conversion-focused UX, we built an eCommerce experience that doesn’t just look iconic, it performs like a rockstar.
UI Showcase
Final designs spotlight a mobile-first UI built for speed, clarity, and rebellion. Trust signals, intuitive flows, and storytelling visuals work together so users can explore shades, compare ingredients, and buy fast, without losing the Manic Panic streak.
More Works
©2024