Five Stages of Design for On-demand Cargo Delivery Apps

Anton Kosolapov

UI/UX designer

SHARE

13

Among the multiple Uber-like startups of recent years, cargo delivery apps take up a significant percentage of the market. These apps work as platforms that connect clients with service providers. Yalantis has worked on a number of on-demand cargo delivery apps, and today we want to share our experience dealing with their unique design challenges.

It may seem that on-demand delivery apps and Uber-like taxi apps have a lot in common, but this isn’t true, especially not with regard to their design. Today we will focus on what differentiates these two types of apps, and will talk about the stages we go through when designing an on-demand cargo delivery app.

Stage 1: decide on main screens and components for the on-demand delivery app

Most cargo delivery apps have a number of screens and screen components that – with slight variations – can be found across all apps of this class. In our experience, it can be difficult to decide where to focus your attention, especially if your company is starting with an MVP. That’s why we’ve narrowed the options down for you to the six most essential components:

List of Orders – a list of delivery orders that can be sorted through and bid on by contractors; appears on the first screen.

Delivery Card – an individual entry within the list of orders; each delivery card shows the most important information about the particular order.

Delivery Details – additional information that unfolds underneath the delivery card itself and that contains complete information about the order: client name, order status, current bids, category of goods and weight of the cargo, destination, etc; this part of the screen changes to reflect the status of the delivery.

Delivery Dashboard – a screen that appears only after the client and the contractor have agreed on the order details, and the delivery has been initiated. The Delivery Dashboard is a simplified version of the Delivery Card, with a map of the delivery route and the delivery status.

Quotes – a list of delivery cards that a particular contractor has accepted.

Active Deliveries – a list of deliveries that are in progress.

These six components of the app are enough to get you started.

What about Uber-like taxi app design? How does it compare to cargo delivery app design?

It’s clear from this example that cargo delivery apps require a greater number of screens and screen components, as well as more complex interactions among them.

In our opinion, the delivery card is the component you have to pay a lot of attention to. Poor design of delivery card can seriously damage your app oveall user experience. That’s why we put together a list of recommendations that will help you to avoid most common mistakes.

Things to remember when designing a delivery card:

1. Users find it convenient when orders can be visualized in two ways: in the form of a card that contains only the most essential information, and on a separate screen that provides full, detailed information.

2. When designing a delivery card you should consider the following:

- The order in which information is presented

- The level of detail in each view

- How the delivery card interacts with other app screens

3. Keep in mind that the content of a card will change to reflect the stage of the order.

Stage 2: design navigation differently for different user roles

Cargo delivery apps will be used in different ways by different types of users. A driver will use the app on the go, and almost certainly on a mobile device; a client might place an order on their desktop, then follow its progress on a mobile device. How do you account for different environments and contexts?

The first step is to define your user roles. The three most typical user roles for a cargo delivery app are:

Transportation Provider – the driver who accepts the order and delivers the cargo to its destination.

Dispatcher – the user who accepts orders and shares them with Transportation Providers. In some apps (such as Uber), the role of dispatcher is omitted and drivers accept orders directly.

Client – the person who orders delivery of their cargo; clients may be individuals or companies.

Transportation providers and clients are most likely to use apps on the move, and therefore their primary devices are mobile phones (or perhaps tablets). Keeping this in mind, we came up with a list of recommendations for designing navigation in cargo delivery apps:

Make core features of the app accessible with one click.

Go with swipe gestures, because swiping is faster and more convenient than traditional buttons when the app is used on the go.

Make sure the tab bar doesn’t contain more than three or four elements, as more buttons make it easier to mistap.

Place secondary features (settings, profile info, message archives) under a “More” button.

If we use such a minimalist navigation system, we’ll be able to save the action bar space for search and notifications. Secondary features can be transferred to side menus, or you can add a “more” button to one of the four parts of the tab bar.

This interface differs in two ways from the typical interface of Uber-like taxi apps: it’s more detailed on the client side, and offers more detailed delivery cards for transportation providers.

An interface such as the one shown above is designed with the primary purpose of providing details about each delivery and its status. Messaging features, which let drivers and client communicate, are secondary in this case.

Stage 3: how to pick the right size and location of elements on the screen

Experience shows that the size and location of elements on the screen is the second most important factor that influences accessibility and ease of navigation. You can use heat maps to pick the right size and location of design elements. Heat maps show which areas of the screen are easily accessible, and which will make users stretch (literally).

When drivers use delivery apps, they want as few distractions as possible. That’s why we have to make sure that all free space is used sensibly, and that we provide ample white space with big buttons that stand out against it.

Moreover, any actions that can result in irreversible consequences – such as deleting or accepting orders – must be confirmed with an additional dialog, such as “are you sure you want to complete this action?”

Step 4: design for daytime and nighttime regimes

Deliveries happen in all kinds of weather conditions, so the delivery app has to be comfortable to use both when it’s bright and sunny and when it’s dark and stormy. When the app is used during the day, the screen should be bright. When the app is used at night, it shouldn’t blind users.

We can solve this issue with alternate color schemes that are activated automatically based on the level of ambient light. Similar solutions are used in car navigation systems, running trackers, and navigation systems for planes and boats.

Alternate color schemes make the app easy on the eyes.

Stage 5: design order status tracking

People expect regular updates from delivery apps. So what’s the easiest way to provide routine updates to users without being intrusive? We recommend a delivery dashboard.

After a transportation provider and a client have agreed on the details of a delivery and the delivery is in progress, the driver already knows all the pertinent details about the shipment. Therefore, information about size and weight are of secondary importance at this point. As we can see, it’s important to keep the dashboard clean so a driver can easily find relevant information.

We recommend that a user dashboard focus on the following:

Visual display of delivery status

Visualisation of the delivery route

Communication with the delivery crew

By offering a comprehensive dashboard, we can provide customers with convenient access to all necessary data and keep users informed about delivery status.

Here at Yalantis we pride ourselves on our expertise with transportation and Uber-like apps. We hope that these recommendations, based on our own experience designing delivery apps, will be useful for you. Do you have any thoughts or comments about delivery app design? If so, send us an email!

5.0/ 5.0

Article rating

4

Reviews

Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?