Back to top

Overview

Popsup is a multilingual, visual food ordering app, targeting dine-in customers. Currently, it is used across restaurants around Australia. I have joined the team as a UI/UX designer, designing interfaces for their web app.

Role

UI designer

Deliverables

- High fidelity web app screen designs

Tools

- Figma

Results

This web app is developed and released towards the end of 2020. It is currently used across 30+ restaurants across Sydney.
Click here to jump to final product

Problem analysis

Imagine going to a restaurant with dish names in a foreign language. There are no descriptions, and no images and you have no idea what the dishes mean! It's frustrating.

Popsup aims to solve this problem.
Goals of this product is for customers to:
  • View menu in their desired language, breaking the language barrier
  • Visually view menu items via images, so they can get a better sense of what to expect
  • Order items and pay on their mobile devices (contactless ordering), promoting social distancing (this app was designed at the beginning of COVID)
  • Order items in a group (for customers that came in large groups)

Wireframing

The information architecture was handed to me by the product team, while I wireframed screens:
We wanted the app to be simple, and have a similar logic and flow to other food ordering apps such as Uber and Deliveroo so users know what to expect.
Wireframes (click to view full) -

UX design challenge - Designing for group order

The group order function allowed customers that came in groups to order in one bill and pay together, rather than having separate bills, making the process long and hefty. They can also view what others have ordered real time.

One of the main challenge was to decide on the placement of the 'group order' button. Here were my three ideas visualised in wireframes:

Idea 1 -

The first solution was to let customers choose before entering the app. This idea was dismissed because it might generate complications before the customers get to browse the menu (eg. friends not knowing how to work the app, entering the wrong pin, internet connection issues etc.), causing frustrations.

So what's the final solution implemented?

The final decision was to combine the second and the third solution. This is so customers can join a group order even after they have added an item to cart, while eliminating the disadvantage the third solution brings.

Back to top

Language select

Customers can choose their preferred language before they enter the app

Menu

Visual menu giving users a better sense of what to expect.

  • Using language statistics from the back end, Popsup highlights dishes that are most popular amongst customers, speeding up decision making within customers
  • Restaurants can set recommended dishes to upsell dishes.

Dish details

Restaurants can provide more information about their dishes such as nutrition information and ingredients, so customers can make more informed decisions.

Cart

In a group setting, customers can view what others in the table have ordered.

Testing and results

After the built was done, I had taken part in using the app and providing the engineering team with what aspects to improve on and change.

Takeaway and results

Though I'm not a part of the project anymore, this app is currently used across 20+ restaurants in Sydney:
Some gains:
1. I've learnt how to use Figma!
2. Learnt how to better communicate in a cross-functional team. Since time was tight on this project, I had to reference their UI library the dev team used for develop web apps (Ant design).
Few takeaways and improvements:
1. Always create a set of component and guidelines before designing hi-fi interfaces. I was new to Figma working with this project and didn't make good use of its features or design reusable components before starting on hi-fi interfaces. It was SUPER time consuming to make design changes afterwards.
2. Improve contrast between text and background. There were some areas throughout the app where there was low contrast between text and background.
More projects