Bakkal Store
UX DESIGN | DESIGN SYSTEM | VISUAL DESIGN
Bakkal Store Mobile App Design Case Study
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.
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
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.
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
Opportunities
01
Add a search feature that will allows to search through the items
02
Allows sapp users to update products price with minimal amount of clicks
03
Allows app users to update price in a bulk by selecting items and changing their price at once
04
Allow app users to scan Barcode of a new item to add new items to their inventory
05
Add a feature that will allow to enter discounted price for items, define discount conditions and set a time limit
Information Architecture
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
Splash
The first thing you see when opening the app is a Splash screen following the Sign In/Sign Up journey
Home
Once you're signed in, you're able to see and track new and dispatched orders
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
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
Other Screens
