top of page
H&M Website Redesign

 A delightful shopping journey that incorporates features for an efficient user experience

Home.png

PROJECT SUMMARY

H&M is the second-largest clothing retailer in the world and is renowned for its fast-fashion clothing. However, its online platform still looks outdated when compared to its competitors, hence catering to only 25% of its total business.

In this project, H&m's website was re-designed as an academic project to understand the pain points of the users and to improve the overall experience.

Timeline: 4 weeks - 80 hours  

Skills/Tools Used: Secondary research, User research, Sketching, Sketch, InVision & Figma

Role: End-to-end UX/UI Designer

 

Responsibilities: User Research, Concept ideation, User flows, Visual design, Prototyping, User Testing, Design iterations, and Quality assurance

PROBLEM

Frustrating experience leading to High bounce rate 

01

UX performance is mediocre 

H&M’s website is visually outdated with poor user experience as compared to peers, leading to a ~30% bounce rate

02

More focus on Brick-mortar than e-commerce

Only 25% of their total revenues comes from Ecommerce, as opposed to peers that typically have ~50%

03

Unintuitive product categorization

A wide range of products with unintuitive categorization and a non-existent filtering system

METHODOLOGY

USER RESEARCH

User Surveys: Quantitative and qualitative sets of questions were shared with 32 users in order to gather feedback.

User Interview: I conducted individual virtual interviews with 4 participants to understand customer behaviors, shopping priorities and how they interact with the product.

USER INTERVIEW SCRIPT

What Users said?

“I am frustrated with the number of pages I have to transition from product selection to checkout"

"Extensive merchandise is overwhelming and I don't see a way to filter my search"

​“I see so many good clothes but I don't know how can I actually Style them "

"Home page consists of promotions and random categories, I don't understand where to go from there "

Understand

COMPETITOR'S ANALYSIS

Key competitors compared to understand the current e-commerce trends: Zara, Asos and GAP 

GAP recently revamped its Omnichannel to incorporate user-friendly features like Quick add, Outfit Styling, and Comprehensive Filtering

ASOS seconds the experience with a well laid Home Page, Accesibilty incorporation, and a Snap and Shop Feature (Upload inspiration to find outfit)

competitors-features.png
Persona 2.png

PERSONA

The Youngsters
  • Young Millenials and Gen Z going to college or new jobs

  • Hard to find stylish clothing within the budget

  • Prefers to shop online but cannot spend a lot of time searching

  • Likes to see clothing on customers to understand fits and get styling ideas

Persona 1.png
Define

SOLUTION

Translating insights into features

I extracted the key pain points and user needs to develop potential core features for the product.

PAIN POINTS

Unintuitive Landing page with a stack of promotions 

Overwhelming merchandise to look and select from 

Hard to find the latest trends and Inspirations for Styling outfits

Multiple transition pages from product selection to checkout

FEATURES

Home page icon.png

Functional Landing Page

Prioritize season-appropriate products, promotion campaigns, Sustainability, and trendy Inspirations

Comprehensive Filtering

Product filtering to help users quickly sort through product collection to zone in on products they need.

Styling icon.png

Style With

Create outfits by mix-matching ideas from the Style With options presented under each product

Quick Add

Quick add ensures that shoppers can quickly view details, colors, select size and add to Cart without  opening multiple pages

SKETCHES

Solutions and layouts were sketched out to solve users’ pain points and incorporate above mentioned features. Some of the sketches I moved forward with are shown here. 

Home Page

Sales and Campaign banner slides

New in items category based

Inspirational and trending items 

Product Page

Size Info is legible and not in a drop-down menu

Outfits styling ideas with Quick add option 

Category Page

IMG_4520.heic

Product category quick tabs on top

Quick Add opens while hovering

Colors and Sizes availability displays without an extra click

Ideate
DESIGN SYSTEM

After sketching a few main web pages, I moved on to identify H&M's design system by inspecting their website. It is important to maintain the brand identity and follow brand guidelines since the idea was to improve the user experience and not transform the look.

WIREFRAMES

Using the sketches of the website from ideation I created low-fidelity wireframes as a blueprint for H&M website. This allowed me to experiment with layouts and visual hierarchy. Some of the main screens are shown below.

Home Page
Product Info
Product page

PROTOTYPE

LANDING PAGE

The current landing page has an unintuitive layout with promotional banners and header/footer that are not optimized for functionality. I focused on making the Home Page visually appealing, intuitive, and organized with well-laid out sections. 

Home Page - .png

BEFORE

A compact and minimalistic header

Splash screen with sesasonal collections and Sale

New collections for Men and Women with quick shop link

Concious and Sustainable exclusives promotion

Style inspirations for seasonal trends

Shop column was repetitive and hence replaced with Account info

Minimalistic compact footer

AFTER

1/4
1/5

Become a member in single step

Prototype
CATEGORY PAGE

For this page, I wasn't looking to make a transformation but to add features that could make the shopping experience fast and seamless.

 

Features incorporated:

  1. Quick Add: View available sizes and add to the cart, minimizing the number of clicks to complete the purchase

  2. Color Selection: To avoid opening a new page for color options

  3. Disappearing Filter Tab: Provide a comprehensive filtering system to easily shortlist from the extensive merchandise and give more focus on the Product

BEFORE

2f08544628284b9ba78fe3748e42c1f9-0001.jpg

AFTER

Product page.png

Sort & Filter slides in and back, giving more space to the products

Dress types clickable tabs for easy filtering

VIEW COLORS

View all color options in the same window

QUICK ADD

A Quick Add option with available sizes preview, preventing a new window to open

PRODUCT PAGE

I liked that H&M incorporated "Styled by you" (Customer picture of their styles), this certainly marks a step toward providing a more realistic fitting for users.

Further, I added a “Style with" feature i.e., various styling ideas for each product with a Quick add. This feature can potentially drive sales, as it helps promote more products sold by H&M.

Additionally,  the product page layout was improvised by moving product information together on the right.  

BEFORE

0001.jpg

AFTER

ON HOVER

Sizes Availability gets more visibility than a drop-down menu before

Create Outfits feature with quick add options

USABILITY TEST

Now that I was ready with a prototype, it was time to test the usability. I invited 3 users who were previously interviewed on the original website. The testing was done remotely via Zoom video calls and users were given access to the screen so I could observe their actions firsthand. 

Objectives for usability testing:

  • Test if the website's user flow can be completed successfully.

  • Find any areas of confusion and difficulties while using the website.

  • See where the website can be improved and get some other ideas on both website design and user experience. 

DSC_0587.JPG

YOCHITA HARINI

Production Manager

"I love the Home page and like the idea of giving the inspirational section, now it's easy to see what's new and trending."

79130597_10216055261397553_3109984569198

KATHERINE NUZZI

Merchandiser

"I'm an online shopping addict but still love express shopping, these Quick add features are amazing. They make my shopping experience less frustrating."

13891813_10154480697987922_4334294489425

ANDY BISAU

Sales Associate

"I always had a hard time making combinations for myself, the Style with feature is a great add on for people like me."

Test
LEARNING AND OUTCOMES

All users interviewed:

  • Indicated a better user experience on par with peer competitors in the industry
  • Suggested that they now prefer using the website for shopping as opposed to going in-store

  • Indicated that it was easier and quicker to complete a purchase than it was before

 

There were numerous changes and features I wanted to include e.g., a snap and shop feature where a user could upload a picture and search for articles of clothing that resembled the uploaded picture. However, given the time constraints, I decided to not boil the ocean and instead focus on the features that would drive more sales. 

Overall, I’m glad to have received a very positive response from my Usability testing indicating that my project goal has been met (i.e., to make the shopping experience fast and intuitive ). Additionally, I’m also delighted that most of the early hypothesis and experience-driven features were successfully incorporated.

NEXT STEPS

Because of the timeframe of the project, I did not implement all features I had originally planned. Hence, the following are some considerations for future:

• Completing the check out process

• Updating the Product drop-down menu

• Adding accessibility features

• Adding Snap and Shop feature

REFLECTIONS

I enjoyed adopting the design thinking process, especially researching, prototyping and testing. I learnt to use different research methodologies as per different phases (i.e., generative, evaluative). Further, I also learnt how to iterate on the prototype after user testing. 

Looking back on this project, it seems like such a simple design. However in the online business, the little details could sometimes be absolutely crucial to generate higher sales and reduce the bounce rate.

bottom of page