Feature Enhancement

Web

Logistic

B2B

Designing for Repetitive Tasks via Job Templates

company-logo
CartrackDelivery
cartrack_delivery_job_template_banner

Quick Overview (1min)

This is a feature enhancement for the Cartrack Delivery Web app.

The Cartrack Delivery app primarily serves as a task management platform. For users, creating jobs or tasks is a crucial daily routine. However, filling out many data fields can be tedious when there are numerous jobs.

The job template feature enables users to create jobs quickly using preset templates.

Recorded demo for job template function

This feature's unique aspect is that it allows the creation of a new job within just a few seconds, even for jobs with complicated data structures. This speed is unmatched by similar products.

VS

Before

cartrack_delivery_job_template_compare1_before1

The Old Communicator App

VS

After

cartrack_delivery_job_template_compare1_after1

The New Cartrack Delivery

Previously, users had to manually fill out numerous different fields for each job, which was tedious, time-consuming, and prone to errors.

With the redesign, creating new jobs has become significantly quicker. This improvement is largely due to the job template, which offers pre-defined data fields that are auto-populated and pre-filled for users.

This feature significantly reduces the tedium and repetition of manual job input for dispatchers, allowing them to focus on more important tasks.

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


Highlighted Problems and Solutions

❤️‍🩹PROBLEM

During our user research, some users complained about having to manually input a large number of data fields to create daily jobs, which they found tedious and troublesome. Hence, we're exploring ways to make their tasks easier.

We tackled this problem through various efforts:

This section focuses on the last effort: the job creation form redesign.

Our approach is to identify the fields that take the most time to fill out and streamline the input process.

VS

Before

cartrack_delivery_job_template_compare2_before1

This is before design

VS

After

cartrack_delivery_job_template_compare2_after1

This is after design


Before the redesign, users had to manually type in every data field for each new job.

After the redesign, users can select records from a list (saved records or previously used history records), and multiple data fields are instantly filled once a selection is made.

Quick order creation via dropdown records


❤️‍🩹PROBLEM

This solution works for simpler jobs, but for more complex jobs requiring many tasks, users still have to spend a lot of time recreating the same task list repeatedly.

If these tasks were always changing from job to job, then the above solution would be sufficient.

However, based on our user research, we found that one client almost always relies on a specific workflow that doesn't change often. In other words, the job structure/workflow is quite stable and consistent.

This insight presents a new opportunity for improvement.

Our proposed solution is to preload all repeated data fields for new jobs if customers have a stable job structure. Users would only need to make minor additions or edits for the job to work.

VS

Before

cartrack_delivery_job_template_compare1_before1

The Old Communicator App

VS

After

cartrack_delivery_job_template_compare1_after1

The New Cartrack Delivery


Before the redesign, users had to fill out all data fields, many of which were repetitive.

After the redesign, users can preset a job template with a predefined job structure. Whenever a new job is created, the system preloads data fields from the template, and users only need to make minor adjustments!

This approach worked extremely well during user testing and allowed users to create complex jobs within seconds!

Bonus point: The job form UI in both the settings screen and order entry screen are almost identical. This is intentional: from a development perspective, we reused the job form component (in React.js) in both places. This not only reduced development time and kept style changes consistent, but also provided users with a familiar experience when operating the UI.

cartrack_delivery_job_template_sync

Order entry form design synced with job template design


❤️‍🩹PROBLEM

Users often got interrupted during the input of a large number of jobs. When they returned to continue their work, they lost track of where they left off.

💡This is a problem as they must manually check to avoid job duplication, and locate where they left off. This checking process is often cumbersome.

Our solution is to save the job creation progress even when the panel is closed. When users return and want to continue, everything remains the same.

Before the new design, if the job/order entry was closed or interrupted, all progress would be lost and users would have to start all over again.

After the new design, users can always return to resume the last job creation process, with nothing lost.

💡We saved the job progress in localStorage, so this also works for sudden logouts, session expiration, or network issues.