RISE Cafe
The Problem
Users need to be able to easily identify food types and make customise orders when dining out because getting the staffs attention to check and make special requests can be time-consuming.
My Role
UI/UX Designer
Responsibilities
User Research / Competitor Analysis / Information Architecture / User Flow / Wireframes / Usability Studies / UI Design / Design System
Tools
Figma
A mobile ordering app for an Australian cafe which allows users to submit their order digitally whilst dining in, or taking away.
User Research
I conducted interviews & empathy maps to understand the users that I’m designing for and their needs.
A primary user group identified through research was adults who tend to want to customise their order and have specific dietary requirements when dining out. This user group confirmed initial assumptions about the customers who would dine at the Australian cafe.
Research also revealed other challenges including waiting for a member of staff to serve you, not knowing what to expect at a new restaurant, as well as problems that occur when making an order with a member of staff such as your order being taken down wrong.
User Persona:
Millie
Using the information gathered from my user research, I created a persona to represent the target users.
Problem Statement
Millie is a Nurse who needs to easily check food types and customise her order when dining out because going through this with a member of staff is not time-efficient.
User Journey Map
Persona: Millie
An easy way to customise orders and easily submit additional requests.
Goals
After creating user journey map, the user goals which were identified included making a decision on what to order, checking dietary requirements and adding/removing ingredients from menu items.
Opportunities
Analysing these goals, opportunity improvements identified include providing the user with images of food, the ability to filter by food types, food category navigation, the ability to add/remove items, as well as a request box.
Wireframes
After sketching out some wireframes on paper and doing iterations, I took the ones which I thought solved the pain points best and created digital wireframes.
A moderated usability study was conducted with a low-fidelity prototype.
Five participants / 18-65 years old / who dine out at least once a week.
Insights defined from the themes in the study:
It needs to be more clear to users what menu items
the filter is affecting.It needs to be more clear how the menu functions
and which elements are scrollable.The nutritional and dietary info is easily found in the app.
Customising an order is easy to do within the app.
Usability Findings
Refining & Prototype
Based on the findings from the usability study, I added a home screen before the menu so that users had a clear overview of the menu categories. I also amended the navigation tab so that it allowed users to filter through the food categories. The food types, such as dietary requirements, are now visible through icons with an overlay filter to filter through the different dietary requirements. I also re-thought the layout of the menu to show a snippet of the item description.
After Usability Study
Before Usability Study
Final UI Design
I experimented with different styles, taking inspirations from sites such as Dribbble and Behance. After a couple of weeks of iterations, I moved forward with the strongest and most visually pleasing style. As red has a strong link to increased appetite and excitement, I chose this as the primary colour paired white, grey and touches of light pink. Each screen has a consistent design style.
