Scan & Go — UX case study

To design an app experience where a customer enters a store & begins shopping. A user can scan items themselves through their mobile & add them to their card. Once everything is collected, the user checks out by paying online through any preferred payment method & leave the store.

Understanding the problem in retail

Customers visit the store with needs to buy goods for their day to day disposal. Experience is highly dependant on how well all the touch points are designed for the user. Users spend undue time at the store as they move around the aisles finding & picking up items, discover new ones on the way.

According to Research

“91% of respondents visit physical stores at least once a week, and only 49% of respondents shop online with the same frequency. Despite the allure of e-commerce, physical retail plays a critical role in consumers’ weekly lives.”
Report- Evolution of Retail: 2016 Holiday Consumer Mobile Usage

User Persona

Aisha Malik, 26 , IT consultant, Lives in Bangalore,IN

She works from 9–5 pm and walks back home from work. She is health conscious and likes to see & read the information before she buys. She doesn’t get time to browse and order online because due to her work she is not sure when she will be available at home for receiving delivery. She lives alone.


  1. To be healthy & nutritionally informed.
  2. Being able to purchase reasonably priced products.
  3. To know if her preferred shopping items are in stock.


  1. Long lines and a busy store.
  2. Spending too much time in store due to indecisiveness & choice paradox.
  3. Going over budget.

Grocery shopping has been always a pain for her since its a time-consuming process. She tried using delivery services and weekly subscription but she likes to see & read the information before she buys.

Image by Kyle Johnson for The New York Times

Getting Started

Design process

Using the user persona & competitive analysis, understanding every critical part of other scan & go apps produced a new UX report altogether because applying the most different design methodologies to come up with the best results.

So moving forward, I extracted the main task or keywords from the problem statement which was-Enter store, Scan, Add, All collected, pay & Leave.

Next step- Building up

By empathizing with the user with the help of persona and main activities done by the user, I will design the user story map which I believe an important step in any lean & agile setting.

By doing this activity I got to know the main screens I need to make for this minimal viable product. Keeping illustrations from the previous step helped me in imagination as its easy to get lost while making the flow; the visuals helps me to keep focused.


Brand building & visual style

First step: Define the product in one sentence.

Scan & Go is an app that allows shoppers to scan every item’s barcode, tally up the total and checkout with various payment options such as credit and debit card.

Personality Traits

Mood Board & Inspiration

Color Palette

Fonts & Typography

Visual design

Designing High fidelity is not just coloring the wireframes. I inculcated the brand guidelines defined before. In this step, we actually try to crack the main screens of the product. Also, we try to simplify the user steps & flow.

Prototyping is done using Sketchapp.

That’s all folks! Thank you for your time. Let me know if you have any questions regarding this. Visit