H&M Website Redesign
A delightful shopping journey that incorporates features for an efficient user experience
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 "
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)
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
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
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.
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
Product category quick tabs on top
Quick Add opens while hovering
Colors and Sizes availability displays without an extra click
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.
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.
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
Become a member in single step
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:
-
Quick Add: View available sizes and add to the cart, minimizing the number of clicks to complete the purchase
-
Color Selection: To avoid opening a new page for color options
-
Disappearing Filter Tab: Provide a comprehensive filtering system to easily shortlist from the extensive merchandise and give more focus on the Product
BEFORE
AFTER
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
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.
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."
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."
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."
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.