Person holding a smartphone displaying a restaurant review app over a table with various plates of food, including rice, vegetables, and appetizers, at an outdoor dining area.
Graphic with the words 'Top UP' in white and red against a white background.

What is

TopUp?

TopUp is a food ordering app that streamlines the process from selection to delivery, ensuring efficiency and inclusivity. Personalized recommendations and customizable options make TopUp the go-to app for seamless food ordering.

Project Overview

Project Duration

Three Months (Initial Launch)

Tools:

Figma, Miro, Corel Draw, Photoshop, Zeplin, Google Analytics, MS Excel, Powerpoint, Illustration, Paper and Whiteboard

Team

UI/UX Designers, Developers, and Product development managers

Method:

Traditional Project Management

The Product

App Name: TopUp

Category: B2C Mobile App

Colour: Dark Red, Black and White

Features: Online Food Ordering, Delivery and Tracking.

The Case

The Problem

Users frequently find ordering meals via mobile apps frustrating because the process is often cumbersome, and they lack sufficient information and control over their meal choices before placing an order, leading to a less satisfying and more challenging experience overall.

The Goal

To streamline the entire food ordering process, ensuring ease from selection through checkout to delivery, all while developing an app that incorporates assistive technologies specifically in consideration for customers with disabilities.

My Role

In my role as the UI/UX Designer, I took charge of conceptualizing and creating intuitive user interfaces, which included designing wireframes, prototypes, and mockups, as well as conducting comprehensive UX research. I actively participated in meetings with the product manager and stakeholders while collaborating closely with a cross-functional team to develop a user-friendly product.

Pain Points

Lack of Assistive Technology

Lack of features such as screen readers, voice-to-text functionality, and high contrast options in mobile apps.

Absence of a pay-on-delivery option for individuals without credit cards or those who are not comfortable with online payment methods.

Irresponsive Live Order Tracking

Live tracking details are often inaccurate or unresponsive.

Contacting the delivery person while they are in transit is impossible.

Non-editable Menu

Menu options are predominantly fixed, with limited flexibility for adding or removing items.

Dish information lacks detail, which is crucial for people with allergies or other health conditions.

Lack of Order History

Not being able to access previous orders makes it challenging to reorder the same meal.

Difficulty in keeping track of meals consumed over time.

Personas

Persona profile of Natasha Rein, a 22-year-old bank customer care staff. Contains her photo, age, education, hometown, family, and occupation details, a problem statement about her job responsibilities, her quote about ordering lunch online, her goals and frustrations related to her work, and a yellow box with additional information about her job difficulties.
Overview of a persona profile for Simon Fisher, a 45-year-old insurance sales man with a focus on his goals and frustrations related to dining and online meal ordering, including a photo of him eating at a table with various foods.

Journey maps

Table outlining app development tasks and features for order delivery: Find the App, Explore Meal Menu, Edit Menu options, Set Delivery Instructions, Place order and checkout, and Pick Up Order, with specific task details.
A detailed project plan for Persona Samantha Rein, outlining steps for buying lunch for colleagues using a mobile app, including tasks, feelings, and improvement opportunities across six action stages.

Paper Wireframes

I created several paper wireframes to visualize the design concepts I had in mind, and I shared them with my colleagues to gather early feedback during the design process.

Hand-drawn wireframes for three mobile app screens: the first labeled 'Profile and Menu Icons' with profile icon, menu icon, large image placeholder, and three small image placeholders below; the second labeled 'Profile and Menu Icon Search Bar and CTA' with profile icon, menu icon, search bar, image placeholders, and text lines; the third labeled 'Profile and Menu Options / CTA' with profile icon, menu icon, nine image placeholders in a grid, and a footer placeholder.

Digital Wireframes

Based on our research findings, we implemented an option that enables customers to customize their meals by adding or excluding specific ingredients and adjusting portion sizes using the customization button.

Mobile app interface for food ordering with a logo at the top, image placeholders for meal pictures, menu options, and an 'Add to cart' button, along with a section labeled 'Similar Meals' showing related meal options.

We added an option for customers to view and set their preferred delivery address and payment option.

Mobile shopping checkout screen with sections for delivery address, payment method, and order button.

Usability Study Findings

  1. Users expressed confusion regarding whether to click on "make an order" or "make your meal," finding both menus unclear.

  2. Users couldn't locate the option to add group orders.

  3. Users struggled to locate the "add to cart" option and were unable to select their preferred payment method.

  4. Users were charged without having the opportunity to review and confirm their orders.

Food ordering app interface showing main dish options. Top section with search bar and icons for main dish, side dish, and drinks. Below, images of Roasted Pork Set and Grilled Turkey Set with ratings, estimated preparation times, and photos of the dishes.

The initial choice of a bright red color failed to comply with accessibility guidelines, particularly concerning contrast ratios that ensure readability for all users. In response, I opted for a darker shade of red that maintains visual appeal while meeting these crucial accessibility standards.

Mobile app screen showing menu options for ordering food. The top features a search bar and filter options for Main Dish, Side Dish, and Drinks. Two food sets are displayed: Roasted Pork Set and Grilled Turkey Set, each with an image, description, estimated time, and ratings.
Screenshot of food items from a mobile app. Top: grilled lamb chops on a plate with lettuce, center: pepperoni pizza slices with salads on a pink table, bottom: bowl of chicken noodle soup with fried chicken pieces and chili peppers.

I adjusted the negative space to reduce the app's overly bright appearance. I also made some interface changes to improve how users interact with the app.

Screenshot of a mobile app displaying three festive meal sets: Roasted Pork, Grilled Turkey, and Grilled Fish, each with a description, estimated cooking time, and ratings.

Mockups

Screenshot of a restaurant food app called Top Up showing two meal options: Roasted Pork Set and Grilled Turkey Set, with images, ratings, and preparation times.
Mobile app menu screen with options including Change Language, Profile, Order History, Favourites, Your Rewards, Payment Options, Send a Gift, Privacy, Help, Settings, and About, with navigation icons at the bottom for Home, Search, Cart, and Account.
A mobile app screen showing three side dish options: roasted pork set, grilled turkey set, and grilled fish set with images of each dish.
Mobile screen displaying order confirmation with a large checkmark icon, text indicating order has been confirmed, and a button labeled 'Return to Home'.

Video of First Prototype

Scrabble tiles spelling out the word 'EMPATHY' on a wooden surface surrounded by scattered letter tiles.

Considerations

Accessibility:

  • I chose a darker shade of red to align with accessibility standards and better accommodate users with color blindness.

  • Incorporated standard icons throughout the design to enhance navigation accessibility for all users.

  • Language Options:

    • Implemented a language change option, enabling users to switch to their preferred language for improved accessibility and usability.