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. The efforts resulted in +4.5% revenue, +4% conversion rate and +1.6% add-to-bag counts.
Application
H&M Mobile Application
H&M Mobile Application
Role
Product designer
Product designer
Contribution
Project coordination, UX/UI design, Design testing
Project coordination, UX/UI design, Design testing
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.
Design Goals: Inspiration & Usability
Inspiration
• More ideas and inspiration
• Brand awareness
• Customer engagement
• Brand awareness
• Customer engagement
Usability
• Help customers find styles
• Improved findability
• Less customer friction
• Improved findability
• Less customer friction
Establishing a design goal aligned with the business mission was crucial for the success of this year-long project. I gathered insights through research to understand what constitutes an inspiring experience for customers and to identify design opportunities.
Based on the research and team discussions, I defined two key qualities of the customer experience - Inspiration & Usability - and led the project to aim these qualities to create a inspiring customer journey.
To gather insights for establishing the design goals, I conducted three types of analysis: comparative analysis, competitor analysis, and current customer journey analysis. These efforts enabled the team to identify key aspects of the customer experience that drive inspiration and uncover existing gaps.
The research revealed that customers look to H&M for a comfortable presentation of diverse fashion ideas,
in contrast to competitors who focus on showcasing distinctive styles in expressive yet less accessible ways.
in contrast to competitors who focus on showcasing distinctive styles in expressive yet less accessible ways.
Building on this insight, I directed the ideation process for Product Listing in two key directions:
Inspiration: Creating experience that reflects the commitment of the H&M brand to style inspiration
Usability: Providing customers with a comfortable way to discover relevant fashion ideas
Key Designs
Dynamic Layout & Shop the Look
It makes browsing the list of items more engaging, breaking away from the monotony of repetitive grids. It also provides customers with outfit ideas, allowing them to broaden their exploration and expand their fashion tastes.
Swipe-able Image & Auto-playing Video
These ideas not only make the browsing experience more dynamic but also enhance usability by helping customers understand fashion styles in a faster and more engaging way.
Improved filter & sort
Filter & sort also have been improved to help customers find the style inspiration they want. This aligns with the mission of becoming a style destination where inspiration is effortlessly discovered.
Approach
As the two design goals—inspiration and usability—targeted different experiential aspects, so I designed and used different approaches to explore opportunities and validate ideas for each, considering the nature of each experience: Inspiration is seen as more subjective and hard to measure, while Usability is more straightforward and easy to evaluate.
Finding Opportunities: Quantitative & Qualitative Methods
Inspiration: Qualitative exploration
Exploration for design opportunities
Insights for contents and experience
Usability: Quantitative analysis
Identifying points of improvements
Collecting explicit customer needs & pain points
Validation: using both qualitative & quantitative methods
The validation of ideas was conducted from two perspectives.Ideas for Inspiration were assessed not only through quantitative analysis but also through qualitative analysis to understand their impact on customers' emotional experiences for iteration process.
Ideas were validated through quantitative and qualitative analysis during iteration process, considering expected customer values of ideas.
This approach allowed the team to improve ideas instead of discarding right away from qualitative performance measure (ex. Dynamic Layout idea).
Key Impact
Filter redesign → +4.5% revenue (apps)
Swipe-able image → +4% conversion rate (apps)
Videos in PLP → +1.6% Add-to-Bag (mobile web)
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.
H&M Denmark Mobile web renewal launched 2023