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


When COVID-19 just had broken out, and our radical lifestyle had changed. Most of thebusinesses closed, and all the cities shut down. People practiced social distancing, so it madeour life more complicated. However, grocery stores remained a necessity during this pandemic,but not everyone was ready for a trip to these stores. 

Micro is a new mobile application, and it would help peopleshop online easily and more conveniently at home. This mobileapplication would provide users with a better experience byhaving a virtual assistant to help them shop online. 

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

01. The Problem

  • 🗣  The online services are lacking communication betweenusers and online stores 
  • 🥦  Users always expect to receive fresh products, but theydon't have options to select the freshness of theproduct that users want 
  • 🚕  Due to the high demand for online orders, sometimesonline stores run out of items, and they are not availableto deliver to users right away 

02. Design Challenge

This challenge is to design a new platform that provides a better experiencefor online shopping groceries by creating a safe place where my users cancommunicate better with grocery stores. This design challenge focuses onthe accessibility and usability of user experiences that help to solve thechaotic movement during the pandemic. 

03. Solution

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

Stay connected to online stores by chatting with a virtual assistant 

Have a virtual assistant to help my users to walk through the onlinestore. To create a better experience, a virtual assistant would havefriendly features, and my users would be more comfortable withthe app. To help my user stay connected with grocery stores, theywould get help by communicating with a virtual assistant anytime. 

Organize information and improve result

With a chatbox, and my users could ask what they need andsave their time in shopping. A virtual assistant would create abetter experience by asking more questions and analyzing theinformation from my users. It would improve the result, andthey don’t have to scroll page to page to find items. 

Guaranteed fresh products when shop for groceries 

A virtual assistant would connect any sellers or staff at grocerystores, and my users would have the ability to check any productsbefore they checkout. The grocery store would take photos ofproducts, then send them to my users through a virtual assistant.The purpose is to create satisfying experiences for users, and theywon't regret the purchase. 

04. Competitive Analysis

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

  • Print Online customer services are not always available, andusers can’t get help right away. However, Amazon providesonline staff to help shoppers, but sometimes these staffslack knowledge of a product 
  • I found it's challenging to place an order, and users haveissues with scheduling their orders due to the limitation ofthe day and time. They can't make an order right away, andusers need to wait for hours or the next day. So, it's veryinconvenient for online shopping 
  • Some users want to see the freshness of the
    product, but the website only shows the stock 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 had given me a better insight on the situation of grocery stores to create potential solutions to face the challenge of users 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 explainthe problem better, and I could understand the lack of the situation. Then, I found that users felt frustrated with searching theitems when they couldn't find anything that matched their expectations, and they weren't sure who they should ask. Anotherproblem is the limited variety of food in grocery stores, so users lacked many online shopping options. 

07. User Journey Map & Sitemap 

I created a user journey map to depict the behaviors of myusers during this pandemic. And it helped me to illustratehow my users would feel at each touchpoint and what kindof experience they would get from my product. 

I created a sitemap to describe how this app should work andbrainstorm different ideas for features. This structure helped mefollow the project better and kept track of what I needed tofocus on more. And I found that I needed to work on moreproduct information, so my users could have full access to whatthey need during shopping. 

Next, I brainstormed and worked on the concept of thevirtual assistant. The idea is that it would be sync the datasystem from the app to grocery stores to provide betterinformation for my users. An example is when my userswould like to see a product in real-time, so they would haveto ask a virtual assistant. Then, this virtual assistant wouldhave to work with the staff at grocery stores. After that, theywould take photos and send them back to a virtual assistant.I made this decision because it would make the process ofsearching and analyzing information faster and smoother.The stores would have a better understanding of the needs,while my users would be more satisfied. 

08. Early Sketches

I started sketching on paper to getsome ideas for the visual design of theapp. This stage helped me visualizethe theme and gave me some sense ofthe visual directions to my project.Then, I explored the concept of avirtual assistant by adding differentfacial expressions to provide bettercommunication with our users. Also, Itried to expand the selection ofservices for users by adding health-care, pharmacies, self-care, etc. 

9. Visual Design

I redesigned a virtual assistant because I wanted it to look minimalist to showcase the brand. I didn't keep my original ideas from mysketches stage because the mission of the app is everyone should feel comfortable using it. So, I decided to create a virtual assistantin neutral gender, and it could be male or female based on my user experiences. 

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 my users should feel about the functions of Micro. I realized thatthe 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, my users would feel confused about the usability of Micro. One of the features is "Be active" whichdidn't bring a good impression to user experiences, and it was hard for users 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

This mobile application hopes to meet the needs of people who need to buy groceries online and reduce the risk of infection. Inaddition, it is desirable to provide an experience where users can communicate and interact with the grocery stores through a virtualassistant. It would analyze the information to provide a better result for users during their shopping experiences.

In the future, Micro would be changing to provide an environment such as consumer habits because this mobile application wouldbe more convenient, easier, and faster. After the pandemic, Micro would be server the users who are the elderly, the disabled, orpeople who cannot make the trip to the grocery stores. 

15. Reflection

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

  • PrintI would like to add more features to the selection of the market and incorporate them into the journey of users 

  • It could be more expansion in the delivery function of the app that how users could keep track of their orders and communicate tothe delivering through a virtual assistant

  •  In the future, I would love to improve the user experiences with a virtual assistant by giving users the ability to design theirvirtual assistant 

  • If I have a chance to redo this project, I would love to do more user testings in person and collect more feedback from theshoppers at the grocery stores to have better information 

16. Interactive Prototype