Grocery Store Case Study





4 Months


UX Research, Competitive Analysis, IA, Wireframing, Usability Testing, UI Design

About project

Nectar is a simple, minimal and efficient e-commerce mobile app solution that ease the daily needs of it's users, and for those who make online purchases of groceries. It helps them search different grocery stores at once and to get various items on the go. The app also lets youo track your order using the AR feature.

The Problem

People find it difficult to do daily or weekly shopping for house needs, especially during this period of COVID-19.

Also it's hard to find all the grocery items they want in one place and order them easily without facing hassle in the search.

Different prices from one place to another makes the person search more to find what he or she wants in good quality and suitable prices while at home

The Solution

Nectar provide the users with a generated list of categories and they'll be glad to select the category of their choice in the list of categories

There is a delivery option for user to deliver the groceries to their location, they can as well send to multiple locations of their choice.

The Design Process

1. Research and Discovery

Research Plan

For my research plan, first I had to identify my target audience which was working parents living in Nigeria, then I set a clear research goal which was to find the different method my potential users will managed to do their grocery shopping at the moment.

To go more indepth I reached out to people who are young parents living in Owerri, and managed to do a one-on-one user interview with 4 potential users.

I asked open ended questions to give the interviewees to chance to talk more about their experience and to tell real stories about their everyday lives. All interviews were recorded with their permission.

Interview Questions

  • 1. How do you buy your groceries now?
  • 2. Do you think there's a possibility of going shopping during the lockdown?
  • 3. Do you use mobile apps for shopping? If yes, which one do you use?
  • 4. What are the dificulties you are facing using your current method?
  • 5. What do you like about your current method?
  • 6. How ofthen do you buy groceries
  • 7. Tell me about your favourite grocery shopping experience. If any!
  • 8. In what way will the AR tracking feature be of help to you?

Interview Findings

Pain points

  • 1. All interviewees had three or four differnt methods for doing their grocery shopping.
  • 2. It's not easy to locate all the items in a shopping list in a big grocery store.
  • 3. Delivery times are always convenient when it's online shopping
  • 4. Waiting in queues for cashiers is time consuming.
  • 5. Some shopping apps provide only one payment method.


  • 1. On-time delivery
  • 2. Easy to use search box
  • 3. Good tracking delivery system

Quotes from Interview

"I wish to have only one way to do my shopping instead of two or more"

"I don't want to go out to avoid catching COVID so I need a safe way to get my groceries"

"Since we had our baby we don't have time to go shopping and we'd love to buy our groceries as fast as possible"

Competitors Analysis

I studied and tested a few mobile and web applications in the similar market to identify what they are serving and how they are offering their services. I questioned and examined their strengths and weaknesses, looked into the users pain point and colected reviews about other benefits the users really want.

2. Definition and Design Strategy

Affinity mapping

I synthesized the data I gathered from the interviews, wrote them on post-it notes and reorganized the similar ones into a new group which will be identified later on as a feature. Each colour indicate a different interviewee.


What I did:
Based on the interviews I did, I was able to define 2 personas each of them has it's use cases to get a better perspective of the problem and a clear solution for each.

Feature Inventory

What I did:
In the feature inventory I listed out all the features that could be in the app according to the user research regardless of the priority. This is so that I can use the MoSCoW method to seperate what must be, should be, could be and won't be in the app.

The MoSCoW Methodology

I used the MOSCoW method to prioritize the features in the dream list and excluded some of the unnecessary features.

User Flow

3. Layout Design


This is the connection between information architecture and visual designs, it's the blueprint, the simplified visual representation of the screens layout. The usability and efficiency of the final product often depend on a well crafted Wireframes at the very first step of the design process.

Low Fidelity

I ensured to use paper prototyping for my low-fid because it's easy to dispose id any error is encountered and it's less expensive

Mid Fidelity

Next I brought the prototype up to Mid Fidelity in Figma and did usability testing asking the user who were part of my target audience to complete the MVP tasks

User Interface Designs


What I Did:
For the Onboarding screens I decided to follow a minimalistic design to keep it clean and simple. The users will have to enter their phone numbers to get verification and then select their location, this will enable nacter to know where deliveries should be made.

Home Screen

What I Did:
The home screen is the first screen a user gets into after a successful signup/login, so I ensure it started with a catchy phrase "Exclusive Offer" such that it would immediately grab my users attention to find out what the offer contains. I also put a search box at the top incase a user had to quickly look up an item.

Other Pages

Checkout and AR Delivery Tracking

Quick Shopping

The sole aim of the project is for users to be able to buy groceries and get them delivered to them fast as one hour. Here's a prototype view of how shopping is been done and tracking of delivery using the AR feature.