H Mart App UI Redesign
Role
Tools
UX/UI Designer
Visual Designer
Figma
Adobe Suite
Overview
H Mart is a Korean supermarket that has over 80 chain stores throughout the United States, United Kingdom and Canada. It is the largest U.S.-based grocery store chain that specializes in Asian-style products and caters to Asian-American shoppers.
As a large chain brand, H Mart’s app is still lacking in some aspects, so the purpose of my project is to redesign the UI interface of the app, and make it easier to use and allow users to have a better experience. The two objectives of the redesign are as follows.
Beautify the UI interface and improve the functions of their App.
Add regularly rotating culinary events of Asian countries to the app, to let users understand more about the Asian food culture.
Problem
As a shopper myself, I believe shoppers prefer convenient shopping, such as online and mobile app shopping. People in urban areas have a busy lifestyle and can only buy daily necessities after work or during breaks, which causes them to have less rest time.
We can buy clothes and order food by phone, so of course, we can also buy groceries in a mobile app!
Target Audiences
The target audience of the project are people between 18–45 who do grocery shopping on a weekly basis. Most people in this age range are more tech savvy and have the income to grocery shop online.
Persona & User Flow
Goals
-Make it convenient to buy groceries
-Allow users to learn more about Asian food culture
-Allow users to buy ingredients while following a recipe
User Flow
A smooth navigation is an important factor in an app. A simple and smooth user experience can impress users and can help users save a lot of time, so I try to simplify each process.
Sitemap
Wireframe
Once the user flow and sitemap are established, I started working on the wireframe.
User Interface Design
Old
New
Homepage
The image on the left is the current look of the H Mart app. Users will feel at a loss on their main page because of the lack structure and clear categories to guide users.
The image below is my version or vision of the homepage. As a chain brand that sell Asian food, I have added regularly rotating culinary events of Asian countries on the homepage, which can help foreign users learn more about the food culture of Asian countries.
There will be a top pick category, which foreign users who use this app for the first time, will have some guidance on popular choices of the local people.
Recommend Dishes
Since the culinary events of Asians countries in the app will be rotated regularly, I will be only showing the flow where users will browse for Chinese cuisine.
If users are interested in Chinese cuisines, they can learn more about the food culture according to their tastes and food types.
One Click Add to Cart
Users can purchase the ingredients separately. When you click the image, it will leads to the item page.
Or you can add all ingredients to the shopping cart by clicking " Add All Ingredients to Cart ".
Recipe Page
Users can follow the recipe page to prepare ingredients, and then click to watch the tutorial video.
Category Page
Here I classify the types of food, so that users can find items they need to buy easily.
Product Page
This is the fruit page. If the user wants to go to meat or other pages, they can convert to other pages by clicking the category bar above.
Checkout
This is the summary a user’s order to show user all the items they will buy in clear way and they can edit their order before checkout. Also they can either choose to pick up at the store or home delivery.
Order Received
After user placed an order, they can choose to view the order status or go back to the homepage.
The Final Product
Conclusion
This is my first mobile app redesign project and my inspiration comes from my personal experiences. The H Mart online grocery delivery feature is only available on web and not on mobile. I am on my phone most of the time whenever I have free time, and would love to be able to shop from my phone. I would love to have this feature on their existing app and designed the feature for them with my vision of how powerful they all can be with an online shopping feature. From this project, I learned that adding a feature like this to an app, can help a user learn more about a culture’s food, at the same time making their lives a little easier.