SWAT Routes

UX

UI

Research

Usability Testing

Wireframing

Prototyping

Overview

Overview

Role

Product Design Intern


Tools

Figma
Notion


Timeline

1 month

Role

Product Design Intern


Tools

Figma
Notion


Timeline

1 month

Background

In Lotus’s, one of the most critical KPIs for route planners is trip utilisation(%), which measures how efficiently vehicle capacity is used for deliveries. The goal is to maximise the load per vehicle while minimising the number of vehicles required. To achieve optimal utilisation, manual intervention is sometimes necessary to fit more orders into existing vehicles.

Problem

Without the ability to split an order into smaller parts, planners are forced to over-assign vehicles, underutilise available capacity, or leave orders unassigned. This inefficiency not only affects day-to-day planning but also impacts the overall cost-effectiveness and scalability of operations.

Goals

  • Improve overall utilisation rates over 3 months (%)

  • Reduce costs from activating less vehicles

  • Increase user satisfaction from hitting their utilisation KPI

Goals

  • Improve overall utilisation rates over 3 months (%)

  • Reduce costs from activating less vehicles

  • Increase user satisfaction from hitting their utilisation KPI

Research

Research

Understanding the user

Logistics Route Planner

37 years old
Bangkok, Thailand
Bachelor’s degree in Logistics & Supply Chain Management

I studied their existing workflow, from the moment they've imported orders to the part where their route planning has hit the utilisation KPI (≥95%). I identified the entry and exit points where planners would want to split orders.

Looking up references

I checked the existing UI library for components that could be used, and looked up external references that allow users to split values (e.g. Splitwise).


Key takeaways:

  • One focused action lets users complete the task quickly

  • Clear affordances for input fields and buttons gives users confidence in knowing how to interact with the feature

  • Inline validation instantly informs users of split values

Key design considerations

Mental models

Is the original order split into 2 child orders, or does the original order remain with a smaller load with 1 child order split from it?

  • Planner’s: A → A1 + A2

  • Backend logic: A → A + A1

Component choice & layout

Should it be a drawer, modal, or floating panel?

Auto-calculation

What's the logic & behaviour of input fields?

Split order naming

  • Should planners be allowed to customise order names?

  • What suffix should be used?

Finding split orders in grid

  • How should they be sorted?

  • What if a filter was applied?

  • Would a flash animation or snackbar help?

Edge cases & error states

  • What if there are many demand types?

  • How do we truncate long order names & numbers?

  • What values are unaccepted?

Future-proofing

  • What if the user wants to be able to split an order into >2?

  • What if the user wants to be able to split by %?

Mental models

Is the original order split into 2 child orders, or does the original order remain with a smaller load with 1 child order split from it?

  • Planner’s: A → A1 + A2

  • Backend logic: A → A + A1

Split order naming

  • Should planners be allowed to customise order names?

  • What suffix should be used?

Edge cases & error states

  • What if there are many demand types?

  • How do we truncate long order names & numbers?

  • What values are unaccepted?

Component choice & layout

Should it be a drawer, modal, or floating panel?

Finding split orders in grid

  • How should they be sorted?

  • What if a filter was applied?

  • Would a flash animation or snackbar help?

Future-proofing

  • What if the user wants to be able to split an order into >2?

  • What if the user wants to be able to split by %?

Auto-calculation

What's the logic & behaviour of input fields?

Design

Design

Key explorations

  • Modal, drawer, toast, banner

  • Scrim

  • Toggle switch

  • Slider

  • Horizontal vs vertical layout

  • Input fields

  • Loading states

  • Error flows & states

Integrating AI into the process, I weighed the pros and cons of each idea, analysed the scenarios they were most suitable for, and made design decisions with trade-offs considered.

Final design

Keeping in mind route planners' goals, challenges and behaviour, I made sure the final design was:

  • Accessible

  • Clear

  • Quick

  • Scalable

High-fidelity wireframing & prototyping

View full Figma handoff →

Interact with the prototype below ↓

Validation

Design

Usability test

Objectives

  • Assess whether users are able to split an order successfully and confidently.

  • Identify usability issues related to calculation logic.

  • Check whether users are able to find the orders they have split.

Key Metrics

Key findings

Participants were generally able to complete their task easily

Participants understood calculation logic

Some confusion regarding where to find the split orders after splitting

  • Solved issue by defining order sorting at the start, so the parent and child orders will always be in view

Reflection

Reflection

To be added

emily-mok@hotmail.com

emily-mok@hotmail.com

Create a free website with Framer, the website builder loved by startups, designers and agencies.