Your virtual shopping assistant is here!

Senior Project - User Experience Design -2020


Responsibilities: user research, user processes, visual design, prototype design, user testing, and incorporating user feedback into design iterations.
Role: UX/UI Designer
Concept:  User Experience Design, Mobile Application
Duration: 8 weeks
Tools: Adobe XD,  Adobe Illustrator, Adobe Photoshop, InVision


Due to the COVID-19, the pandemic has broken out, and our radical lifestyle has changed. Most of the business is closing, and all the cities shut down. People practice social distancing, so it makes our life more complicated. However, the grocery store remains a necessity during this pandemic, but not everyone is ready for a trip to these stores.

Micro is a mobile application that helps people to shop online easily and keep everyone stays safe at home. This mobile application will provide users with a better experience by having someone to help them shop online faster and easier. 

According to the survey research , 68% of consumers say COVID-19 elevated their expectations of companies’ digital capabilities

01. The Problem

  • 🗣  The online service is lacking communication between users and the online store
  • 🥦  Second, the shopper always expect to receive fresh products when they are shopping for groceries, so users don't have options to select how freshest of products they want
  • 🚕  Due to the high demand for online order, sometimes the online store runs out of the items, and they not available to deliver to shopper

02. Design Challenge

This challenge is to design a new platform that provides a better experience for online shopping groceries by creating a safe place where users can shop and communicate better with the store. This design challenge focuses on the accessibility and usability of user experience that helps to solve the chaotic movement during the pandemic.

03. Solution

Create a mobile application for online store shopping that allows users to search and buy groceries while they don't need to be in physical stores. 

Stay connected to online stores by chatting with a virtual assistant 

Have a virtual assistant to help users to walk through the online store. To create a better experience, a virtual assistant will have friendly features, and shoppers will be more comfortable with the app. To stay connected with the online store, users can get help by communicating with a virtual assistant anytime.

Organize information and improve result

This mobile application provides a chatbox, so users can ask what they need and save their time in shopping. A virtual assistant will create a better experience by asking more questions and analyzing the information from users. It will improve the result, and they don’t have to scroll page to page to find items. 

Guaranteed fresh products when shop for groceries 

This feature will help users to find the freshest products from online stores throughout the app. They can check and view any product in real-time by having help from a virtual assistant. This virtual assistant will connect any sellers or staff at grocery stores, so users will have the ability to check any products before they checkout. The staff will take photos of products, then send them to users throughout the virtual assistant. 

04. Competitive Analysis

I looked at direct other services like Amazon Fresh. They are a strong competitor in online grocery shopping. The summary of my findings includes:

  • The online customer service is not always available, and the shopper can’t get help right away. Amazon provides the online staffs to help the shoppers, but sometime these staffs lack of knowledge of the product
  • I found it's challenging to place an order, and users have issues with schedule their order due to the limitation of the day and time. Sometimes, users can’t make an order right away and they need to wait for hours or the next day. It's very inconvenient for online shopping
  • When shoppers want to see how the freshest of the products, but the website only show preview images

05. Research 

I did more survey and researches that focused on the behavior of how did people shopping online for essential items and how the virtual reality helped people during the quarantine. This research will help me to get a better insight on the current situation of the grocery store and create potential solutions to face the challenge of the user during the quarantine. The summary of my findings includes:

  • Most online grocery sales maximized between 10% to 15% of total grocery sales
  • All grocery stores are overwhelmed, and they don’t have enough employees available to deliver the order
  • The demand for online groceries is creating the challenges of fulfilling the orders and reducing the availability of delivery.
  • 69% of consumers in stabilizing markets and 80% in advancing markets are fearful for the health of others
  • 58% of consumers said they expect to do more online shopping after the pandemic than they did before it 

06. User Persona

I created two personas to help guide my design decisions by interviewing users with a wider age range. It helped me to explain the problem better, and I can understand the lack of the current situation. After that, I found that my users feel frustrated with searching the items when they couldn't find anything that matched with expectation, and they weren't sure who they should ask. Another problem is the limited variety of food in grocery stores, so users lack many online shopping options.

07. User Journey Map & Sitemap 

I created a user journey map to depict the behaviors of users during this pandemic. And it helped to describe how I want users to feel at each touchpoint and what kind of experience users will get from my product. I decided to create a virtual assistant to communicate and react with my users. I thought it would be awesome if a virtual assistant can walk through users to use this mobile application.

I created a sitemap to describe how this app is going to work, and it helped me brainstorm different ideas for features of the app. This structure would help me follow the project better and keep track of what I need to focus on more. As a result, I found that I needed to work on more product information, so users can have full access to what they need during shopping. It needs to connect the user to a virtual assistant because it would improve the communication between the user experience and this mobile application.

Then. I brainstormed and worked on the concept of a virtual assistant. I would like to sync the data system from the app to stores and provide better information for the user. An example is when the user wants to see a product in real-time, then the staff will take photos and send them to a virtual assistant. I made this decision, because I would make the process of searching and analyzing information faster and smoother. The stores will have a better understanding on the needs of users.

08. Early Sketches

I started sketching on paper to get some ideas for my mobile application. These sketches focus on the appearance, function, and UI screen of the product. I wanted to have my ideas on papers and create a concept that I could visualize the theme for my product. I like to add more drawing into this stage because it would give some senses of the visual directions to my project. I explored the concept of a virtual assistant by adding different facial expressions and emotions to give better communication with the user. Also, I tried to expand the selection of services for users by creating options for healthcare, pharmacies, self-care, etc.

9. Visual Design

I redesigned a virtual assistant because I wanted it to look smarter and simpler to showcase the brand. The reason I didn't keep my original ideas from my sketches step because this mission of the app is everyone would feel comfortable to use it. I wanted to create a virtual assistant in a neutral gender and it could be male or female based on the experience of users.

10. Style Guide

I chose "Micro" as a brand name because it fitted with applicable, accessible, usable, and intelligent. I also found the name refers to the processing of tiny organisms, organic structures, or certain substances. It matches well with the functions and purposes of this mobile application. Moreover, I chose the blue color as the primary color because it presents for the mind and is essentially soothing. It's also associated with intelligence, communication, trust, and efficiency. Also, I added different shades of blue into the color palette because I believe they will stimulate clear thought and lighter, while soft blues will calm the mind and aid concentration. 

11. Low-fidelity Wireframe

I conducted user tests on low-fidelity wireframes to understand how users feel about the functions of Micro. I realized that the app was too complicated for my users with many features, and I found that some of the wireframes didn't have a clear direction. With adding too many features, users would feel confused and overwhelmed about the usability of Micro. One of the features is "Be active" didn't bring a good effect to the user experience, and it was hard for the user to keep track of the data for their activities.

12. High-fidelity Wireframe

I revised and worked on the high-fidelity wireframe. I improved the user interface and added more visual design to the application. Also, I removed all the unnecessary parts such as healthcare or exercise because I don't want users to feel overwhelmed and distracted with many functions from Micro.

13. Final Product

14. Proposed Outcome

The mobile app hopes to meet the needs of people who need to buy groceries online and reduce the risk of infection. In addition, it is desirable to provide an experience where users can communicate and interact with a virtual assistant. It would analyze the information and provide a better result for users.

In the future, this mobile application will be changing to provide an environment such as consumer habits, because the application is more convenient, easier, and faster. After the pandemic, the audience is going to be the elderly, the disabled, or people who cannot make the trip to the grocery store. 

15. Reflection

The final prototype was completed and received positive feedback about the branding. I know that there are a lot more features that can be added to this product.

  • I would love to expand more the concept of a virtual assistant and make it more accessible to the user experience by adding more features to the selection of the market and incorporate it into the journey of shoppers 
  • It could be more expansion in the delivery function of the app that how users could keep track of the order and communicate to both the delivering throughout a virtual assistant
  • In the future, I love to improve the user experience with a virtual assistant by giving users the ability to design their own virtual assistant
  • I will continue to do more testing and collect more feedback from the survey to improve the user experience

16. Interactive Prototype