Check out the clickable prototyping:
https://www.figma.com/proto/LtZu00YzpiywdLDMU7dN36/eMart?node-id=8635%3A389&scaling=min-zoo
https://www.figma.com/proto/LtZu00YzpiywdLDMU7dN36/eMart?node-id=8635%3A389&scaling=min-zoo
Type: Grocery Shopping Self-service Terminal Design
Duration: 2018 - 2019
Context: Startup Company Project, combine traditional architecture with UX design
Role: Product Manager, User Research, Ideation, UX&UI Design, 3D Modeling, Video Producer
Define Problem
Grocery shopping - this traditional industry is experiencing evolution with many potential business opportunities. To seize these opportunities, in the initial research phase, we interviewed many people, to better analyze the problems from different perspectives and find the general pain points.
User Interviews
As a traditional industry, everyone has the experience of grocery shopping. Therefore, I randomly look people for 1-on-1 interview. By asking questions about who, when, where, what, how, why, I get to know the real struggle each individual is facing during shopping.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/485c6873-fc85-44cb-b7af-378aa0e91675_rw_1920.png?h=5f8ab70eb65255cf79814df7e67e16d3)
Affinity Mapping
Based on the user research, I find there are three major dilemmas people are facing during grocery shopping.
Dilemma 1: Customers want quality food with affordable price.
Dilemma 2: Customers expect multi options but worry about aimless searching.
Dilemma 3: Customers like stocking food while dislike spending too much time.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/ee514e53-ee38-4229-b09c-d90df91a1876_rw_1920.png?h=05dffbedb8918b00d7f5e7d2b97f1127)
Persona
Based on the user research result, I draw the target users' persona with Bio & Demographics, Behaviors & Habits, Goals & Needs, Motivations& Frustrations.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/27b3e260-dfcd-4367-8363-4491bab736e1_rw_1920.png?h=ac24380913b66b6f9b5dd05f3a4fc6ef)
Observation
Other than talking to the biggest group of the target user - the costumers, I also do some observation during my own grocery shopping. Thus, I find some extra pain points on other perspectives.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/492856e9-6d10-485d-bcdf-1ea9ccbe9bdd_rw_600.png?h=474f4fe354e6eb32f032a9797b597ab4)
Cashier doesn't know the ongoing discount sometime.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/1ed939fd-b846-499f-9d03-13fa7c0b1c3a_rw_600.png?h=946bd695e33cfc2cee63cd60fdd71846)
There is a big percentage of space hard to loading stocks,
Discover
I started by brainstorming many different ideas. Then I discussed with some professions to do need validation, and selected the most promising one.
Brain Storming
I try to bring up several ideas to solve one or more problems found during user research. After discussing with some professions, we all agree that the idea of Shopping Grocery on a Vending Machine is the most promising one.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/51e406d1-e75d-4072-9855-e297a5d31a3a_rw_1920.png?h=7bdaf2c65a4eaa997ca0609e3ab7aa39)
3D Model (Vending Machine)
I build a 3D model based on the ideation, which helps to show how the processes of Selecting, Purchasing, Checking Out are finishing on one machine.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/2e8f3acf-c33b-4029-9597-6d4240ecc3de_rw_3840.png?h=030f255cadf9646199c5d294423f6172)
2.5D Illustration (Emart)
Moving forward to the bigger picture, I think the store as a whole. Getting inspired from Chinese hospital pharmacy, I use the similar system in my design, to connect grocery Storage, Order, Deliver all together.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/6d3bd2d5-1579-4349-b5a2-2552bfac3d63_rw_1920.png?h=2ec11f3a12f4a44cb1a5303a7bbed8e6)
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/e833c849-b143-45b8-ba8c-3945e70eeef1_rw_1920.png?h=510ebe3dea30c08dc8a94a94f4c7bb8c)
3D Model (Emart)
Using my architectural background, I carefully layout the whole grocery store. The Deliver System connects all sections, including Shopping, Loading, Checkout, Self Checkout,
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/8b836c0e-bba3-469e-83d8-70261d38b3bc_rw_1920.png?h=a2faa59fe91bcffaa8f7eb0863f1dba4)
Develop
Through the ideation phase, I gain better understanding of what is the design direction, which guides me to the developing design phase. I build the detailed story board, which helps me to walk through the shopping process. The prototyping is drawn based on user experience's needs and refined based on the user testing feedback.
Story Board
Emart provides Shop On&Off-line experience. I draw the story board by comparing with Traditional Shop Offline & Modern Shop Online.
It's easily to see, this new grocery shopping style combines the advantages of the other two. Customers can both enjoy fun of selecting, and shorten the time of purchasing and check out. In this case, the whole grocery shopping experience is upgraded.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/988f00d1-2974-4943-a2c5-054cbf9256f0_rw_1920.png?h=ff04e03ab433a80cf04c4d65b57ee89f)
Low Fidelity Prototyping
According to each step of user flow, I draw the Low Fidelity Prototyping. During this process, I set the content information, basic visual style, and the interaction of key components.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/ee2f0e5a-e454-47ac-851a-7347421f81fa_rw_3840.png?h=6b01d53ff4afce4cf91007ce2d04d64f)
Design Solution
After user testing, I refine the visual system, including color, logo and other details on the basis of feedbacks.
(Because of the Covid-19, all the user testing is online)
Check out the clickable prototyping:
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/184dbdfa-6e7a-4a1e-b5ad-923ce091bc3d_rw_1920.png?h=0adde2925dc240d5838e9de0b6b06638)
Reflection
User experience design is not only focused on the screen, it is about the whole experience using the product.