JAEEUL BAE
WORKS
ABOUT
H&M Product Listing
Translating Brand Vision into Experience Design
I designed the product browsing experience for H&M mobile app's product listing pages to become an "Inspirational Style Destination." Over a year, I developed a comprehensive design strategy and executed end-to-end designs, launching 5 key features globally.
My Role
- Leading initiatives to establish design strategy
- Qualitative & quantitative research
- Executing end-to-end UX design
- Leading co-creation workshop with stakeholders
- Data-driven design validation & iteration
Impact
- Conducted 12 A/B tests and globally released 5 significant improvements for Listing Page UX
- Filter redesign → +4.5% revenue
- Swipe-able image → +4% conversion rate
- Videos in PLP → +1.6% Add-to-Bag (mobile web)
Highlights
Business Mission to Design Goals
Through an in-depth analysis of the customer experience and competitive landscape, I defined two core design qualities essential for the 'Inspirational Style Destination’ experience.
Co-creation with Stakeholders
I designed and led co-creation sessions with various internal stakeholders, from Assortment Curation to Brand Design.
Key Designs for Inspirational Experience
I introduced Dynamic Layouts and immersive media like auto-playing videos, to transform the browsing experience into an engaging journey of discovering styling ideas.
Key Designs for Usability
I revamped the discovery process to minimize customer friction, allowing users to intuitively swipe through product images and easily filter and sort their options.
Goal-Driven Validation Approach
I led the team in adopting a validation strategy that combines qualitative customer feedback and quantitative data analysis, successfully discovering the right design solutions for our business mission.
Read more about the project in detail
Challenge
Translating the business mission into actionable design goals
In 2022, H&M aimed to establish itself as an "Inspirational Style Destination" for its 130M+ digital shoppers. As the product designer for the product listing pages, I translated this business mission into actionable design goals and developed solutions to achieve them.
The previous H&M mobile product listing page, featuring a traditional two-column grid and uniform product presentation.
Approach
Structured approach from business mission to design goals
To translate the business mission into actionable design goals, I analyzed the customer experience and competitive landscape in a structured approach: comparative analysis, competitor analysis, and current customer journey analysis. This process effectively bridged the gap between the overarching business mission and tangible design objectives.
Finding
Redefining Inspiration for H&M Customers
Building on the research insights, I defined 'inspiration' from the customer's perspective. For H&M customers, 'Inspiration' means accessible, affordable fashion ideas that are easy to understand and apply to their daily lives.
Clarity & Utility
“ZARA looks cool, but it’s not inspiring to me because I can’t even tell what they’re actually selling.”
“I just want to see the product details clearly.”
Relatability & Representation
“I love seeing fashion on people like me or people I follow on Instagram.”
“Seeing perfect models posing doesn’t really help me at all”
Contextual Styling & Actionable Ideas
“I need ideas for specific moments, like a party tonight or a picnic tomorrow”
“I want to understand why an item suits me and how I can style it with other pieces”
Design Goals
Defining core experience qualities to bridge the business mission and customer needs
Based on the research findings, I defined ‘Immersion’ and ‘Usability’ as two core pillars to guide design revamp. 'Immersion' is the experiential dimension that helps customers empathize with the brand's story and feel a sense of discovery. 'Usability' is the functional dimension, helping customers navigate and understand ideas without friction to fully engage with the inspiring experience.
Collecting Insights for Design
Mixed-research methods to collect qualitative & quantitative insights
Viewing the declining reputation and slow improvement as a two-sided challenge, I designed and led comprehensive research to evaluate both the customer-facing experience and our internal workflows.
Ethnographic research and competitor analysis to collect qualitative insights for the Immersion goal
Usage data analysis and journey mapping to collect quantitative data for the Usability goal
Development
Co-creation with stakeholders
Recognizing the critical role of brand experience and content, I prioritized strategic collaboration with Assortment Curation and Brand Design teams. To facilitate this, I designed custom workshop templates and brand analysis reports to lead co-creation sessions with diverse stakeholders.
Customer research identified customer needs and pain points through interviews and surveys
Journey Analysis diagnosed issues in the customer journey from an expert perspective
Validation
Goal-Driven Validation Approach
I designed and led co-creation sessions with various internal stakeholders, from Assortment Curation to Brand Design.
Measured customer engagement with the dynamic layout through qualitative customer feedback
Validated the usability of the filter redesign through quantitative usage data analysis
Identified low customer engagement with social media content by synthesizing customer feedback and usage data
Key Designs
Inspirational Layout & Shop the Look
Dynamic image and content layout for inspiring experience. 'Shop the Look' offers curated styling ideas to compensate reduced browsing efficiency, seamlessly bridging inspiration with purchasing.
Editorial Contents in PLP
Curated editorial content within the product list provides styling inspiration, elevating the standard browsing journey with engaging brand storytelling.
Swipe-able Image
Enabling swipeable images on the product listing page allows customers to intuitively explore product details with minimal interaction steps.
Filter Redesign
Optimizing the filter UI to surface frequently used options directly upfront, elevating functional usability for a frictionless shopping experience.
Impact
Scaling from business impact to brand strategy
Over 2023, we conducted 12 major A/B tests and launched 5 significant improvements globally on the web and app, achieving notable enhancements in key business metrics.
- Conducted 12 A/B tests and globally released 5 significant improvements for Listing Page UX
- Filter redesign → +4.5% revenue
- Swipe-able image → +4% conversion rate
- Videos in PLP → +1.6% Add-to-Bag (mobile web)
Bridging Insights to the 2023 Online Renewal
The impact of this project did not stop there. By sharing insights and results from the project within the organization, I had the opportunity to connect with H&M's brand team provide insights into H&M's market positioning and customer expectations on H&M as a fashion brand.
This connection became one of the key inspirations for the H&M Online Renewal project in 2023, where I provided insights into the desired customer experience and contributed to the development of the early-stage concept.
This site is built with Figma Site
JAEEUL BAE
WORKS
ABOUT
H&M Product Listing
Translating Brand Vision into Experience Design
I designed the product browsing experience for H&M mobile app's product listing pages to become an "Inspirational Style Destination." Over a year, I developed a comprehensive design strategy and executed end-to-end designs, launching 5 key features globally.
My Role
- Leading initiatives to establish design strategy
- Qualitative & quantitative research
- Executing end-to-end UX design
- Leading co-creation workshop with stakeholders
- Data-driven design validation & iteration
Impact
- Conducted 12 A/B tests and globally released 5 significant improvements for Listing Page UX
- Filter redesign → +4.5% revenue
- Swipe-able image → +4% conversion rate
- Videos in PLP → +1.6% Add-to-Bag (mobile web)
Highlights
Business Mission to Design Goals
Through an in-depth analysis of the customer experience and competitive landscape, I defined two core design qualities essential for the 'Inspirational Style Destination’ experience.
Co-creation with Stakeholders
I designed and led co-creation sessions with various internal stakeholders, from Assortment Curation to Brand Design.
Key Designs for Inspirational Experience
I introduced Dynamic Layouts and immersive media like auto-playing videos, to transform the browsing experience into an engaging journey of discovering styling ideas.
Key Designs for Usability
I revamped the discovery process to minimize customer friction, allowing users to intuitively swipe through product images and easily filter and sort their options.
Goal-Driven Validation Approach
I led the team in adopting a validation strategy that combines qualitative customer feedback and quantitative data analysis, successfully discovering the right design solutions for our business mission.
Read more about the project in detail
Challenge
Translating the business mission into actionable design goals
In 2022, H&M aimed to establish itself as an "Inspirational Style Destination" for its 130M+ digital shoppers. As the product designer for the product listing pages, I translated this business mission into actionable design goals and developed solutions to achieve them.
The previous H&M mobile product listing page, featuring a traditional two-column grid and uniform product presentation.
Approach
Structured approach from business mission to design goals
To translate the business mission into actionable design goals, I analyzed the customer experience and competitive landscape in a structured approach: comparative analysis, competitor analysis, and current customer journey analysis. This process effectively bridged the gap between the overarching business mission and tangible design objectives.
Finding
Redefining Inspiration for H&M Customers
Building on the research insights, I defined 'inspiration' from the customer's perspective. For H&M customers, 'Inspiration' means accessible, affordable fashion ideas that are easy to understand and apply to their daily lives.
Clarity & Utility
“ZARA looks cool, but it’s not inspiring to me because I can’t even tell what they’re actually selling.”
“I just want to see the product details clearly.”
Relatability & Representation
“I love seeing fashion on people like me or people I follow on Instagram.”
“Seeing perfect models posing doesn’t really help me at all”
Contextual Styling & Actionable Ideas
“I need ideas for specific moments, like a party tonight or a picnic tomorrow”
“I want to understand why an item suits me and how I can style it with other pieces”
Design Goals
Defining core experience qualities to bridge the business mission and customer needs
Based on the research findings, I defined ‘Immersion’ and ‘Usability’ as two core pillars to guide design revamp. 'Immersion' is the experiential dimension that helps customers empathize with the brand's story and feel a sense of discovery. 'Usability' is the functional dimension, helping customers navigate and understand ideas without friction to fully engage with the inspiring experience.
Collecting Insights for Design
Mixed-research methods to collect qualitative & quantitative insights
Viewing the declining reputation and slow improvement as a two-sided challenge, I designed and led comprehensive research to evaluate both the customer-facing experience and our internal workflows.
Ethnographic research and competitor analysis to collect qualitative insights for the Immersion goal
Usage data analysis and journey mapping to collect quantitative data for the Usability goal
Development
Co-creation with stakeholders
Recognizing the critical role of brand experience and content, I prioritized strategic collaboration with Assortment Curation and Brand Design teams. To facilitate this, I designed custom workshop templates and brand analysis reports to lead co-creation sessions with diverse stakeholders.
A brand analysis report prepared for cross-functional co-creation sessions
Snapshot from the co-creation workshop
Validation
Goal-Driven Validation Approach
To ensure the design solutions effectively met their intended goals, I implemented a validation strategy specifically tailored to the core UX objectives of each feature. I measured the emotional engagement of 'Inspiration' through qualitative methods, while relying on quantitative data to validate the functional efficiency of 'Usability'.
Measured customer engagement with the dynamic layout through qualitative customer feedback
Validated the usability of the filter redesign through quantitative usage data analysis
Identified low customer engagement with social media content by synthesizing customer feedback and usage data
Key Designs
Inspirational Layout & Shop the Look
Dynamic image and content layout for inspiring experience. 'Shop the Look' offers curated styling ideas to compensate reduced browsing efficiency, seamlessly bridging inspiration with purchasing.
Editorial Contents in PLP
Curated editorial content within the product list provides styling inspiration, elevating the standard browsing journey with engaging brand storytelling.
Swipe-able Image
Enabling swipeable images on the product listing page allows customers to intuitively explore product details with minimal interaction steps.
Filter Redesign
Optimizing the filter UI to surface frequently used options directly upfront, elevating functional usability for a frictionless shopping experience.
Impact
Scaling from business impact to brand strategy
Over 2023, we conducted 12 major A/B tests and launched 5 significant improvements globally on the web and app, achieving notable enhancements in key business metrics.
The impact of this project did not stop there. By sharing insights and results from the project within the organization, I had the opportunity to connect with H&M's brand team provide insights into H&M's market positioning and customer expectations on H&M as a fashion brand.
This connection became one of the key inspirations for the H&M Online Renewal project in 2023, where I provided insights into the desired customer experience and contributed to the development of the early-stage concept.
- Conducted 12 A/B tests and globally released 5 significant improvements for Listing Page UX
- Filter redesign → +4.5% revenue
- Swipe-able image → +4% conversion rate
- Videos in PLP → +1.6% Add-to-Bag (mobile web)
Bridging Insights to the 2023 Online Renewal
The impact of this project did not stop there. By sharing insights and results from the project within the organization, I had the opportunity to connect with H&M's brand team provide insights into H&M's market positioning and customer expectations on H&M as a fashion brand.
This connection became one of the key inspirations for the H&M Online Renewal project in 2023, where I provided insights into the desired customer experience and contributed to the development of the early-stage concept.
This site is built with Figma Site
JAEEUL BAE
WORKS
ABOUT
H&M Product Listing
Translating Brand Vision into Experience Design
I designed the product browsing experience for H&M mobile app's product listing pages to become an "Inspirational Style Destination." Over a year, I developed a comprehensive design strategy and executed end-to-end designs, launching 5 key features globally.
My Role
- Leading initiatives to establish design strategy
- Qualitative & quantitative research
- Executing end-to-end UX design
- Leading co-creation workshop with stakeholders
- Data-driven design validation & iteration
Impact
- Conducted 12 A/B tests and globally released 5 significant improvements for Listing Page UX
- Filter redesign → +4.5% revenue
- Swipe-able image → +4% conversion rate
- Videos in PLP → +1.6% Add-to-Bag (mobile web)
Highlights
Business Mission to Design Goals
Through an in-depth analysis of the customer experience and competitive landscape, I defined two core design qualities essential for the 'Inspirational Style Destination’ experience.
Co-creation with Stakeholders
I designed and led co-creation sessions with various internal stakeholders, from Assortment Curation to Brand Design.
Key Designs for Inspirational Experience
I introduced Dynamic Layouts and immersive media like auto-playing videos, to transform the browsing experience into an engaging journey of discovering styling ideas.
Key Designs for Usability
I revamped the discovery process to minimize customer friction, allowing users to intuitively swipe through product images and easily filter and sort their options.
Goal-Driven Validation Approach
I led the team in adopting a validation strategy that combines qualitative customer feedback and quantitative data analysis, successfully discovering the right design solutions for our business mission.
Read more about the project in detail
Challenge
Translating the business mission into actionable design goals
In 2022, H&M aimed to establish itself as an "Inspirational Style Destination" for its 130M+ digital shoppers. As the product designer for the product listing pages, I translated this business mission into actionable design goals and developed solutions to achieve them.
The previous H&M mobile product listing page, featuring a traditional two-column grid and uniform product presentation.
Approach
Structured approach from business mission to design goals
To translate the business mission into actionable design goals, I analyzed the customer experience and competitive landscape in a structured approach: comparative analysis, competitor analysis, and current customer journey analysis. This process effectively bridged the gap between the overarching business mission and tangible design objectives.
Finding
Redefining Inspiration for H&M Customers
Building on the research insights, I defined 'inspiration' from the customer's perspective. For H&M customers, 'Inspiration' means accessible, affordable fashion ideas that are easy to understand and apply to their daily lives.
Clarity & Utility
“ZARA looks cool, but it’s not inspiring to me because I can’t even tell what they’re actually selling.”
“I just want to see the product details clearly.”
Relatability & Representation
“I love seeing fashion on people like me or people I follow on Instagram.”
“Seeing perfect models posing doesn’t really help me at all”
Contextual Styling & Actionable Ideas
“I need ideas for specific moments, like a party tonight or a picnic tomorrow”
“I want to understand why an item suits me and how I can style it with other pieces”
Design Goals
Defining core experience qualities to bridge the business mission and customer needs
Based on the research findings, I defined ‘Immersion’ and ‘Usability’ as two core pillars to guide design revamp. 'Immersion' is the experiential dimension that helps customers empathize with the brand's story and feel a sense of discovery. 'Usability' is the functional dimension, helping customers navigate and understand ideas without friction to fully engage with the inspiring experience.
Collecting Insights for Design
Mixed-research methods to collect qualitative & quantitative insights
To elevate two distinct dimensions of the user experience, I adopted a mixed-methods research approach to collect both quantitative and qualitative insights. To uncover design opportunities for an inspirational style journey, I leveraged qualitative observation. Complementing this, I utilized quantitative analysis to validate usability pain points and establish a clear improvement plan.Viewing the declining reputation and slow improvement as a two-sided challenge, I designed and led comprehensive research to evaluate both the customer-facing experience and our internal workflows.
Ethnographic research and competitor analysis to collect qualitative insights for the Immersion goal
Usage data analysis and journey mapping to collect quantitative data for the Usability goal
Development
Co-creation with stakeholders
Recognizing the critical role of brand experience and content, I prioritized strategic collaboration with Assortment Curation and Brand Design teams. To facilitate this, I designed custom workshop templates and brand analysis reports to lead co-creation sessions with diverse stakeholders.
Customer research identified customer needs and pain points through interviews and surveys
Journey Analysis diagnosed issues in the customer journey from an expert perspective
Validation
Goal-Driven Validation Approach
To ensure the design solutions effectively met their intended goals, I implemented a validation strategy specifically tailored to the core UX objectives of each feature. I measured the emotional engagement of 'Inspiration' through qualitative methods, while relying on quantitative data to validate the functional efficiency of 'Usability'.
Measured customer engagement with the dynamic layout through qualitative customer feedback
Validated the usability of the filter redesign through quantitative usage data analysis
Identified low customer engagement with social media content by synthesizing customer feedback and usage data
Key Designs
Inspirational Layout
Dynamic image and content layout for inspiring experience. 'Shop the Look' offers curated styling ideas to compensate reduced browsing efficiency, seamlessly bridging inspiration with purchasing.
Editorial Contents in PLP
Curated editorial content within the product list provides styling inspiration, elevating the standard browsing journey with engaging brand storytelling.
Swipe-able Image
Enabling swipeable images on the product listing page allows customers to intuitively explore product details with minimal interaction steps.
Filter Redesign
Optimizing the filter UI to surface frequently used options directly upfront, elevating functional usability for a frictionless shopping experience.
Impact
Scaling from business impact to brand strategy
Over 2023, we conducted 12 major A/B tests and launched 5 significant improvements globally on the web and app, achieving notable enhancements in key business metrics.
- Conducted 12 A/B tests and globally released 5 significant improvements for Listing Page UX
- Filter redesign → +4.5% revenue
- Swipe-able image → +4% conversion rate
- Videos in PLP → +1.6% Add-to-Bag (mobile web)
Bridging Insights to the 2023 Online Renewal
The impact of this project did not stop there. By sharing insights and results from the project within the organization, I had the opportunity to connect with H&M's brand team provide insights into H&M's market positioning and customer expectations on H&M as a fashion brand.
This connection became one of the key inspirations for the H&M Online Renewal project in 2023, where I provided insights into the desired customer experience and contributed to the development of the early-stage concept.
This site is built with Figma Site