A menu and ordering app for a trendy salad joint in Sydney, making it easy for anyone to eat healthy.
A menu and ordering app for a trendy salad joint in Sydney, making it easy for anyone to eat healthy.
PART ONE
PROJECT OVERVIEW
A menu and ordering app for Fishbowl, a healthy fast-food outlet located in Sydney, Australia. It serves health-conscious eaters who enjoy fresh made-to-order salads with a Japanese twist.
Proposed client
Fishbowl
Role
UX/UI Designer for the Fishbowl app from conception through to delivery.
Responsibilities
User research & interviews
Conducting a competitive audit
Defining user flows & information architecture
Storyboarding
Paper and digital wireframing
Low and high fidelity prototyping
Designing user interface mockups
Conducting usability studies
Accounting for accessibility
Iterating on designs
PROJECT OVERVIEW
Busy workers in the city do not have time to prepare a healthy lunch every day. Health conscious eaters with allergies or dietary requirements have difficulty finding places that will cater to their needs.
01
Takes effort to maintain a healthy diet
02
Time consuming to order food in person
03
Allergies or dietary requirements are not catered to
04
Customising meals is inconvenient
PROJECT OVERVIEW
Design a mobile app for Fishbowl customers to quickly and easily view the menu, customise ingredients, place orders, pay online and track orders for pickup or delivery.
01
Make it easy to eat healthy
02
Cut down time spent in queues or waiting for food
03
List all ingredients and make customisation fun
04
Allow users to save favourite/past orders
PROJECT OVERVIEW
Static, high-fidelity screens were developed in Figma, which gave a preview of the look and feel of the final product. I explored user interface design elements such as typography, colour, iconography, size, shape and more.
Learn more about each poke bowl by clicking through to the detail page. Simply add to cart or hit customise to continue.
Customising orders in person can be a pain, but this app makes it fun. Users can favourite the item to save time in the future.
Review and process the order in three simple steps. A confirmation note will pop up on completion, then automatically transition to the tracking page.
Users can see both current and past orders. The track order feature allows you to follow the live status of your delivery driver.
Users can customise the app, save their favourites, and update their account and accessibility preferences.
PART TWO
UNDERSTANDING THE USER
I conducted interviews and used the insights gathered to create empathy maps, user stories and personas. This helped me better understand the needs and motivations of users.
Primary user groups identified through research:
I purposely take lunch a bit earlier or later to avoid queues and ridiculous wait times.
Career professional in the city
I always confuse the servers when I have to make like 5 different changes to my poke bowl. But I can’t help it, I have allergies.
Health conscious eater
It’s always a pain to read the menu board. I usually have to stand in directly front of the counter and squint.
Person with impaired eyesight
UNDERSTANDING THE USER
Defining the frictions that frustrate the user or block them from achieving their goal is the first step to designing a seamless user experience.
Time
Working professionals have demanding schedules and other commitments, so they don’t have time to prepare lunch every day. Ordering in advance allows them to avoid long queues during peak lunch hours.
Health
Health conscious eaters would like to access healthier fast food options when eating out or ordering takeaway. They would also appreciate transparency about ingredients and macros.
Customisation
People with allergies or dietary requirements must tailor their meals to suit their needs. It can be a repetitive, inconvenient and confusing process every time they try to customise their meals.
Accessibility
People with disabilities find that existing platforms are not equipped with assistive technologies. In-person ordering can also pose a challenge to those who have problems with sight, hearing, mobility, etc.
UNDERSTANDING THE USER
Two fictional personas were established to represent the needs of a larger group of users. They were used to build empathy and stress-test designs to ensure I make the best decisions for my users.
Problem statement 01
Alex is a health conscious personal trainer who needs to view and customise ingredients in her lunch order because she needs to track her macros and keep her diet in check.
Problem statement 02
Taylor is a busy investment banker who needs a quick and easy way to order lunch because they don’t have enough time to meal prep or wait in long queues.
UNDERSTANDING THE USER
Mapping Alex’s user journey revealed how a mobile menu and ordering app for Fishbowl could be helpful for users who follow a health conscious diet.
PART THREE
STARTING THE DESIGN
While ideating design solutions, I generated a broad set of ideas for the app design, with no attempt to judge or evaluate them. For the Crazy Eights exercise, I came up with 8 ideas in 8 minutes.
UNDERSTANDING THE USER
I sketched a series of frames to visually describe and explore a user’s experience with the product. Together, the big picture and close up storyboards helped me visualise potential solutions.
.png)
.png)
STARTING THE DESIGN
I organised the product’s content into a sitemap. This ensures that users are able to understand where they are in the app and how to navigate to the information they want.
STARTING THE DESIGN
Drafting different versions of the same screen on paper allowed for rapid iteration. Low-fidelity sketches are a starting point to build the final, digital wireframes with elements which address user pain points most effectively.
.png)
STARTING THE DESIGN
The low-fidelity prototype connects all the wireframe screens. Using the early interactive model, I analysed functionality without building the actual product.
STARTING THE DESIGN
The low-fidelity prototype was tested in a usability study, where users were tasked to complete the core flow of placing an order. Research insights were implemented into the next design interation.
Study type
Moderated usability study
Location
Sydney, Australia
Participants
5 people
Length
30 minutes each
There are too many options, and it takes a long time to scroll through everything and choose one. Users need a tool to filter and sort the menu to their liking.
Users want a ‘favourite’ feature to save items for later, and a ‘reorder’ feature to repeat past orders. This saves time and effort, and increases usability for customised orders.
Currently, the entire process is on one long screen and users become easily discouraged, overwhelmed or bored. Users prefer to break down the payment process into small steps.
STARTING THE DESIGN
A method of synthesizing to organise research data into groups with common themes or relationships. I used this diagram to draw patterns from the usability study observations.
PART FOUR
REFINING THE DESIGN
The hi-fi prototype presents a core user flow that is clean, easy to use and quick to navigate. I explored interaction design concepts such as gestures and motion to enrich the user experience and increase usability.
REFINING THE DESIGN
It is important to consider accessibility in order to provide equal access and opportunity to people who live with disabilities.
Accessibility settings
Settings are found on the side hamburger menu and can be accessed from all main screens. They include options for language, high contrast, dark mode, magnification, large font, screen readers and more.
Search by voice
The search bar on the home screen allows users to search by voice. This benefits individuals who are not physically able to type in the search box due to a permanent, temporary or situational disability.
Communication tools
Users have the option to both call and text their delivery driver. These options were built for those with sight or hearing impairment, but the benefit extends to all individuals who prefer one option over the other.
REFINING THE DESIGN
I established a series of reusable elements and guidelines for product development. This creates consistency, reinforces brand identity and makes the product scalable.
PART SIX
GOING FORWARD
I learned that good design is practically invisible and bad design is blatantly obvious. Understanding this helped me and my usability study participants figure out which parts of the design required further iteration to improve the usability of the app.
Ordering via the app means I can skip the queue and the waiting period altogether. What a time saver!
Convenience
I like seeing what I’m ordering, so having pictures of both the poke bowls and the individual ingredients makes my life easier.
Visual design
GOING FORWARD
This app will give Fishbowl customers a new and easier way to order their favourite meals. After one more round of user testing and iteration, it should be ready for production.
Usability test no.3
Conduct another round of usability studies to ensure I have addressed and resolved all user pain points from the previous studies. Further iterations may still be necessary.
Ensure accessibility
Recruit users with different levels of technical ability or types of disabilities to test whether the app can be improved for minority groups.
Handoff for production
When the design has been finalised, collaborate with software engineers to bring it to life. This can be done by sharing the figma file link, creating custom thumbnails, exporting assets, and so on.
UX designer
Karen Lin
Tools
Figma
Photoshop
Illustrator
Graphics
Unsplash
Pexels
Flaticon
Iconfinder
Snazzymaps
