Grocery Store Case Study

Nectar

Year

2020

Duration

6 Weeks

Role

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 eases the daily needs of users, people 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 you 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 pandemic.

Also, it's hard to get 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 than one app to find what they want in good quality and at a suitable price while at home.

The Solution

Nectar helps users stay safe by helping them shop all their grocery items and having them delivered in less than one hour.

It provides the users with a generated list of categories so they can gladly select the items of their choice in the list.

There is a delivery option for the user to have the groceries delivered to their various location. They can as well send them to the different 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 young working parents living in Nigeria. I set a clear research goal to find the different methods my potential users will manage to do their grocery shopping at the moment.

To go more in-depth, I reached out to young parents living in Nigeria, and I was able to do a one-on-one user interview with four potential users.

I asked open-ended questions to give the interviewees a chance to talk more about their experiences and tell real stories about their everyday lives. I recorded all the interviews with 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 difficulties you are facing using your current method?
5. What do you like about your current method?
6. How often 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 different 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 an online shopping.
4. Waiting in queues for cashiers is time-consuming.
5. Some shopping apps provide only one payment method.

Wishlist

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 a similar market to identify what they serve and how they offer their services. I questioned and examined their strengths and weaknesses, looked into the users' pain points and collected reviews about other benefits the users wanted.

2. Definition and Design Strategy

Affinity mapping

I synthesized the data I gathered from the interviews; I then wrote them on post-it notes and organized the similar ones into a new group which will be identified later on as a feature. Each colour indicates a different interviewee based on their response to some close-ended questions.

Personas

What I did:
Based on the interviews, I defined two personas; they both contain the use cases of all four interviewees to get a better perspective of the problem and a clear solution for each.

Features Inventory

What I did:
In the feature inventory, I listed out all the possible features that the app will have according to the user research regardless of the priority. I used feature inventory so I can use the MoSCoW method to separate 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 ones.

User Flow

3. Layout Design

Wireframes

A wireframe is a connection between information architecture and visual designs; it's the blueprint, the simplified representation of the entire layout of the screen. The usability and efficiency of the final product often depend on well-crafted wireframes at the first step of the design process.

Low Fidelity

I ensured to use paper prototyping for my low-fi wireframes because it's easy to dispose of if there's any error 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 was part of my target audience to complete the MVP tasks.

User Interface Designs

Onboarding

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

Home Screen

What I Did:
The home screen is the first interface the users get to interact with after a successful signup/login, so I made sure 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 for users who had to quickly lookup an item.

Other Pages

Checkout and AR Delivery Tracking

Quick Shopping

The sole aim of the project is for users to buy groceries and have them delivered to their destinationsas fast as one hour.

Here's a prototype view of how shopping and tracking with AR features are done.