Zara Hatke

UI design development for a restaurant that offers delivery on its customizable menu

The Groundwork

THE DIRECTIVE

Build a web OR mobile app for a restaurant that delivers food. The project required us to see it through from conception to implementation.

IDEATION

A restaurant that offers extensive customizations on items and delivers food within a certain radius of its physical location.

PROCESS

Strategy

To understand the roles, demographics and psychographics of the intended target audience
To identify the user needs - what does the user need to be able to do through this application
To identify the client needs - what does the client need to be able to do through this application

Outline of Scope

To identify the features a user will be looking for in the app. The features were extrapolated from the user and client needs identified in strategy.

This step required me to go through multiple iterations of the scope to keep the app simple and elegant while giving the user all they need to achieve their goals.

THE SITEMAP/USERFLOW

Based on the User requirements and the Functionality requirements, I built a flowchart to gain a comprehensive understanding of the user flow.

I went through every scenario of what the user would want to do through the app. As I identified these I built quick and simple iterations of user flow for each scenario. Then I combined these individual flows to create a consolidated sitemap.

This process helped me focus on individual flows to make sure that nothing was missed. It also made it easier to work through and understand the various connections between each flow.

FINDING INSPIRATION

Based on my original ideas for the app, I then built two mood boards.

The first one is a collection of images, quotes, typefaces that depict the restaurant concept in and of itself. This mood board also helped me narrow in on the color scheme that I might want to use for the app.

The second mood board is focused more on finding a visual style for the app. I looked at many examples of food apps and found a visual style that I thought would be appropriate for Zara Hatke.

ZaraHatke_Final_Portfolio_11.MoodBoard ii.png

ZaraHatke_Final_Portfolio_10.MoodBoard i.png

The Wireframes

QUICK PEEK

USER FLOW:

Login
Choose Delivery / Now (ASAP)
Choose customize
build a meal
add to cart
build a second meal
add to cart
view order summary/cart
add any special instruction/notes
proceed to checkout
add address and payment details
Place order

ZaraHatke_Final_Portfolio_12.WireframesMobile.png

FOR THE MOBILE

The login page allows user to login using registered email and password, sign up for an account, alternate sign-in options, or proceed as guest.

The original design for the next page was to choose between dine-in, pick-up, and delivery followed by a page to pick date/time of delivery. I consolidated these two pages as a user wanting a service right away need not go through to a page with scheduling options.

FOOD CUSTOMIZATION

With my original design, I thought checkboxes with all the choices in list form might work as it allows the user to see all available options without having to scroll. But after experimenting with it, I found it cumbersome to go through multiple lists in order to make my choices. So I changed the design to have image carousels for each section instead. The benefit of doing that was making the page less text-heavy, and allowing users to see what they might be ordering. After all a picture is worth a thousand words. It also allowed me to add a description under items that are not self-explanatory.

CHECKOUT

The order summary page allows users to view their entire meal order with all the customizations they made. It also allows them to add special instructions at this stage. I made the decision to add the special instructions and allergy text input boxes here as it would be easier for users to input these notes when they see their entire order for each individual person.

FOR THE DESKTOP

These wireframes are samples of the 'home' and 'contact us' pages for the restaurant website

The main objective of this was to see how I could carry the same visual style into a different format and still make it easy and intuitive to navigate.

ZaraHatke_Final_Portfolio_13.WireframeHomeWeb.png

ZaraHatke_Final_Portfolio_14.WireframeAboutWeb.png

The Mockups

GETTING STARTED ON AN ORDER

DESIGN DECISIONS:

On the login page, I chose to present the login and signup options as tabs instead of separate elements. This allowed me to use the real estate more efficiently. As a result I was able to make the 'proceed as guest' slightly more prominent for users who might want to choose that option.

For the next two, I stayed true to the design choices I made during wire framing, allowing users to see and make all their related choices on the same page.

I decided to keep the options for customize, preset, and surprise as simple bands in order to be able to add a short description for each option. This would gave more clarity to new users who might not be familiar with the concept of this restaurant.

BUILDING YOUR MEALS

After looking at multiple food delivery apps, I decided to highlight the options that the user has chosen to be in their meal instead of add an 'in cart' icon. This is so the user can see at a glance, all the choices they have made as opposed to looking for a tiny icon in a corner. This decision ensured less clutter on the page/images without compromising on functionality.

CHECKOUT

Staying true to the visual design choices made earlier, I was able to make the order summary stay in tune with the rest of the design while making it slightly off-beat. each section is given a different color and the allergies section highlighted where the user has made an entry. This is to draw attention to the section with the highest stakes helping the user to quickly locate and identify any missing information/mistakes.

DESKTOP: HOME PAGE

DESKTOP: CONTACT US PAGE