Nectar
UI/UX Case Study
About Nectar App.
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.
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.
Proposed 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.
My Design Process
1. Research & Discovery Phase
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.
Market Research - Interview Questions
- 01 - How do you buy your groceries now?
- 02 - Do you think there's a possibility of going shopping during the lockdown?
- 03 - Do you use mobile apps for shopping? If yes, which one do you use?
- 04 - What are the difficulties you are facing using your current method?
- 05 - What do you like about your current method?
- 06 - How often do you buy groceries?
- 07 - Tell me about your favourite grocery shopping experience. If any!
- 08 - In what way do you think the AR tracking feature be of help to you?
Market Research - Interviews Findings
Pain Points
- 01 - All interviewees had three or four different methods for doing their grocery shopping.
- 02 - It's not easy to locate all the items in a shopping list in a big grocery store.
- 03 - Delivery times are always convenient when it's an online shopping.
- 04 - Waiting in queues for cashiers is time-consuming.
- 05 - Some shopping apps provide only one payment method.
Wishlists
- 01 - On-time delivery
- 02 - Good tracking delivery system
- 03 - Easy to use search box
I don't want to go out to avoid catching COVID so I need a safe way to get my groceries - Interviewee
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
Afinity 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.
User Personas
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
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. This entails:
- 01 - The Must Have's
- 02 - The Should Have's
- 03 - The Could Have's
- 04 - The Won't Have's
User Flow
User Flow
3. Develop/layout Designs
Low Fidelity Wireframes
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. Afterwards, I brought the prototype into Figma for more visibility and did some usability testing asking the user who was part of my target audience to complete the MVP tasks.
UI Designs
Onboarding
Home Screen
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 Screens
Quick Shopping
The sole aim of the project is for users to buy groceries and have them delivered to their destinations as fast as one hour. Here's a prototype view of how shopping and tracking with AR features are done.