Cover.png

Bakkal Store

UX DESIGN | DESIGN SYSTEM | VISUAL DESIGN

Food Delivery Store

Back End App Design

Download_on_the_App_Store_Badge_US-UK_RG
google-play-badge 1.png

Project Overview

Timeline

Spring 2022

My Role

UI UX Designer

Tools Used

Figma, Zeplin

Bakkal Store is an ethnic food delivery mobile app for stores based in California. It helps stores to manage their orders and assign a driver for delivery. The ultimate objective for this project was to make the overall experience more customer-oriented and user-friendly thus making it easier for the stores to manage their orders.

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 outdated and not user-friendly. There are a few key functionalities missing.

Our goal was to make it easier for the stores to manage their orders 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

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. There are a few key functionalities missing.

Current App Pain Points

Frame 1312.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

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

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

Visual Design

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

Splash

The first thing you see when opening the app is a Splash screen following the Sign In/Sign Up journey.

Home Screen

Once you're signed in, you're able to see and track new and dispatched orders.

Frame 1293.png
Frame 1292.png

Items

In the Items tab, you're able to see and manage your products, set a discount, or make an item unavailable.

Discounts

In the Discounts tab, you're able to manage all store's automatic discounts and discount codes, create new discounts or remove others.

Frame 1294.png
Frame 1295.png

Earnings

You can see all of your earnings history through this view as well as total orders and the average rating of your store.

Profile

Profile stores all necessary information about your account, statistics, store open times, printer settings, and more

Frame 1296.png

More Screens

Frame 1297.png