“Organico” Grocery Shopping Experience — UX/UI Case Study

Researching, designing, and evaluating an e-commerce site

Seema A
6 min readFeb 19, 2019

Project Organico

Introduction

Organico is a chain of grocery stores that partners with local farmers and sells organic groceries to health-conscious grocery shoppers at major cities of the United States.

Online grocery shopping usually serves the wealthier section of the population, with a current penetration of 2% in the overall grocery market, forecasted to grow to 18% by 2025. Organico intends to increase its sales, profitability and market share by opening an online store to serve major locations and test-run the online market for organic food, before expanding to other cities. The online store will allow shoppers to order fresh organic groceries with ease from the comforts of their home or office and receive them the same day at an affordable cost.

Problem Statement

How can we promptly deliver organic groceries to shoppers at an affordable cost?

Project goals

User Goals: Shop for fresh, organic and affordable organic groceries through the online store and get them promptly delivered to their homes at an affordable cost.

Business Goals: Test-run the online market by opening an online store, with the long-term goal of growing market share by expanding the customer base and increasing profitability by optimizing costs.

Product vision

Design an online grocery shopping storefront to enable effortless ordering and prompt delivery of organic groceries at an affordable cost.

Stage 1 | Research:

Business Domain Research

After some brainstorming, I came up with the questions that the business will have to address while planning to design an online grocery store.

We researched to understand the business domain and consumer buying patterns for organic food. We concluded that it would be profitable to invest in an online grocery store because of growing demand and willingness to pay for the prompt delivery of organic food at the consumer doorsteps.

User Research

User research was conducted to determine the demographics of potential consumers — their needs, expectations, and motivations to shop online for organic groceries. We created a user research plan and conducted open-ended user interviews to understand user pain points and empathize with them. A comprehensive report made after analyzing user interviews.

Significant challenges faced by consumers are summarized below:

Challenges while shopping for groceries

  1. Unable to find affordable and fresh organic vegetables at proximity to their homes.
  2. Too many aisles to look and search for the right products.
  3. Carrying heavy bags of groceries from the parking lot to their homes.
  4. Parking and traffic hassles at grocery stores during peak hours.
  5. Waste of time and energy waiting at the long checkout lines.
  6. Finding time to buy groceries

Challenges while shopping online for groceries

  1. The problem of fresh and right produce being picked for them while shopping online for groceries.
  2. Due to unavailability at nearby store, items get cancelled from order.
  3. The extra price they have to pay for delivery and tips when they buy online.
  4. Long delivery time.

STAGE 2 | Define:

Empathy map, Persona & Goals

After ample brainstorming and analysis, user attitudes and behaviors was assessed which are explained below in the persona and empathy map. Empathy map helps with a deep understanding of end users and persona may help us to infer what a real person might need. We also analyzed business goals and user goals to come up with a profitable model for the users and business.

Empathy Map
Persona
Project Goals

Competitive Analysis:

Detailed competitive analysis among three competitors. i.e., Instacart, Fresh Direct, and Amazon Fresh was done. It helps to highlight the strengths and weaknesses of the product and make more informed decisions about product strategy.

Competitive Analysis

Information Architecture:

Information architecture was created to organize and label the content to be easily understood by users, and ensure it’s usability and findability.

Information Architecture

Stage 3 | Design:

Building low fidelity paper sketches.

After many iterations of paper sketches, a low fidelity wireframe was designed using Figma. The number of low fidelity paper prototypes were created to quickly and easily test design solutions.

Wireframes

Wireframes help designers to determine which elements are required in each page, and the functional requirement that needs to be in place for those elements. Wireframes were designed by creating a skeletal structure, basic features, determining the user navigation, and help ease the user experience.

Colors and Typography

Colors
Typography and Components

Stage 4 | Prototype:

High-Fidelity Prototype was created using Figma

An interactive high fidelity prototype of “Organico” was designed using Figma The prototype functionality is limited to a single task flow of navigating to the home page, finding a product (peach), adding to cart, checkout to payment and confirmation.

Responsive Prototype Link: https://www.figma.com/proto/Gq8rAepjoTPsSMxWjXT46LED/Seema-s-First-Project-Organico?node-id=244%3A1115&scaling=min-zoom

Stage 5 | Usability Testing:

Usability testing of high fidelity responsive prototype was conducted to make sure whether the product is convenient to use and easy to navigate.

The test plan was designed to understand user preferences and identify potential flaws if any while navigating the site. The behavior of the user was observed to find out what works and what doesn’t work. Users were given specific tasks to complete at that time. I followed their body language, facial expressions, emotions and encourage them to “think aloud” and speak up whatever comes to their mind while using the product. Doing this exercise, I analyzed the qualitative and quantitative data to understand the usability issues within the product.

From the usability test findings, the behavior patterns were observed to find out what works and what doesn’t work and thereby come up with a perfect product solution.

Next Steps:

Researching, designing and evaluating “Organico” was a great learning experience. In limited time, we came up with a simple solution based on user research. If given more time and opportunity, I would have liked to work on designing other sections of the website such as check-out pages, recommended sections, reorder pages, etc.

I enjoyed doing this case study and would like to thank the entire team of mentors at Be designer for helping me during my journey of transitioning into a user experience designer. If you have any feedback for me, please add to the discussion in the comments section below. Please 👏 clap if you found this valuable and connect with me on linkedin.

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >

--

--

Seema A

Product Designer / Enthusiastic / Curious / Passionate