Grocery Cart: Mobile Application Design

Grocery Cart Mobile Application Design

Designing a grocery shopping experience with an intuitive mobile application.

Overview

The project goal was to develop a mobile application that is user-friendly and facilitates the ordering, purchasing, and delivery aspects of the grocery shopping experience with the aim of improving customer satisfaction and loyalty.

TOOLS

MY ROLE

Responsible for user research, visual design, and UI Production.

TIMELINE

September 2021

(2 weeks)

Project Brief and Objective

Grocery Cart is a newly established business that offers grocery shopping and delivery services to individuals who require assistance with their shopping needs. One of the key selling points of Grocery Cart is their commitment to providing the best local prices on grocery items, delivered right to customers' doorsteps.

To enhance their customer experience, Grocery Cart aims to develop a mobile (iPhone) application that is user-friendly and streamlines the ordering, purchasing, and delivery aspects of their service.

My Approach

Understand

Research

Empathize

Ideate

Conclusion

Understand

Understanding the problem and business objective

Understanding the Problem

As online grocery delivery services become more prevalent, it is important to identify and address any pain points in the user journey that may hinder the overall user experience and affect conversion rates. The goal of the Grocery Cart application is to optimize its interface and functionality, prioritizing the needs of users while also considering the requirements of the business.

Understanding the Business Objective

Streamline the account creation process and data collection to ensure accurate delivery of groceries.

Organize the major food categories to provide a smooth browsing experience for customers.

Develop an interface that enables customers to easily select their purchases, view the price of each item, and add them to the cart.

Implement a feature that allows customers to compare prices with other local grocery chains to build trust and provide the lowest possible prices for the items.

Research

Competitive Scans & Market Analysis

Different features of multiple applications were analyzed and a SWOT analysis was carried out on the design patterns of each to understand the market trends.

Empathize

Understanding the Users

Persona was developed for a young adult user who has an urgent need to order groceries at the lowest price possible. This persona was created by considering the user's story and taking into account their specific needs and goals.

Storyboard was developed keeping in mind user's personality, and user story to better understand user story and perspective.

Understanding the User Goals

Quickly and easily find the groceries they need.

See prices and compare with other stores to get the best deals.

Ensure accurate and timely delivery of groceries to their specified location.

Easily customize their order by adding or removing items as needed.

User Task Flow

Ideate

Low- Fidelity Prototype & Sitemap

High- Fidelity Prototype

Splash Screen

The splash screen for the application was designed with a large image associated to fresh groceries, with plain text as the name of the application. This would clearly convey the use and purpose of the application to the user.

The log in screen has been designed to make the process easy for the new users, while taking in the maximum information.

The sign up screen has been designed to make the process easy for the new users, while taking in the maximum information.

Homescreen

The contents on the home screen have been placed in a way that the users can find all the necessary information and item categories easily within a few scrolls. As the user opens the first page, they first view the new deals and other on-sale information that will not only attract them to browse further.

Homescreen (Scrolled down)

The scrolled down screen focus on highlighting the business goal of providing price comparisons with other stores.

Category Screen

The categories page divides a broad category into smaller chunks to enable the user to find any product they would want without much search. The aim with the design was to allow users to narrow down their search, and yet showing them all the options of the category to choose from.

Product Screen

The product’s page is structured in a way that it is similar to user’s mental model with the image of the product at the top for a clear understanding also with options to add it in cart or Wishlist and possibility to change the quantity.

Checkout Screen

The checkout screen allows the user to review and edit the final order followed by option to add gift cards and promotional codes. It also provides other details about the order like the total amount and broken-down charges.

Checkout Screen

Checkout – Alert Message

Once selected, they get to choose their payment method and can pay for the order using a third-party application. The users are also notified about moving to the other application through an alert.

Order Placed Screen

The green tick gives users a confirmation of the order.

Hamburger Menu

The hamburger menu, when tapped takes over the entire screen and provides the users with options to navigate through their account information and change it, saved and previous orders, edit or add payment modes and check their rewards. It also provides quick links for the users to go through the terms and conditions and contacting the help centre as well as the sign out option.

Future Steps

Conducting user testing on the prototype to gather feedback, identify areas for improvement, and evaluate the website's usability and intuitiveness.

Creating a matrix of the test results to demonstrate the effectiveness of the design.

Using the insights gained from this project to iterate and improve upon the application, as well as other similar projects in the future.

Twisha Shah