H&M

 
 

At-A-Glance

H&M counts more than 130 million digital members, with an increasing number of customers frequenting its website and mobile app each day to make purchases from H&M's fashion and lifestyle selections.

The company endeavored to give customers shoppable inspiration to explore their style and the products they love by amplifying user-generated content (UGC). This feature entitled "Style by You" in the Product Detail Page (PDP) serves as a creative platform for H&M customers to showcase their unique styles and facilitating the discovery of relevant and readily shoppable inspirations for other H&M customers.

 

My Role

Product Designer

 

Team

Product Owner, Data Analyst, Business Expert, 3 Front-end Engineers, 2 Backend Engineers, AEM Engineer, iOS Engineer, Android Engineer, Scrum Master, QA Tester

 

Stakeholders

Business Units (the departments of Women, Men, Kids & Baby, Home, Move, and Beauty), Brand Development, Digital Asset Handling, Product Listing Page, Stylestory, external vendor for UGC platform

 
 

Timeline

June - December 2022

 

Tools

 
 
 
 

Please be informed that certain details in my portfolio have been withheld to adhere to company policies pertaining the protection of confidential and proprietary information. Feel free to contact me if you would like to learn more about my contributions to this project.

 
 
 

Problem Context

H&M's e-commerce platform was facing several challenges that are hindering its ability to provide an engaging and inspiring shopping experience for customers. These challenges include a lack of authentic product experiences and interactive elements that presumably contributed to a lower-than-desired conversion rate.

 

  • Absence of Authentic Product Experiences

    H&M's digital platform struggle to provide authentic product experiences that is inspiring to the customers. While traditional product descriptions and images serve a purpose, they may not fully capture the real-life usage and experiences of H&M's products.

  • Lack of Interactive Elements

    Back in the days, H&M's digital platform lacked interactive features and social elements that are essential for engaging customers and fostering a sense of community.

 

User Needs

Through conducting several rounds of user interviews, competitive analysis, synthesizing user feedback, analyzing data, and leveraging tools, I gathered valuable research insights about the challenges that H&M customers encountered while browsing for products and finding authentic inspirations. Below are some of the significant findings that help me understand the customer needs and some of the things that are missing in the online shopping experience.

 

Research Findings

  1. Customers trust peer recommendations and authentic content over conventional product images and information.

  2. Lack of images from real customers poses a challenge for potential buyers, as they struggle to visualize how the product will appear on themselves. Consequently, this impacts their confidence in making a purchasing decision.

  3. Customers seek real-life examples of how the product looks when worn and styled with other items.

 

Referencing one of the research participants:

“I would want to see more everyday people showing off their fashion styles as opposed to influencers. Would also like if the style inspirations were personalized for me — like similar body shape, similar to what I bought or have in my closet.”​

- PW, Gen Z UK, usability test​
 

These findings shows that the customers are eager for authenticity. They have a strong desire to witness how everyday individuals wear and style H&M products. It became evident that H&M needs to find a solution that can serve as a powerful form of social proof, mirroring authentic recommendations and providing genuine, real-life experiences with H&M products.

 

Ideation & Proposed Solution

In devising a solution to cater to user needs based on the research insights, I facilitated a brainstorm workshop with my team and stakeholders to harness collective creativity and ensure that the proposed solution resonated with not only customer preferences but also H&M's brand values. Here's how the brainstorm workshop contributed to the development of the proposed solution:

 

  • Visual Content

    We recognized the potential of visual content provided by actual customers in showcasing H&M products in real-life contexts. By allowing users to upload and share photos/videos of themselves wearing H&M products, we envisioned a more engaging and dynamic shopping experience that resonated with the brand's fashion-forward identity.

  • Social Sharing

    We brainstormed strategies to encourage customers to share their H&M experiences on social media platforms. By devising exposure and social proof elements, we envisioned a viral effect that would amplify H&M's brand presence and deepen customer engagement.

  • UGC Curation

    We also discussed the challenges and opportunities associated with curating user-generated content effectively. By exploring the use of algorithms and moderation tools, we identified strategies to showcase the most relevant and helpful UGC while maintaining the integrity of H&M's brand image.

 

Design System

Components

During the project, H&M was concurrently developing components for our Design System library. As a result, I conducted research and design tasks to craft new components, not only for the UGC features but also for the Product Detail Page within the H&M Group's design system. These components, showcased in the image below, have been shared to the design and front-end community, presenting modern and adaptable designs that prioritize accessibility.

 
 

I conducted a comprehensive visual audit for PDP, addressing pattern inconsistencies and prioritizing accessibility in both design and development. I carefully curated the visual aspects of these components and patterns, weaving them harmoniously with design tokens to maintain an elegant, enjoyable, and stylish aesthetic consistent with the H&M brand.

Documentation

In addition to my design work, I wrote comprehensive documentation, which included usage guidelines and best practices that placed a strong emphasis on accessibility considerations. This documentation was created with the goal of facilitating clear comprehension and ease of use for both designers and developers.

 
Design System Documentation
 

Close collaboration with Brand team

Moreover, I proactively engaged with stakeholders through workshops and meetings for better alignment, e.g., with the Brand Development team, and effectively communicated the value of the Design System throughout the entire product development process.

As part of my commitment to continuous improvement, I collected ongoing feedback to enhance both the visual and functional aspects of the components, always keeping accessibility at the forefront of my efforts.

 

Impact

After several usability testings, A/B testings and iterations, we introduced the feature to the market in UK and Italy in the middle of Q4 2022 where customers had the opportunity to access the UGC directly from the Product Detail Page.

 
 

In addition to receiving favorable feedback from customers during qualitative usability testing at various stages of the design process, the data gathered post-launch also showed promising results.

 

↑ 63%

Cart-to-Detail Rates

This number suggests that UGC played a pivotal role in enticing customers to click on PDP pages.

↑ 19%

Conversion Rates

This is an increase in total product conversions compare to an average PDP sessions.

86%

Engagement Rate

The customers are more actively interacting with UGC and this can lead to better product visibility.

 
 
 
 
 

Recognition

ContentSquare annually awards the Digital Experience Awards to recognize excellence in digital engagement. In 2022, our UGC feature received the award for the "Best Mobile App Experience" category. It's rewarding to see that our efforts and commitment to delivering a distinctive and engaging digital experience have set our app apart and brought positive impacts to our customers and the business.

 

H&M Group posted an announcement on its LinkedIn platform pertaining to the accolade we received in the Digital Experience Award 2022.

 
 

You may also like:

  • Placing employee wellbeing as the main priority through a mental health app.

    Bluecall

  • Helping dreams to come true for young adults through simplifying their finances.

    FRINANS

  • Undertaking a self-driven upskilling project in Frontend Development to enhance collaboration.

    FRONT-END