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

Journey maps

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.

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.

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

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.

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.

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.

Mockups

Video of First Prototype

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.