UI/UX Case Study: Shop Nearby ( An E-commerce App)

Abhinav Kumar
6 min readMar 9, 2021

SHOP NEARBY is an E-Commerce Android app that helps you to buy dairy products nearby your location from local shops at the earliest possible time.

Strategy

Problem

People who purchase their daily use products generally have to wait many days to get their orders from the supplier. Explore the ideas of how fast the different users can get their daily products (currently focusing on dairy products) from any supplier near the location of users. The product currently targets the ‘buyers’ hence assumptions are made through the seller/selling side.

I want to explore how I can promote users to buy their dairy products from their nearby local shops at the earliest time.

Design Process

Discover

Secondary research

Exploring common Problems faced by consumers in E-Commerce:

  • Coordination related issues
  • Quality issues
  • Issues identifying with the product quality
  • Advanced payment disappointments
  • Absence of security
  • Missing payment affirmation
  • Misty Website Policies
  • Slow loading times
  • Rare information on the product sheets
  • Awful return policies or lack of buyer warranties
  • Instability for the consumer

​Competitive Analysis

COMPARATIVE ANALYSIS

Primary Research

Research questions asked during the user interviews:

  • How do you buy your daily essential goods such as groceries, mop, milk, cold drinks, etc?
  • What do you consider the most, cost of the product, or time is taken to get the product/ delivery?
  • Do you prefer to shop nearby, shop online from the phone or web?
  • How much time do you spend on the phone and shopping online apps?
  • How often you used to wish to buy your dairy products?
  • Does there a specific shop or a specific store you keep on buying the goods?
  • What is the payment method you do and what you prefer?

User Quotes:

  • “ I like to shop from my trusted website or trusted shops only”
  • “Cost is much important but if I need something urgent then time is important.”
  • “People like to pay by different methods as per their convenience.”

Synthesizing Research

Affinity Map

Data points from the primary research were collected and organized in a way to form clusters of similar data points.

AFFINITY DIAGRAM

Summarising the categories from the affinity map:

  • Cost of product is effective when they buy for bulk if only a few are needed then time is effective
  • Users like to pay by all methods.
  • Most of the users used to shop for groceries and dairy products offline.
  • Trust is important for most users when they choose where to shop.
  • The frequency of shopping is generally low for most users.

Empathy Mapping

The findings from primary research, helped me implement empathy maps to organize insights, observations, and gain a better understanding of the user’s feelings, thoughts, and behaviors.

Empathy Mapping

User Personas

Riya Persona
Sriram Persona

Define

Reframing the results from the research phase as “How might we..”(HMW) questions, to turn those into potential problem statements.

How Might We:

  • Make the experience of users shopping the way they used to shop to their most trusted shops.
  • Minimize the distance or show the actual distance of shops from their home so that they can shop regularly at their trusted shops.
  • Make the search for a product much equivalent to the needs of the user and other similar options with different reviews and costs.
  • Show the customer what are the different payment options does the shopkeeper accepts.

Ideation

Brainstorming solutions to tackle the HMW questions:

  • There should be an image of every grocery product such as all types of products with the price and should be saved whenever the customer finds that product in the app.
  • By showing the customers the distance/time of the product it takes to deliver the product.
  • If the user searches for a product then similar products with costs will be shown with a cost. For eg., If someone searches for Maggi then when they find it from the best store they further have other options such as yippee, wai-wai, etc.
  • During checkout different payment options should be provided.

User Stories

Created user stories to identify the functional requirements of the app. The user stories follow a template of :

“As a (user), I want to (do some goal/task) so that I can (achieve some outcome).”

  • Get my daily need groceries in minimum time so that I don’t need to wait for a long time to be delivered.
  • Buy my daily needs from my home so that I don’t need to find them elsewhere by roaming in the market.
  • Buy the cheap and best product so that I can save my money.
  • Know different customer reviews so that I can trust on the basis of reviews.
  • Know the distance and time of the product to be delivered so that I can get assured that when I am getting the product.

Site Map

A visual representation or diagram that helped me to shows how pages are prioritized, linked and labelled.

Site Map

User flow

Defining the user flow that depicts the steps and actions in a specific order and sequence that the user must follow to get to the end of the task.

Sketches

Designed rough low fidelity sketches for the screens in the app.

Low — Fidelity Wireframes

The sketches were then converted to low-fidelity wireframes. These wireframes were used to document wire flows for the various red-routes of the app.

High — Fidelity Screens

Style Guide

Style Guide of Shop Nearby

Usability Test

A remote usability test was conducted over zoom with 5 participants. The participants were asked to perform 3–5 straightforward tasks that have well-defined end states.

Objective

  1. To gauge the learning curve of first-time users with no experience using the app and measure performance success, the usability test will assess the learnability of the app’s core functionality — What is the use of App. How they access their one red route.
  2. Identify accessibility issues — through accessibility testing, we can identify problem areas within the app’s user interface and architecture.

The usability test helped me identify issues and improve from my initial version of the high-fidelity screens:

Usability Test

Here’s the link to the Hi-Fi Design Prototype

Moving Forward

The App is designed for users or customers only. As the product is designed as B2B, Hence I would like to design an app for the retailer side also. How the shopkeeper would be notified for the product to deliver is also part of this product.

--

--