Project overview

The product:
In this case study, I will take you through my entire process of designing interfaces for the grocery delivery app! An app makes online grocery delivery and grocery shopping quick and easy and provides fresh, convenient, and affordable services to busy people.

Project duration:

Sep 2022 to Feb 2022

My role:

User Experience Designer responsible for the app design from concept to delivery.

Responsibilities:

My main responsibilities were conducting interviews, developing paper and digital wireframes, low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating on designs.

The problem:

People need groceries but are not ‘happily’ willing to go out and get them. Now imagine you get a chance to get fresh fruits, plants, milk, and all other important household products delivered to your door.

Goal:

Minimizing the day-to-day problems faced by grocery shoppers by creating an app.

Target

The app can be used by almost everyone, but its majority is used by the working class, college students, and household women.

Challenges

Create the quickest solution for ordering groceries with user-friendly features and innovative features.

Research

In order to obtain useful information about how the app should be designed, both surveys and non-direct interviews were conducted with 17 people signed up, aged between 21 and 50, and most of them were nine-to-five employees.

While surveys are a quick and easy way to gather user data, qualitative research methods like user interviews gave me insight into what users are actually thinking and their current grocery shopping journey. Here are some direct quotes from users:

Design

This stage is important because a polished, well-structured, and seamless design not only helps users navigate the app easily but also keeps them coming back to it. Therefore, we have to make sure to provide the best designs to our customers.

Low fidelity sketches

Before diving into digital wireframing, the first step I did was creating hand-drawn sketches.

Low Fidelity Wireframes

I created a low-fi design using Figma to develop quick concepts about the user interface before making it into a high-fidelity design based on Information Architecture

Low fidelity wireframes Link

Branding

Now is the time for the logo. I chose the logo and tried to add some natural flavor to it by placing a leaf in the middle of the bowl.

Visual Design

Usability Testing

Here are some feedbacks that I received:

• Add a Shipping Address Screen while Checkout

• Label the icons in the Tab bar

Lo-Fi to Hi-Fi Mockups

Prototype Link

what i learned

This is the final part of my case study project, I really enjoy doing case studies because the idea for this project was inspired from a personal pain point I went through. I had to learn so many resources in such a short time. But for sure, it was a fun and exciting experience and I learned a lot!

I find user interviews and usability testing challenging, how to put yourself in the user's shoes, see different points of view, and capture users' emotions or words that have other meanings. But learn your lesson and do better next time

Next Steps

The next thing I do is perform another usability test to try and figure out if I've solved the user's pain point.

I will continue to work on designing and adding different features such as promo pages and fan pages.

Consult with stakeholders to understand the problems they are facing and what I can do to help design a solution.

Thank you

Thank you for reading this far, I appreciate you taking out time to go through my short case study!