Hong Kong B.B.Q. Restaurant App

The Project

This project was an assignment for my "Introduction to Figma" course. I was tasked with designing a delivery app for customers to use when buying from a local restaurant of our choice. The purpose of this exercise was not to design a fully-fledged delivery app, instead it was to showcase my design thinking process and to create a slight rebrand of the restaurant.

Part 1

Discover and understand users

This section is all about discovering and understanding the user's needs, goals, and pain points. I set myself a few research goals before getting started.

1. Learn as much as possible about the customer demographics
2. Understand what attracts the current customers to the restaurant
   
3. Understand current solutions and the competitive landscape

Part 1

User interviews

I interviewed 6 individuals who are current and past customers of the restaurant and their ages ranged from 17 to 50 years old.

Main Findings

Competitor analysis

These are delivery and food ordering apps that were mentioned by the interviewees. My goal was to analyze what features they offer and see what features work well for them.

Features:

• Easy and intuitive navigation
• Large variety of restaurants/cafes to choose from
• Allows for restaurants to add in names of menu items in a different language

Features:

• Large variety of things to order
• Can buy from retail stores, grocery stores, and restaurants/cafes
• Simple, intuitive designs and navigations

Features:

• Offers delivery from variety of restaurants
• Allows for group orders
• Has rewards program that can be used with other Uber services

Part 2

Problem definition & ideation

At this stage, I narrowed down the project scope based on the insights I gained from my interviews.

Problem statement

Hong Kong B.B.Q. Restaurant customers are predominantly individuals who are familiar with the area or people who live in the area. The restaurant needs a convenient and beneficial way to enhance their online presence so that they can reach new customers.

The idea

Feature requirements

Based on my interview responses and my own perspectives from visiting the restaurant, I wanted to create a delivery app that has these features:

Early Sketches

I started by sketching some user flows and early wireframe ideas.

Part 3

Wireframing, visual design & prototyping

This section demonstrates the designed solution, from low-fidelity wireframes to a high-fidelity prototype. Figma was used as the design tool.

Low-fidelity wireframes

I designed some wireframes to give me a clearer idea of of how the screens should flow

Style guide

I kept the colors simple and chose a modern, variable sans-serif font that is easy to read on all screens. Red is a lucky color in Chinese culture, so I wanted to incorporate it into the design of the app. Additionally, Hong Kong is well known for its neon lights, so I decided to redesign its logo as a neon sign while using its Chinese name to draw a connection between the two.

The final design

All of these elements finally come together in the final designs. High-fidelity mockups were created and used to build a clickable prototype using Figma.

Prototype

Reflection

This project was a great way for me to practice conducting user interviews and conducting analysis on competitors. In order to stick to the timeline and submit a high-fidelity prototype, I had to make some trade-offs:

• Usability testing: I didn't have enough time to conduct user testing when creating my designs. Ideally, I would have incorporated feedback from users in my designs through usability testing during my design process.
• This project is only meant to showcase an idea of a delivery app for a local business. The features haven't been full planned yet.