Cover.png
layer1.png

UX DESIGN | DESIGN SYSTEM | VISUAL DESIGN

Ethnic Food Delivery

Mobile App Design

Project Overview

Timeline

Fall 2021

My Role

UI UX Designer

Tools Used

Figma, Zeplin

Bakkal is an ethnic delivery mobile app based in California. It helps to find ethnic grocery stores nearby and deliver them to your home. The ultimate objective for this project was to make the overall experience more customer-oriented and user-friendly thus increasing customer retention.

Project Timeline

The project was divided into three main parts for a better visual representation of the events overview. Starting with the discovery stage all the way to the final product.

Frame 1115.png

Goal

The current app design is confusing and not user-friendly. The overall bounce rate is high during the checkout process.

Our goal was to increase customer retention by creating a better user experience and a more pleasant visual presentation of the app.

My role

​My role in this project as a UI/UX designer was to take ownership of the app design, from concept to delivery. My responsibilities included: user research, competitive analysis, wireframing, prototyping, usability testing, iteration, and collaboration with the development team.

Design Process

The Double Diamond is a structured design approach to tackle challenges in four phases: Discover/Research, Define/Synthesis, Develop/Ideation, Deliver/Implementation.

Problem

Frame 1116.png

Competitive Analysis 

Before designing an app it's important to research solutions that already exist. This will help strategically create a superior experience that allows the app to stand out from the rest.

Frame 1118.png

User Persona

After gathering the data of the current users of the app I have created a user persona that demonstrates key user needs, expectations, and pain points

Frame 1125.png

Previous Design & User Flow

The current design is visually heavy and confusing. The user takes a lot of time to understand how the app works and where to click. Once the user reaches the checkout payment options he bounces.

Frame 1285.png

Heuristic Evaluation

The filter options are limited and aren't properly displayed

The search bar is empty on click and doesn't allow to search by products, cuisines, or recipes

The overall design of the homepage and store page is not attractive to the user

The Product list and Product page don't display the product in a good way and there is not enough information about the product

The design of the payment flow is confusing and the bounce rate is high

Opportunities

01

Create a wide variety of filter options including sort by cuisine, categories, distance, and more

02

Include more suggested stores, products, cuisine on click, as well as allow more search options

03

Design user -friendly interface and include more ecstatically pleasing images for the stores

04

Make a 2 column list of products to show the images properly. Include a basic description of the product, nutritional value, and recipes

05

Design a simple solution for the payment. Include an option to scan your card

Journey Map

The user journey map helped us understand the user context and gave us a clear picture of the steps the user goes through when interacting with the app. It allows us to see the app from the user's point of view

Frame 1124.png

Information Architecture

Frame 1227.png

User Flow

After completing the information architecture and user journey I had a better understanding of the basic structure and functionality of the app. The goal was to create an intuitive user flow making it easier for the user to order products

Frame 1280.png
Frame 1284.png

Wireframes

Design System

Based on the existing brand guidelines I have created a design system for this app to make the design and future iterations consistent and aligned

Frame 503136447.png
Frame 1291.png

Onboarding

The first thing you see when opening the app is a Splash screen following the onboarding for new users

Frame 1292.png

Home

Once you enter your location, you're able to see all store options around your area and order products

Frame 1293.png

Sign In & Sign Up

Once you added your items to the cart and would like to checkout you would need to Sign In or Sign Up

Frame 1294.png

Cart & Checkout

Once you're signed in and added items to the cart you're able to proceed with the checkout process

Frame 1295.png

Wallet

The first thing you see when opening the app is a Splash screen following the onboarding for new users

Frame 1296.png

Profile

Profile stores all necessary information about your account, language, and currency settings, notifications, live chat, legal documentation, and more

Frame 1297.png

Other Screens