Redesign H&M Mobile App — a UX Case Study
--
Due to the current Covid-19 pandemic, the impact is huge, so I decided to buy everything online, including the clothes I wear and last week I intended to buy a hoodie on H&M using the mobile app, to make it easier for shoppers and very effective in this period of time. This is what some people are prohibited from leaving the house or traveling
About H&M
H&M is a store that presents a variety of fashion which has hundreds of outlets in the world, including in Indonesia which has many big malls in big cities, it is very easy to find the store because H&M has a store in every mall that makes it easy for customers to get their needs.
one of the good brands that has a mobile app for its product, the H&M mobile application has been accessible in Thailand for a long time and in Indonesia, which was recently added for purchases via the mobile application.
Hypothesis
After I found out that the H&M mobile app was accessible in Indonesia, I installed it to buy the products I wanted and needed. But when I finished installing and opening I found a problem and made me confused about using it, not to mention the very slow system process. The following are the results of my application testing;
- I installed this H&M mobile app because it has good news, namely; it can be accessed in the country I currently live in Indonesia. but the reality is different, I cannot change the location selection of Indonesia, there is only one country, namely Thailand. If it should have been accessible to countries other than, such as Indonesia or other countries, there is a feature for selecting or changing country locations and the price given in the currency of the country of choice.
- When opening the home page for the first time, I was confused by how the page was filled with product image categories without displaying product photos from each category. I hypothesize to create a new feature page by moving this homepage to a category page and changing the layout of the home page to a product product view.
- On the bottom navbar I find it strange, because of the unusual settings like the account page position in the middle and the dot bar page in the right corner, if all the settings are placed in a universal place for all users it will really help to facilitate fast switching, by incorporating the dot page feature bar into the account page, and move the position of the account page to the right corner of the screen, and replace the position of the account page in the bottom navbar with a new feature based on my hypothesis above regarding; category page
Objectives
My main goal is that I want to offer a better and better shopping experience so that users are comfortable using this H&M mobile app to continue shopping. I also made a case study goal that could support my main goal :
- Find out how users use this application, especially to view or select products and shop with the H&M mobile app
- Perform hypothesis testing and Support my hypothesis with data.
- Find difficulty points in the user experience.
- Create a solution to deal with the pain points.
- Validate the proposed solution
Process
1. Empathize
To empathize with research, I did it to 5 users of the same H&M mobile application, by doing 2 research methods, namely Usability Testing and User Interviews. I conducted Remote Moderation Usability Testing and User Interviews with an online meeting application.
Usability Testing
- Why do you want to buy H&M products online via the mobile application?
- What product would you like to see first after opening the H&M mobile application?
- How do you find the product you want to buy quickly find it?
In this usability testing, I saw the behavior of H&M mobile app users, and still in the same session I asked their feelings and thoughts when using the H&M mobile app
Key Findings
- They tried the H&M mobile app because it can be accessed in Indonesia, but they were confused and didn’t know how to change the country location
- They want to see the latest products from H&M, but the first to be presented with the category of all their products, but they lower their expectations because it is not as expected like other fashion mobile apps.
- They keep scrolling looking for the product they want for a long time, it’s good for mobile app activity, but it’s not a fast way. They also search with search engine but they are confused because they only know the physical form of the product and do not understand the keywords or product code.
User Interview
- What makes you confused when using?
- What bothers you in using it?
- If you think you want to change or add features in this mobile app, what would you like to do?
Key Findings
- They were all confused about how to change the country’s location because it was reported by H&M that their mobile app was accessible in Indonesia, but it was not as expected. They were all confused and disappointed
- They said they were annoyed by the main page full of all the products in the category without any products being sold directly, and one of their goals was to see the latest products from the H&M brand. And the bottom navbar which they think is less comfortable because it’s not like the navbar in general
- They hope that the latest products are displayed on the main page, the bottom navbar is placed as usual and the change in the location of access to the country can actually be accessed.
PlayStore Review
In addition to research with direct users, I also research through the results of comments on the play store regarding the H&M mobile app, to find out more broadly and more about the problems faced by other users. I took several screenshots that really dominate the many problems that users face today, I hide the identity of the user to keep their privacy comfortable
2. Define
Before kickstarting the ideation of the solution, it was needful to note and cluster down the major user pain points so that the solution perfectly justifies them and also to add a point of reference for the whole ideation process.
Affinity Mapping
I started to group the user’s pain points and categorizing these issues by similar pains through affinity mapping.
- Red represented user comparison,
- yellow represented pain points/problems faced by the user, and
- green represented feedback by the user when using the apps.
Doing this activity helped me sort through all the comments to get a clear view of what was important to users while satisfying business goals
Persona Analysis
I also create user personas based on users who shop online or offline. Persona describes their common goals, behavior patterns, pain points, and frustrations. This helps to create a better picture of the target user which ultimately leads to a better understanding
In the problem with the slow response system, I don’t understand how the solution for the fix is for sure, it is a pain point for the user
Clustering Major Problems
After collecting the data results, then I sort all the core problems so that it becomes a little easier to interpret the insights and make some changes to the Layout and some additions or feature changes.
Define Problems
Pain Point 1 : UI/UX Design Confusing
- Many Participants Are Confused When They First See the Main Page
- Too show off a product campaign
- There are no products that are directly shown on the main page
- Old Layout
- Lack of aesthetic elements in laying out the layout
Pain Point 2 : Less Confortable Navbar
- Participants Many Assume The Bottom Position Of The Navbar Is Uncommon
- It Takes Time To Adjust Usage
- Unusual Account Button Location
- Less Effective There is a Button Dot Bar in the right corner
Pain Point 3: Requires a Fast Product Search Feature
- Participants Need A New Quick Search Feature
Pain Point 4: Access Country Location Is Not Yet Functional
- Participants Are Very Disappointed With Access To The Location Of The State Of Indonesia That Hasn’t Been Functioning
3. Ideate
Paper Sketches
This segment was all about switching myself to creative mode. I started sketching interfaces and tried various iterations to diverge myself to all set of possibilities and finally decided to stick with these.
Please forgive my poor picture :)
High Fidelity
Based on paper sketches, I created with high fidelity at Figma. In my proposed high-fidelity view, I make it look clean. I assume that the user will be focused and comfortable when looking at the product.
Design Solutions
- Pain Point 1 : UI/UX Design Confusing
- Pain Point 2 : Less Confortable Navbar
- Pain Point 3: Requires a Fast Product Search Feature
- Pain Point 4: Access Country Location Is Not Yet Functional
Bonus Design! to clearly show the results of my proposed design… :)
4. Prototype
I apologize for the poor quality results of this gif output, if you want to see better quality mp4, with the aim of wanting to cooperate or pay, please send a message to farhan.fadilahtomi@gmail.com
5. Test
After finishing making a prototype through research data, to provide a statement that the results of my research data are good I have to test these results through a prototype which I will give to 5 people with the same background as the person I did Usability testing and user interviews before
Feedback from Participants
- All participants liked the new design
- They’re comfortable with the new Bottom Navbar
- Some participants did not actively use AR features
- For the country access location, they are fun with the design, but they really wait for the feature to function properly
Conclusion
The feedback was quite good from the participants that I was involved in testing, maybe there are other pain points that have not been tested. The design that I propose can make users more comfortable when using it
Reflection
From this case study, I learned not to let my own biases and presumptions affect my design decision. It is very easy to assume we know what is best for the product and users. From that assumption, I try to validate whether my assumptions are also perceived by other users.
And this mobile app system should be ready in system and design before notification of access to the Indonesian state can be made. Also fix the system which is very slow response, it is very slow and feels heavy for the fashion mobile app
Thank you for reading If you found this helpful please give me your clap and your thought or feedbacks on the comment below or by sending a message box to hola.tomifadilah@gmail.com
Lastly, if you’d like to see more of my work you can visit the other of My Portfolio here or you can visit My LinkedIn profile to connect with me!
Maybe you want to read my other articles too; IKEA.co.id — Redesign and UX Case Study and Building Mangan. Mobile App — UI/UX Case Study
