Cover.png

Bakkal

UX DESIGN | DESIGN SYSTEM | VISUAL DESIGN

Ethnic Food Delivery

Mobile App Design

Download_on_the_App_Store_Badge_US-UK_RG
google-play-badge 1.png

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

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.

Heuristic Evaluation 

Frame 1119.png

Issue

The filter options are limited and aren't properly displayed

Recommendation

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

Issue

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

Recommendation 

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

Frame 1120.png
Frame 1121.png

Issue

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

Recommendation

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

Issue

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

Recommendation

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

Frame 1122.png
Frame 1123.png

Issue

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

Recommendation

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

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

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

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 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

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.

Colors

Frame 1286.png

Typography

Frame 1287.png

Buttons

Frame 1289.png

Forms

Frame 1290.png

Visual Design

Frame 1284.png
Frame 1285.png
Frame 1291.png

Onboarding

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

Home Screen

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

Frame 1293.png
Frame 1292.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.

Cart & Checkout

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

Frame 1294.png
Frame 1295.png

Wallet

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

Profile

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

Frame 1296.png

More Screens

Frame 1297.png