H&M Redesign

THE CHALLENGE:

Redesigning the website by keeping the following things in mind:

Changing visual language
Improving the user experience
Increasing product engagement
Designing through human empathy(HCD)

I chose H&M because it is one of my favourite fashion brands. Although H&M is expanding its retail stores throughout India, it is still lacking in an online shopping experience.

I faced multiple issues when I used the website. Though I am not affiliated with H&M, I wanted to figure out if other users were having similar problems.

It led me to conduct usability tests, discover several pain points and redesign a part of the experience.

UNDERSTANDING H&M AND THE USER

H & M, Hennes & Mauritz is a Swedish multinational clothing retail company. It has a global presence and is known for its fast fashion and high fashion at lower prices.
The person who is wearing the clothes doesn’t necessarily come under target audience, it is actually who is more likely to buy them.
H&M’s target audience in India will be upper middle class.
Age: late teens to mid 30’s, mostly women.
This group is looking for affordable fashion and typically shop for more than one store. These customers are not brand loyal, they shop from more than one store.
Fashionable consumers who see shopping as social activity providing pleasure in daily lives.

JOB STORIES

SITUATION
MOTIVATION
OUTCOME

When I shop online for clothes, I want to be able to quickly update my wardrobe so that I can look fashionable all the time.

When I am searching a particular item online that I saw in store I want to find it easily and want it to be available in sizes and colors that I want in the store so that I have access to all merchandise.

Whenever I am not able to visit the store conveniently, I want access to H&M merchandise online so that I can buy them without going to the mall.

USABILITY TESTING

For the better understanding of the product, I tested the website with 10 frequent online shoppers. The age of the users ranged between 19-45 yrs old, including both male and female. Each user was asked to imagine he or she was in a scenario and to perform a series of tasks such as:

You need a black Dress/T-Shirt for your next party under Rs 2000. How will you find one?
Your friend asked you to help her find a good jacket for her party. She asked you to send her 3 options as well as your choice among them. How would you do that.?
Find an article for inspiration for hairstyles for your party.

ATOMIC DESIGN

A unified design system is essential for building better and faster. At this phase of the iteration, I introduced a methodology called ‘ATOMIC DESIGN’ by Brad Frost in my project

For building a new visual language for H&M, Atomic Design played a major role, in building the interface from the smallest building block (Atoms) and then further using those basic elements to build up to the next level.

The visual language should be unified and universal. Each piece is part of a greater whole and should contribute positively to the system at scale. H&M is multinational clothing retail company, its products and visual language should be welcoming and accessible to a wide global community.

I have to admit, it was quite a challenge and the concept of atomic design was quite new to me, so I perceived it in a way I could at that point in time.