UI UX DESIGNER
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.
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
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.
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. Once the user reaches the checkout payment options he bounces.
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
Information Architecture
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
Onboarding
The first thing you see when opening the app is a Splash screen following the onboarding for new users
Home
Once you enter your location, you're able to see all store options around your area and order products
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
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
Other Screens