02

Introduction

HappyToo is an online local food ordering and delivery platform based in Brisbane, Australia. HappyToo connects customers with locals and allows them to find hidden-gem restaurants by providing a professional delivery system.

Project Info
Category
UX/UI, Mobile App Design
Company
Timeline
December 2020 - January 2021
Tool
Figma, Adobe Illustrator, Adobe After Effects, Flinto
Team
CEO
2 Software Engineer
UI/UX Designer (Me)
Project overview
HappyToo was faced with increasing demand for their food delivery service after the COVID-19 outbreak. They needed to reinforce delivery drivers as more customers tend to order food at home rather than go to restaurants. I was in charge of designing the driver app for HappyToo's drivers and, providing them with better experiences while using the app.

I was responsible for the user research, design system development and overall user interface design for the driver's app, which facilitate business goals.
The problem

Time measurement at each stage of current operation

All current ordering and delivery system are operated manually through an operation team. Once a customer orders food through the app, the operation team confirms the order and find a driver nearby to assign delivery. This process takes an average of 25 seconds. If there is a problem after delivery, drivers communicate with operation team using Telegram which takes an additional 30 seconds.

It takes a lot of unnecessary time to process one delivery

Checking driver's location, messaging to drivers, etc.

There have been many small mistakes related to delivery.

Inaccurate address or customer name, over delivery time.

Hypothesize

How might we reduce unnecessary time related to delivery and help drivers manage their time efficiently?

Goal
Our goal was to reduce the time related to delivery process for both business and drivers as well as providing drivers with schedule a page and earnings page that can be checked through an app. The solution comprised of four components:

1. Overall visual design to match the HappyToo's design system

2. Addressing pick-up order to deliver process issues

3. Designing a dark theme for drivers

4. Building scheduling and earnings pages

CURRENT APP FEATURES
The process
Personas
To address this problem, I started by establishing personas that correspond to the key users of this app. With these personas, I made user flows that will correspond to the chronological list of interactions they will have during delivery. With these personas, I was able to make information architecture and a list of essential features that I prioritized and build the first wireframes that include key features of the layout. After discussing and iterating the design with the team, I was able to design the final interfaces.

Oliver Smith

Age: 31
Occupation: Sales Assistant
Oliver is a sales assistant at Honda in Brisbane whose income has been reduced due to COVID-19. He needs extra money to support his family. Since he works from home mostly, his activities are taking care of his kids and walking his dog during the daytime until his wife comes home after work. When he finishes his working day, he starts delivering food. A primary problem he faces is that sometimes he is not able to do delivery due to his irregular schedule changes.

Jack Nguyen

Age: 20
Occupation: Student
He is a full-time international student at The University of Queensland. He recently moved to Toowoomba city and lives in an apartment with two roommates. Since he spends lots of time at home during the winter break, he wants to go travel to Hanoi to visit his family. Because the direct flight ticket is too expensive to buy, he wants to do a part-time job so that he can make extra money to cover flight tickets and living costs.
User Flow
To understand the core user experience, I first built a user flow. This helped me focus more on the overall experience. It also helped me communicate with the team about the process of user's entry and exit points more clearly.
Information Architecture

After building the personas and user flows, I created the information architecture which will be essential features of the app. After that, I summarize the features list before starting the designs.

Features List
[ONBOARDING]

Status: Set user's online/offline status from the menu bar. When it's offline, the schedule will appear on the first screen.
Schedule: Update and change the availability more flexibly depending on the driver's working schedule.
Earnings: Check working history and withdraw earnings.

[PROCESS]

Waiting: Confirm or decline delivery order on the waiting tab.
In Progress: Check the information of restaurants and deliver to the customer by checking estimated pick up time and order list.
Completed delivery list.
Design
My team and I took out our sketchbooks and drew out various ways for the core features. We compared blueprints to figure out which data formats fit best and which elements were necessary for the MVP.

Then I made variations of the process page, as seen above, to explore as many possibilities before narrowing down. I experimented with drivers how to interact with the app based on different types of designs.
In terms of constructing pages during delivery, we thought of either designing it in a pop-up style or card style. Both options had their own merits and downside. So I decided to run a quick A/B Testing on those pages to see which option users found useful.
A/B TESTING FOR PROCESS PAGE
A
B

Option A - Rather than the pop-up style, users chose that the card style screen is easier to track the status of delivery without unnecessary tabs. Also, the card-style allows users to see more components with consistency in one glance. Option B made the users make additional clicks.

ITERATIONS

One of our business goals was to build a relationship between the driver and the company, so I put a friendly message at the top of the screen once a user opens the app. In the previous design, this message was always fixed at the top of the screen, but according to user-testing and feedback from the team, I decided to design that the message appears from the top when the user opens the app and disappears after a few seconds. Instead of a message, I placed a money section where drivers can see how much money they earned during the day to motivate users more.

The hardest part was deciding where to place the navigation bar. I thought it would be a good idea to put the navigation bar at the bottom of the app since most of the users will use their phones while driving or walking and use their phones with one hand. However, due to a development issue, it was not possible to develop the bottom navigation right now, so we decided to place the navigation bar on the top for the first version. So I designed to make it easier for users to understand by applying animation effects with icons and texts.

Final designs
High-fidelity prototype
Based on the high-fidelity design I made prototypes of the user flows. By applying micro-interactions I found that users were able to use this app more effectively.

Start work

In the onboarding feature I placed the on/off button on the menu section so that drivers can switch their status easily. Once drivers turn this on, waiting deliveries are assigned to them according to drivers' schedule.

Confirm ~ Pickup

When the drivers are ready to work, they can check orders waiting for delivery in the 'Waiting' tab. After tapping the 'Confirm' button, the card will be moved to the 'In Progress' tab. All the steps from pickup to delivery can be checked at the 'In Progress' tab.

Pick up ~ Deliver

Once the driver arrives at the restaurant, they need to check the customer's name and item list that is important in this step. After picking up food, estimated arrival time and delivery address will be most important for delivery. So I have placed information differently with the font size and color that I think is important at each step on each screen so that the drivers can easily recognize it at a glance.

Check earnings

Drivers can check their weekly earnings and delivery history. Also, they can withdraw money regularly by linking their bank account.

Dark theme

Drivers deliver orders not only during the daytime but also at night. So it will be important for drivers not to be disturbed by screen lights, especially when they drive at night. Dark mode can be changed automatically or manually from the menu tab.

Project review
This project allowed me to apply most of my technical skills in product design. By discussing and brainstorming with the team, we were able to develop quickly in response to the current problems. We will be building website for this project as well. I am excited to work with the team to solve problems and I look forward to the progress to come.
©2019-2024 Minkyeong Shin; Made with Webflow; Last update on Sepember 2024