Project Details
Role
UX/UI Designer & Researcher, Information Architecture and Graphic Designer
Tools
Figma and Illustrator
Timeline
Nov 13, 2022 - Jan 4, 2023
Background
Most of us shop on weekends, especially at large-scale stores such as No-frills, Walmart and Costco.
Have you ever experienced difficulty finding the items you were looking for and having to wait in long lines at checkout at the end of every shopping? It’s not only you, we all experience that.
As a product designer, I realized that we don’t have assistance to find items at large-scale stores, or a system to reduce the checkout lineups.
This finding inspired me to create Peasy, a mobile app where shoppers can find items while shopping and skip checkout lineups by purchasing with a smartphone.
Problems
Can’t find the items
It is hard to find the items that the shopper is looking for at large stores and it wastes time just for finding the item.
Long lineups at the checkout
Even though the self-checkout is offered, there are still lineups in both cashier and self-checkout.
Solution
Map Navigation
Store map with the pins of the wanted items will guide the user to find where the item is stored.
Smartphone Checkout
Checking out on a smartphone will save time to place the items on a machine, pull out a card to pay and bag the items again.
About Peasy
Peasy has four main features - create a shopping list, find the items with the map, scan the barcode of the item, and pay on your smartphone.
The shopping list and map navigation are to assist the users to find the items that they are looking for, and the barcode scan and mobile payment are to skip the lineup at the checkout.
Design Process
This project started with the initial problem statement - the long lineups at large-scale supermarkets. Then I conducted a survey to assure this problem as the real problem for the majority, and I discovered there is another problem that shoppers face - the difficulty of finding the items.
Based on the survey, I updated my problem statement and started working on my project. After the whole process of ideation, my mentor advised me to conduct a usability test to iterate the design. This was great feedback to improve my product in terms of user-centred design.
Survey Result
The online survey was conducted and 21 respondents answered the questions from Canada, the UK, Sweden, Germany, and Australia.
I analyzed the data and found interesting patterns in people’s shopping habits.
Survey Findings
94 percent of the respondents go to supermarkets and hyper stores.
There are two types of shoppers - Car drivers use a cart, while walkers take a basket.
Cart users struggle to find items, while basket users get frustrated with lineups.
The respondents who have used mobile payment such as Google/Apple Pay were highly satisfied with the payment option.
82 percent of the respondents answered they’d love to use the payment in the future.
Personas & User Journeys
Two personas and user journeys are created based on the survey result.
The first is Kevin, a basket user who wants to skip lineups, scan the barcodes of the items and pay on his smartphone.
The second is Shelly, a cart user who wants to find items with ease, make a shopping list and use the map to find the items.
User Flow
The user flow was created to examine what actions the users will take.
First of all, the user decides on the store to shop at, then creates a shopping list. Then the user who wants to find the item opens the map and pictures the item's location. After finding the item, the user scans the barcode to put the item in the cart. When all the items are scanned, the user pays the bill on a smartphone with a credit card or a mobile payment such as Google Pay and Apple Pay.
Information Architecture
Information architecture is created to examine what information on each screen is needed.
Wireframing
There are 13 screens in total starting from the onboarding page, shop selection page, main menu, finding items to create a shopping list of the selected supermarket, and so on. After adding items to your shopping list and arriving at the supermarket, the user starts the map navigation. There are icons to navigate the user to the items on the shopping list. Once the user finds the item, tap the button to scan the item and put the item in the cart. Once all scanning is done, the user selects the payment option and finishes the shopping.
The challenge was how to lay out the contents based on the information architecture, differentiating the information by applying hierarchies and how maintaining consistency throughout the interfaces.
The call-to-action buttons and other clickable elements are designed bigger for the user to tap with a finger. Also, three columns are set at maximum to maintain the visibility on a mobile phone. The shopping and the cart page have a similar design to let the user recognize that they’re a list of items just like a paper-based shopping list and a receipt.
UX/UI Design
Based on the wireframe, the UX / UI design was created.
There are three colours applied to the interfaces - orange, green and beige. The beige is for the background to differentiate the white default background, orange is to draw the best attention from the user, and green is for the navigation bar and call-to-action button.
When one of the navigations is active, it is highlighted with a beige, ribbon-shaped background to clearly show which page the user is on.
Usability Test
This is the visualized 18 feedbacks of the usability testing from each participant. The purple, yellow and green sticky notes are the feedback from each participant. I also discovered non-verbal feedback from my observation in orange sticky notes.
Most issues are found on the pages of choosing the store, the shopping list, the navigation map and the car where all the participants suggested improvements.
The following are the three major issues.
On the “Choose your store“ page, the pin icons on the map were hard to recognize which icon shows which store.
On the shopping list and the cart, participants couldn’t figure out what the “+” icon does on the shopping list and the cart.
On the navigation map, there is so much text information on the map that it took a while to read all the section names to guess where the items would be.
Three major issues
Design Improvement
The iterate design was conducted after the usability test.
On the “select store“ page, the pins of store locations are changed from the simple pin icon to the shop logo. In this way, the user can immediately grasp what store is located on the pin, so that he/she can make a quick decision.
The shopping list and the cart screen were differentiated by changing the background colour and adding the decoration on the left of the shopping list page to give a feeling of a strip of paper.
The map navigation is updated on the directory signs - it changed from text to icons, so that the user can understand what product is located where at a glance. In this way, the service is used by diverse people effortlessly, which is critical in a diverse country, Canada.
Other minor changes are made on the home, product detail and payment options page by mainly changing the background to white in order to the consistent look of the product.
Style Guide
Takeaway
Although I am delighted by accomplishing the whole design process as a personal project for the first time, my deliverables are far from pixel-perfect and not tactic enough to communicate well to articulate my design decisions. The lack of a design system could be the reason why this end product was not clean and was somehow over-designed.