H&M Project Overview

For this Project, I chose to redesign the desktop of the H&M brand which is a global fashion retailer that sells clothing and accessories that are fashionable and affordable. The goal was to make it easier to use without sacrificing the aesthetics.

Research1

I started looking at H&M and other similar brands to see what I can use for inspiration or get rid of. I really like how organized Ricki’s navigation is for their clothing because it helps the user have an easier time finding the certain type of clothing that they want to take a look at.

Screenshot of Ricki’s website navigation section Screenshot of H&M website navigation section

Research2

I also liked how Ricki’s had the filter options right next to the clothing so that you aren't required to go to a different type of page because it takes up more of your time to open the filter and then close it if you want to continue to scroll through the clothing.

Screenshot of Ricki’s website filter options beside clothing items Screenshot of H&M website filter options requiring a new page

User Persona

My target audience consists of busy young adults who prioritize efficiency. To represent them, I created Gloria Allen, a career-driven individual with limited time for shopping. She prefers a fast, seamless online experience, which is where the H&M redesign comes in—to streamline her shopping process and make transactions quick and hassle-free.

User persona for Gloria Allen, a career-driven individual shopping online efficiently

User Flow1

I created my version of the H&M User Flow and saw some issues with the old one. For example, the drop-down clothing menu required you to do 2 actions to get to the result which is kind of weird when you go to a clothing menu you expect the clothing options to be immediately there.

H&M original user flow diagram showing multiple steps to navigate clothing menu Revised user flow diagram simplifying navigation for H&M’s clothing menu

User Flow2

For the filters for H&M you need to go to a different type of page in order to access the filter section, but for my user flow I decided to get rid of that extra page and make the filter section easily accessible to you, even as you are scrolling through the clothing.

H&M original filter user flow requiring a separate page Revised user flow integrating filter options on the same shopping page

User Flow3

Also, when it comes to purchasing something on the clothing page, there was no option to immediately buy something right now, you could only add something to your bag which would take time to load and then you could go to the checkout. In my version, you can do both of those things, you can add something to your bag if you are not interested in buying, but you can also buy something right now without wasting your time.

H&M original checkout user flow requiring adding items to bag first Revised user flow allowing instant purchase or adding to bag

Final Result

I completed the final prototype and accomplished what I set out to do, which was to make the site more efficient and simpler to use. Below is the link to the desktop version and also the H&M user flow and my version of the H&M user flow.

Mockup of H&M desktop website redesign showing homepage Mockup of H&M desktop website redesign showcasing clothing section

Desktop:

Try it out now!

H&M's User Flow:

Open

My User Flow:

Open