The app that delivers your favorite foods
The app that delivers your favorite foods
Intro
I worked on this project as a UX/UI Designer. My main tasks were doing light research, finding inspiration, creating flows, and components, and maintaining the design system. Designing high-fidelity wireframing, and prototyping flows were the most important duties of my role.
About the Product
Meze is a platform that offers food delivery with a high customization of dishes. Restaurants are allowed to create their menu and add a wide variety of toppings, dressings, and options not as common in other apps (like building your own pizza!).
They also have the advantage of using this product while using other delivery apps. Customers enjoy packages, points, and rewards. They can build favorite dishes by customizing the ingredients.
The main flows worked were the checkout process, pick up or delivery status, and creating a customized pizza.
Deliverables
User Flows
Style Guide
Design System
Wireframes
Prototype
Objective
While the project had already started, my task was to continue the work. The main focus was to finish the flows for desktop screens and continue with mobile, iterate some of the old designs, and organize the files shared by designers, developers, and product owner.
Challenge
Being the only designer on board, many decisions and expectations were set. The workload was heavy and I had to learn how to manage a large design system while creating new assets and features as well as maintaining consistency across flows. In the end, I learned how to prioritize tasks, and update libraries; the use of auto layout, variants, and variables also helped speed the design process.
Another challenge was working with no set framework, designs were made without proper user research or testing. There was very little time for ideation, all design was made on the go and in high fidelity so whenever iterations were necessary, it was very time-consuming.
Let’s begin by developing a user flow for the checkout process and review the experience
This flow has three starting points: by checking out as member, as guest or by creating an account
Users can try the app by ordering as guests and have two opportunities to become members; before ordering and at the end of the flow when their order is delivered. At this point, all the personal info has been saved, so they would only need to create a password.
Leaving a review will be quick and easy, only one question will be asked plus a comment can be left. The users can rate their drivers and the restaurant. The more reviews you leave, the more opportunities to save on their next orders.
STYLE GUIDE
COLOR PALETTE
Primary
Secondary
Tertiary
Palette of Grays
Base Colors
Gradient
The colors are bright and happy. They catch people’s attention and make them engage with the product.
TEXT STYLES
LAYOUT
Most of the spacing was set to be multiple of 8 except for some instances such as right and bottom padding (the client wanted all copy aligned to the left).
As for the grid applied to large (desktop) screens were 12 columns of 110px with a 20px gutter
UI ELEMENTS
ILLUSTRATIONS
COMPONENTS
With the help of components and variants, the design went smoothly and saved me time when it was time to prototype.
Wireframes-
Wireframes-
As mentioned above, the design approach for this project was to go straight into high-fidelity wireframes so no sketches or low-fidelity wireframes are available.
Checking out as a guest vs checking out as a member
Guest
Member
The main difference between the member screen and the guest screen is that the guest has to input their information, while the member version has their information stored so they can skip that step.
Users will input their preferred payment method which goes from credit card to Apple, and Google Pay, Cash, Venmo, and even Crypto.
As for tipping, percentage options are available as well as “Other” if the user decides to customize the amount.
Adding tip and payment method
When users check out they have the option to choose between delivery or pick up. If they choose delivery, their preferred address is stored but they have the option to modify it and leave instructions for the driver such as meet outside, leave at the door or other specifics. They can also choose to be delivered the same day or schedule it for a future date.
