Case Study UI/UX Redesign H&M App
Introduction
Hello Everyone! I am Tirtha Dewangca Isamara and I am taking my first steps in the UI UX Designer. I am very interested in learning about design and also have a passion for creating creative ideas. I am seeking an opportunity to gain more knowledge especially in the field of UI UX Design.
Overview
In the current era especially during the pandemic, many people choose to buy things online. H&M is one of several applications that provide online shopping features by selling their fashion products. Also, you can get instant updates, track your orders, use your own photos to find similar stock items with this application.
Role: UI/UX Designer
My Roles: Research, IDI, Affinity Diagram, Personas, Empathy Mapping, User Journey Map, User Flow, IA, Wireframes, Mockup, Usability Testing
Duration: 1 Month
Problem Statement
I found a problem about User Experience from user reviews, it’s through the app store or the play store. The problem includes:
1. “Unfriendly use!!!!!! I wanna back to the previous page to see the product but it’s always back to the main page. It’s a waste of my time. Should immediately improve!!!!” By Monitira Chantarat. Juli 3rd, 2021 at App Store
2. “When I click my cart, it always directs me to edit personal information” By Putri Rahmawaty. August 7th, 2021 at App store
3. “Most products isn’t available but you keep the products shown on the page” By Adibonz. August 30th, 2021 at App Store
Design Process
To make this application I applied Design Thinking. I’ll focus on the five-stage Design Thinking. The five stages of Design Thinking, are as follow: Empathize, Define (the problem), Ideate, Design, and Test.
1. Empathize
Background
H&M has many users where some of them have problems about User Experience. I as a UI UX Designer want to validate what difficulties the user is experiencing and how to provide solutions.
Objective
- Understanding user’s habits when using the H&M application
- Knowing users needs and goals
- Understanding the user's pain points when using the H&M application
- Validate what features users need
Methodology
Qualitative-1 on 1 Interview
Competitive Analysis
Sample Specification
User Sample
- Male or Female
- Age 18–32
- H&M app users who have used it for the past year
Sample Structure
5 Respondents
Key Information Area
- Name
- Age
- Gender
- Profession
Qualitative Research (Question Guide)
- With whom I speak?
- How old are you?
- What is your profession now?
- Have you ever used an H&M application?
- What is your goal in using a fashion store application?
- Does the fashion store application facilitate your shopping activities?
- How often do you use fashion store apps?
- When do you use the H&M app?
- Can you explain how you used the H&M app from start to finish?
- How do you feel when you use the H&M app?
- What do you think is good about this app?
- What difficulties did you experience when using the H&M app?
- What are your suggestions for improvement in this application?
Competitive Analysis
Competitive analysis is strategic management is an assessment of the strengths and weaknesses of current and potential competitors.
2. Define
In define stage, I put together the information I have from the interview during the empathize stage. I’ll analyze the observations and synthesize them in order to define the core problems.
Affinity Diagram
Affinity Diagram is a method to enable users to collect huge amounts of data and then organize this data in relevant groups.
User Persona
A Persona is a fictional character created in representing a user type that might use an H&M application.
Empathy Map
An empathy map is a visualization tool used to articulate knows about a user.
User Journey Map
A user journey is a path a user may take to reach their goal when using an H&M app. Beginning with the initial touchpoint and moving forward through the complete process until the final payment.
Problems
Based on the analysis I got from research using Affinity Diagram and User Journey Map, I conclude that there are 3 main problems experienced by users, which are:
- Users can only search on the home page
- Users can’t tell the difference between the model tab and the product tab
- Users are annoyed with the back button that always leads to the home page.
Solutions
From the problems stated above. I have solutions, which are:
- Make the search feature available on the explore page, so users can look at the item they want easier.
- Make the model tab and the product tab removed
- Create a new prototype for usability testing with an updated system that makes it easier for users to control the application.
3. Ideate
User Flow
A user flow is a route map for the users to navigate from entry point to endpoint in order to complete a task in the user interface.
Design System
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
Wireframe
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
UI Design
1. Homepage
On the homepage page, it is improved so that the banner is neater and more organized with the banner displayed according to the gender that the user chooses. The top banner is a banner for new products followed by discount products and other special banners.
2. Item Page & Search
The item page is improved by removing the separate product tab and model tab because according to the user it is very unhelpful if the products displayed are the same. Selected products are also separated by gender selected on the previous homepage. The search column that was previously a user complaint has also been displayed on the homepage to make it easier for users to find the items they want to find.
3. Item Selected & Product Detail
The item selected & product detail page are improved so that users could distinguish between the ‘read only’ text and the ‘clickable’ text.
4. Categories
Create a new page with a category title, the goal is to make it easier for users when looking for categories that have been separated according to the selected gender.
5. Shopping Cart
The shopping cart page is improved by tidying up the previous design with additional user interactions that make it easier for users to understand the contents of this page.
4. Prototype
I use Figma to make a prototype. This prototype is also a solution to the problem of users who complain about the user experience they experience. Click Link Down Below…
5. Testing
After redesigning the application, I did testing to test the design application using usability testing. The test was carried out on 5 people using Figma prototype.
You can see it in more detail below.
https://tirthadewangca13.medium.com/usability-testing-report-h-m-application-redesign-7445bea4a2dd
6. Conclusion
From all the processes that have been carried out until the final process, it can be concluded that the user can easily understand the new user interface, the user feels that the experience of using the application can be easier than the user experience of the previous application. The information presented in the redesign also helps the user to solve the problem quickly so that it does not require the user to think.
Thanks for reading my case study! If you can provide criticism or suggestions about our case studies, we will be very grateful. You can reach me on LinkedIn.
