Bakkal

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.

Problem

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.

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 

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

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

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.

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.

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.

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.

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

Typography

Buttons

Forms

Visual Design