Core Feature

Web

Mobile

Logistic

B2B

Designing for Flexibility and Scalability via Powerful To-dos

company-logo
CartrackDelivery
cartrack_delivery_todo_banner

Quick Overview (1min)

This is a feature enhancement for the Cartrack Delivery app.

💡The Cartrack Delivery audience is quite diverse. All users own vehicles (due to Cartrack’s telematics core business) and these vehicles are utilized for various tasks such as package/food delivery, passenger transportation, and service maintenance.

The powerful 'to-do' feature allows us to serve this diverse client base within a single platform, while maintaining maximum flexibility and scalability.

This feature's unique aspect is its customizability - users can create their own unique workflows. With little or no training, drivers can easily operate it. Simultaneously, the team can readily maintain and develop new 'to-dos' on top of the existing structure.

VS

Before

cartrack_delivery_todo_compare1_before1

The Old Communicator App

VS

After

cartrack_delivery_todo_compare1_after1

The New Cartrack Delivery

Previously, clients couldn't customize their business task flows, and drivers had to remember to select tasks from a toolbar on their mobile device. The team also struggled to fulfill various customer requests.

The new feature allows clients to easily customize their task workflows. It is incredibly easy for drivers to follow without overloading their memory. This also makes future maintenance and development simpler for the development team.

Recorded demo for Todo editing on web app

This has been considered one of the most creative and core features in Cartrack Delivery. It has proven to be very effective and reliable during rigorous field tests.

Curious about how we accomplished this? Let's dive in!


Highlighted Problems and Solutions

❤️‍🩹PROBLEM

What do food delivery, package delivery, passenger transportation, and field service have in common? Is it possible to bring everything under one simple platform that users can perform all the above jobs in a simple way?

This was one of the biggest challenges I encountered while working at Cartrack.

💡To achieve the goal, I had to think outside the box, as there isn't a single app available that I could reference for similar solutions.

My approach to finding a solution was to conceptualize the core workflow of the above operations, identify the similarities and differences. The similarities helped bring things together while the differences required further design to accommodate them.

Below is a chart demonstrating the common core workflows:

cartrack_delivery_todo_workflow

Conceptualized chart for various logistic operations

From the chart, it's clear that all tasks require a driver, transit from point A to point B (or multiple points), and perform some jobs (drop-off, pickup, maintenance, etc). The main difference between these operations is the type of jobs performed onsite.

This led to the following problem:

❤️‍🩹PROBLEM

How can we allow users to create and customize their own task workflow to meet various business requirements?

💡I realized that no matter how complicated the jobs are, they can be broken down into smaller tasks and reconstructed. Most of these smaller tasks are similar and repetitive.

My approach was to use a modular design:

  • study the majority of the customer’s task lists
  • divide those tasks into smaller jobs
  • group and build basic smaller jobs based on similar repetitive patterns
  • users can freely combine these basic jobs into more complex tasks

💡This approach can be found in many famous products like the 'block' in Notion, the 'component' in React.js, and 'pieces' in Lego toys.

cartrack_delivery_todo_blocks

Lego blocks vs Notion blocks

In the Delivery app, we started with basic jobs like 'Take a photo', 'Get a signature', 'Take a note', and later added more, like 'Scan to attach', 'Scan to confirm', etc.

cartrack_delivery_todo_web_design

Todo designs by Ning via Sketch

💡These basic jobs can be renamed, reordered, and reorganized to form unique task flows, which proved to be very effective in solving the initial problem.

Recorded demo for Todo editing on web app

Bonus point: due to the modular design, the development team can easily add more new job types later, proving this design to be flexible and scalable in the long run.


❤️‍🩹PROBLEM

During our user research, we found out that drivers usually take a long time to train and often forget to do something onsite, causing significant issues for the business.

💡One of the main reasons for this problem is that business requirements can be complex. For example, drivers may need to remember how many photos must be taken, specific procedures must be followed, etc. All these can cause memory overload, leading to forgetfulness, especially in busy onsite environments.

My solution was to find a way to make performing smaller tasks as simple and intuitive as possible.

The most intuitive way to perform a large amount of tasks in daily life? A to-do list!

cartrack_delivery_todo_apple_google

Google's Task App vs Apple's Reminders App

This inspired me to use a similar approach for the driver app:

cartrack_delivery_todo_mobile_design

Todo function in Delivery app

When a driver arrives, the to-do screen will automatically pop up. Each to-do will trigger a specific function. Drivers just need to clear all the items on the list to finish.

Todo completion on driver app

💡By using the 'convention' concept with similar design patterns, drivers can easily perform all sorts of complex tasks with little or no training. Problem solved!

A standout feature of Cartrack Delivery is its adaptability. Its powerful to-do feature enables the app to handle a wide range of tasks, including package/food delivery, passenger transportation, and service maintenance.