QuicShop
Shop more efficiently
Project Overview
Shopping is an essential task that people need to do on a daily basis. However, people often spend longer than necessary shopping for their items for a variety of reasons. Hence, I created QuicShop, an app that helps people shop more efficiently.
Problem
Shopping is a necessary but time-consuming activity.
Many people shop inefficiently due to not knowing the exact location of items or struggling to find store assistance when they need help. In some stores, the displayed price of certain items is inaccurate, leading many customers to have to pay more than they originally wanted to. Furthermore, there are people who often forget the items on their shopping list once they get to the store.
Solution
I created QuicShop - an app where users can not only find the exact location of a particular item in a store, but also create a shopping list to store all their shopping items as a convenient reference.
From busy teens helping their families out to middle aged parents just doing weekly groceries, QuicShop allows people to quickly call for store assistance when they need help, without having to chase down anyone.
QuicShop also includes a price scanner that provides users with an accurate price of any item so that they will not have to pay more than expected.
Process
User Research
​
Ideation
​
UI Design & Prototype
​
Usability Test & Synthesize
​
Redesign
Role
Sole UX/UI Designer
Tools
Adobe Illustrator
​
Adobe XD
​
Adalo
User
Research
Ideation
UI Design
Prototyping & Usability Testing
Learnings & Retrospect
Secondary Research
I conducted secondary research to gather data on how long people spend shopping in the U.S.
I found that the average consumer spends about 41 minutes shopping for groceries as of 2020 (Creditdonkey)
Research Plan and Screen Survey
I created a research plan to understand how other people were feeling about shopping problems. I first identified my target demographic and then created a screener survey, sending it to various potential study participants.
​
My research methods included:
-
Online surveys
-
Remote and in person interviews
-
Feedback synthesis
Survey Objective
The goal of my survey is to evaluate the prominence of four main shopping problems:
-
Forgetting items on a shopping list
-
Finding the exact locations of items
-
Not being able to get store assistance
-
Not being able to find the price of items.
Participant Characteristics
-
Shop at least one time a week
-
Have at least one of the problems listed in the screener survey
Follow Up Survey
From the screener survey, I received 10 responses and was able to recruit all 10 participants, 6 adults and 4 children. I then sent out another survey that further evaluated the prominence of the four main shopping problems. In this survey, I asked the participants to rank the shopping problems from least frustrating to most frustrating. In addition, I also asked them to list other shopping problems that were not listed, as well as provide an example/story of one of the shopping problems they experienced.
Interviews
From the second survey, I chose three participants to interview either remotely or in person, so that I can further empathize with my users. To diversify the experiences, I chose one child (17 yr old), one adult (48 yr old), and one adult with an elderly experience (83 yr old).
User Stories
Child Experience
Adult Experience
Adult/Elderly Experience
One of the main struggles that she has almost every time she shops for groceries in a new store is finding the exact location of the item that she’s looking for. Many grocery stores have signs hanging from the ceiling, which detail what would be in each aisle. However, many of those signs have very vague groups such as "ethnic foods" or "baking". In her local grocery store, having only one aisle dedicated to "ethnic foods" is quite confusing for her, as it is not made explicitly clear what exactly an "ethnic food" is. Since she would really rather not go down every single aisle in the grocery store in the pursuit of only a few specific items, she feels that she sometimes spends more time looking for specific items than is necessary.
She went to Walgreens to look for hydrogen peroxide, an item she has never purchased before and had no idea which shelf it was located but guessed it that it would be around the pharmacy area. After checking most shelves for 10 mins, she couldn’t find it and there were no store helpers around she could ask so she went to the front checkout lines, hoping that one of the cashiers could point her to the right location. After waiting another 5 mins in lines, she was finally able to talk to the cashier, only to find out that she also had no clue where the peroxide was located, suggesting to talk to the cashier at the other line. Seeing that there were so many customers waiting in the other line, her patience grew thin and didn’t want to stand in the line and wait again. She then went to the front, half apologetically and half demandingly, asking the cash register if she knew where the hydrogen peroxide was and said “in the pharmacy area” against thew all. Unwillingly, she went back to where she started and luckily once she got to the wall, there was a store helper there. She stopped her immediately and asked the store helper who turned around and pointed to the lowest shelf right behind her. After 20 minutes in the store, she finally found it. If there had been an item locator or better store assistance, she would have been in and out of the store in 5 mins, not 20 mins.
He went shopping with his mom, who wanted to buy watermelon for her children because she thought it was on sale. His mom picked out four watermelon, brought them to the checkout, only to realize that the watermelon wasn’t on sale. He then had to help his mom bring all four watermelons back. If the store displayed an accurate price of the watermelon, then this would not have happened.
From the second survey and interviews, I was able to gain a better understanding of the various experiences shoppers have on a daily basis.
2
2.4
2.8
Cannot find price of items
Forgetting items on shopping list
LEAST prominent problem
Cannot get store assistance
Finding exact locations of items
MOST prominent problem
Affinity Mapping
I then created an affinity map to organize and categorize my key takeaways from the surveys and interviews. The five main shopping issues my participants had include:
-
Not being able to find the exact location of items
-
Forgetting items on a shopping list
-
Cannot get store assistance
-
Prices not accurate
-
Low or no inventory
Empathy Mapping
I then created empathy maps to identify three unique types of users:
-
Extremely busy people (i.e. parents, students, entrepreneurs)
-
Low income people
-
People with memory loss
Personas
Based on the interviews, I created four personas: Two of them belong in the category of being an extremely busy person, one has low income, and the last one has memory loss.
Problem Statements
For the problem statements, I focused on the five main shopping issues I discovered through my surveys and interviews and then proposed questions that addressed these issues.
​
-
How might we help people shop faster and more efficiently without having to spend too much time searching for where items are located in the store?
-
How might we allow people to quickly store shopping list items as a reference?
-
How might we help people quickly find an accurate price for an item?
-
How might we try to help people get immediate store assistance when they need help?
​
User
Research
Ideation
UI Design
Prototyping & Usability Testing
Learnings & Retrospect
Ideation
For the ideation phase, my main focus was creating an app that makes shopping easier and faster—
-
Provides users with the exact location of an item in any desired store
-
Allows users to create a shopping list with all their shopping items
-
A price scanner to give users the accurate price of items in a store and alerts users if the item is on sale
-
An “ask for assistance” button to help users quickly get help from a store assistant
Sitemap
I created a sitemap with the purpose of organizing the content in my app. I used a color-coding system to depict different pathways users can take, with similar content having similar visual representations. For instance, the scan item screens are purple, while the searching store pathway is green. Both are different functions of my app that allows for clarity and hierarchy when color coded.
User Flows
My user flows consisted of four main tasks that are the main features of the app:​
-
Searching for an item
-
Asking for help
-
Scanning an item
-
Creating a shopping list
​
Key:
​
Sketches
I created a total of 10 sketches to outline the different screens users would be able to see when using the app. These screens display the path of the main functions of the app, including finding the exact location of an item and creating a shopping list.
Under each screen, I described the functions and components of each page. For example, on the home page, I included a bottom navigation bar as well as buttons that allow users to navigate between the home, "find," and "my lists" pages.
Wireframes
Using adobe illustrator, I recreated my sketches to display the four user flows:
-
Searching for an item
-
Creating a shopping list
-
Scanning an item
-
Asking for help
My wireframes use a simple grayscale color palette that allows me to focus on the content structure without any color or designs that would distract the user from the main functions of my app. I used simple shapes and icons to ensure that the interactions are visible and are able to be recognized immediately by users. Finally, I also kept the button and text field the same size in all my screens to ensure consistency.
User
Research
Ideation
UI Design
Prototyping & Usability Testing
Learnings & Retrospect
Brand Platform
For the brand, I chose the name “QuicShop” because I wanted to reflect how the app would make shopping quicker for people.
QuicShop’s mission is to allow users to shop more efficiently. It provides exact locations and accurate prices of items in a store, as well as allows users to create shopping lists and quickly get customer service help.
Mood Board
Brand Personality
Brand Attributes
Style Guide
QuicShop's style guide consists of 5 colors. I chose French Blue to be the primary color and Blue Green to be the secondary color. In addition, I chose Cosmic Latte to be the background color of the app.
Due to its simplicity and readability, I chose a sans serif font type, source sans pro, as the main font.
The main icons used in my app include a house to represent the home page, a magnifying glass to represent finding a store or item, a store to represent the user's stores, and a list to represent the user's lists.
Hi-Fi Screens
Using the same colors, typography, buttons, and iconography in my style guide, I then created Hi-Fi screens for QuicShop.
​
Below are the final screens after synthesizing & redesigning (user testing)
User
Research
Ideation
UI Design
Prototyping & Usability Testing
Learnings & Retrospect
Prototyping & Usability Testing
I first created a prototype using Adobe XD to make sure I included features that actually solved the main issues users have when shopping. In this prototype, users were able to find stores, create and save shopping lists, ask for help, and scan items. I sent the prototype to people who participated in the early stages during user research.
Synthesizing & Redesigning
From user testing, I found that a major feature needed in my prototype was a save store button. I realized that many users often go to the same store when they go shopping, so rather than having to search the same store every time they shop, it would be easier for them to be able to go directly to the store page. I then decided to add a “my stores” button on the homepage, in addition to a “my stores” tab on the bottom navigational bar.
​
After I finalized the prototype on Adobe XD, I created a functional app using Adalo that allows users to find items from two stores in my city as well as create shopping lists.
Due to Adalo limitations, I had to change how some features were displayed or abbreviated but still had the main functions.
User
Research
Ideation
UI Design
Prototyping & Usability Testing
Learnings & Retrospect
Learnings & Retrospect
At first, I only created this with the purpose of solving a problem my mom always had when she shopped—struggling to find locations of items in a store. I then realized that this problem was an issue many other people had when shopping and with the help of a UX designer mentor, this project turned into my first UXUI design case study.
​
Through my first UXUI design case study, I learned not only the whole ux design process, but also realized the importance of user research and empathizing with users to make sure my solution will actually solve the problem. From my user surveys and interviews, I was able to discover the four main problems people have when shopping and then create a prototype that solved those issues.
After attempting to create a functional app on Adalo, I realized why there isn’t really an app out there like the one I created: Each store could potentially have over 10,000 different items. It was a pain just entering 100 items into the database when I created the app on Adalo. And sometimes the location of an item changes in the store, so it could be impossible to constantly update the location unless store owners have access to the app.
​
If I had to improve something about QuicShop in the future, I would try to make the UI designs more aesthetically pleasing.
© 2023 by Jasmin Duong