Published using Google Docs
H&M Revamp - Final Report
Updated automatically every 5 minutes

Personalizing the H&M AppFile:H&M-Logo.svg - Wikimedia CommonsFile:H&M-Logo.svg - Wikimedia Commons

Executive Summary:

        H&M is facing a massive problem - with so many new clothing styles and new fashion trends, it has become difficult for customers to figure out what to look for and eventually what to purchase. We are leaving out potential revenue by not showing customers products that they want and need. Our current online platforms including H&M.com and the mobile app which serve homogenous experiences to all users with limited recommendations, meaning every customer has to dig through endless rows of clothing items to find the products they are looking for. Additionally, we have been pushing for shoppers to become H&M Members by making an account and getting rewards but we have yet to make use of the treasure trove of information that is the user's past purchases.

The overarching goal of our project is to optimize the online clothes shopping experience for H&M customers and help them discover their individual styles. We plan on completely revamping the layout of the application and website and adding a curated recommendation system that works hand in hand with our additional features such as H&M Personalities and the Dream Closet.

These feature implementations will essentially let us do the shopping for our customers. This will ease the process of finding clothes, getting rid of the need to search and scroll through endless rows of clothing as well as providing users with clothing recommendations tailored to their specific needs. With these new features, users will be able to find exactly what they are looking for, resulting in quicker, easier, and more fashionable shopping while increasing the likelihood of actual clothing purchases and thus maximizing H&M’s revenue.


The Solution:  

We are proposing a UI revamp as well as a tailored recommendation system that prioritizes optimization and customization features for H&M users. These features rely on customer sign-ins for returning customers and cookies for new/potential customers. The platform redesign will increase engagement and excitement around the brand from both new and existing users, and enable them to quickly find clothing that both suits their tastes and is up to date with modern fashion trends.

Curated Recommendation System

While a robust recommendation system is important for any modern e-commerce company, we’d like to develop this beyond the typical organization and create curated recommendations.

This system itself stems from typical recommendation systems. The base structure uses two types of filtering. The first is standard collaborative filtering: H&M would gather data on what users view, like, purchase, etc., and suggest articles of clothing that similar users also viewed/liked/purchased/etc. The second is a modified type of content filtering: H&M would suggest complementary (i.e. not necessarily similar) products that work well with the current/previously viewed products. This is especially evident in the dream closet feature (see below), which is fully based on recommending clothing that pairs well with previously purchased clothing. This second filtering type would be more oriented toward new users since it doesn’t require user information to build these recommendations. These recommendations would manifest themselves beyond just products: as H&M builds its website customization, these would be seen through revamping the details of our sales section, selecting particular H&M personalities, and more.

The added benefit of our system incorporates particular curation. As a fast fashion company, H&M needs to stay at the forefront of fashion trends and incorporate this information into its platform. Our new recommendation system would stay on the forefront through engagement with H&M curators: these H&M curators help retrain machine learning algorithms to stay ahead of trends and provide higher confidence in the proposed pairing recommendations. In implementation, we will be striking a balance between collaborative recommendation systems and curation. With more time, H&M will be able to gather more data and build better recommendations. We also want to note that these better recommendations themselves will act as proof of concept for investing in more curation and fashion insights.

H&M Personalities 

Our H&M Personalities help inspire budding fashionistas through new style and outfit suggestions. We understand that many people may not have fully developed their sense of style yet and would like to explore different options. Thus, our H&M Personalities act as visual suggestions for potential outfit purchases. Ideally, we’d build a collection of H&M Personalities and would present particular models to different users based on their profile information. In the future, we’d also like to integrate this with influencer marketing campaigns, which would recruit influencers as H&M models and capture younger audiences.

The H&M personalities page is structured like a magazine spread: this encourages users to casually explore the different potential outfits that H&M has to offer, as well as how the clothes look together on real people. The less structured nature is intentional, as it forces the user to draw their attention across the whole page and become absorbed within the experience. The relevant clothing items are also positioned conveniently next to the model to easily redirect users to purchase the clothing they’re interested in.

Your Dream Closet

The Dream Closet feature offers a unique way for users to build their own capsule closet while becoming more engaged within the H&M platform. While it’s not difficult to purchase clothes, it can be difficult to know what to purchase. With hundreds of different articles of clothing, it is difficult to understand what works well with each individual piece. The Dream Closet allows users to save items they are interested in and get recommended pairings to those respective items.

The Dream Closet is designed to reflect a closet within its structure; sections are sorted by article of clothing and are determined through our internal recommendation system, which is based on previous clothes viewed, liked, or purchased. It allows H&M to resurface clothing that users were already interested in while making it an engaging exploration experience. The articles of clothing themselves also have recommended pairings with previous purchases, which helps users understand how these recommendations would pair with clothing they’ve already purchased. This allows users to gain more insight, which makes it easier to build a cohesive closet while simultaneously creating more engagement and value out of our recommended clothing.

Customized Sales Section

For users who are on a budget, finding clothing that is both low-priced and fashionable can become difficult. The Customized Sales Section provides users with items that are on sale as well as clothing recommendations specific to both their clothing tastes and budget. This feature leverages our new recommendation system to allow users to easily parse through historically overwhelming and uninteresting sales sections.

The new Sales section is sorted into different sections, which makes it more digestible as a page. The first section focuses on “Bold Chique Styles”; this is designed to increase customer value through expanding user interests and encouraging cheaper purchases that wouldn’t usually be made at full price. The other sections are sorted by general styles and are also based on the recommendation system mentioned previously.

Redesigned UI

Having a wide variety of clothing options is essential for any clothing shopper. However, too many options can easily overwhelm the user, causing decision paralysis and actually making it harder for users to pick and purchase items as they mindlessly scroll through endless rows of clothing.

The overall UI and layout of the pages have been revamped to be much simpler and easier to navigate through. We have modified the UI to be less cluttered by displaying fewer items on pages like the Home Page so as to not overwhelm the user and make it as easy as possible for them to find what they are looking for. The new homepage also replaces some of the less useful sections and replaces it with more engaging features, like our clothing pairing recommendation system.

The Impact:

Ultimately, our changes aim to optimize the shopping experience for H&M customers, enabling users to quickly and easily find exactly what they are looking for. By providing curated recommendations and simplifying the search process, H&M can decrease churn and capture more of the market. In addition, our H&M Personalities and Dream Closet features will build stronger engagement with users and more enjoyment with the H&M online platform. New users will be encouraged to sign up and reap the benefits of these features as well as our recommendation system that will continue to improve as the user base grows. Especially when coupled with influencer marketing, our H&M personalities will prove useful and entertaining for new consumers. Existing users will have better recommendation systems, which will encourage more frequent purchases. This increases the potential monetization of returning users through higher conversion rates. With these changes, we hope to be the go-to app for clothes shoppers looking for quicker, easier, and more fashionable shopping.


Exhibit A - User Stories:

In designing our prototype, we identified 10 different user stories to accurately capture the ambitions of our diverse population of shoppers at H&M.

User Story #1:  “As a busy college student, I want to reorder clothing similar to what I’ve bought in the past so I can quickly find clothing I know I like, while still having some variety.”

User Story #2:  “As a busy college student, I want to be recommended trendy clothing suitable for me so that I can save time while still looking fashionable.”

User Story #3:  “As a person trying to branch out into fashion, I want to find new styles of clothes so I can develop my own style and not look like my mom is dressing me!”

User Story #4:  “As a person taking fashion risks, I want to be able to return unused clothes and find unique garments so that I can better express myself through great outfits.”

User Story #5:  “As a runway model, I want to buy more designer H&M outfits so that I can show them off to the world and continue to influence my followers and their closets.”

User Story #6:  “As a TikTok influencer, I want to earn some extra cash so that I can continue to buy more H&M wear for my personal image and inspire social media viewers.”

User Story #7:  “As a reluctant shopper, I want to be able to purchase items very similar to my previous purchases so that I don’t have to waste time scrolling aimlessly.”

User Story #8:  “As a cautious purchaser, I want to be able to see a select few affordable items that align with my past shopping history so I can easily buy clothes without stressing.”

User Story #9:  “As a discount lover, I want to receive customized sales updates so that I can sort through fashion sales easier. It takes a lot of time to find diamonds in the rough.”

User Story #10:  “As a frugal customer, I want to know when clothes I like go on sale so that I can save money. Since I usually make one large purchase to save on shipping, I want to time my purchase with upcoming H&M sales.”

Exhibit B - Customer Personas:  

We have also created 5 different personas to categorize our targeted customers based on their unique frustrations and goals of clothes shopping.

Exhibit C - Accessing the Prototype:

The prototype of our new H&M website was designed using Figma. You can access the file by clicking here! The file is “View Only” and can only be edited by those who collaborated on the prototype design. However, clicking the triangular “Play Button” in the upper right-hand corner will allow the viewer to move around the prototype and explore all of the new features that we have designed for our website.

Note: If the link doesn’t work, copy the URL below and paste it into your browser:

figma.com/file/JqJ2NyNw5yXBHduUBUnjbH/Team-6%2C-Assignment-3-Prototype?node-id=14-11&t=UBVTZ6RGo4rzmDrH-0

Exhibit D - Go to Market Presentation:  

See the attached PDF of the Slide Deck on Canvas!