Skip to content

UI Evolution

Jutipong Puntuleng edited this page Apr 7, 2026 · 7 revisions

Release 1

Simulation page

Wireframe 1

Proposed to stakeholder based on the provided statement of work.

iteration1

Stakeholder feedback:

  • Remove task bar - it's unlikely to be used, and dispatchers will instead target tasks directly from stations on the map.
  • Generally, keep as much of the map as uncovered as possible.
  • A resources bar makes sense - dispatchers keep an eye on those at all time, particularly to see the tasks in their queue. Everything else is contextual (and doesn't need a "bar").
  • Originally expectation was for resource bar to be on the bottom, but its placement on the right makes sense.
  • The left of the screen should have scenario information, and time (and other) controls.
  • On the left, also put selected-item details (instead of on the bottom).

Wireframe 2

iteration2

Release 2

HQ Widget

Wireframe 1

r2-i1-1 r2-i1-2 r2-i1-3

Stakeholder feedback:

  • Dispatchers don't care to see details of vehicles at HQ in the vehicle bar - only vehicles that are in use.
  • Dispatchers might care to see how many vehicles are idle at HQ.
  • Dispatchers might care to know about drivers whose shifts are starting soon.

Wireframe 2

r2-i2

All Routes Toggle

Wireframe 1

Initial UI without a global route toggle.

r2-i3-1 r2-i3-2

Wireframe 2

Introduced a global route visibility toggle. Proposed to stakeholders; no feedback was raised and the design was accepted as-is.

r2-i4-1 r2-i4-2 r2-i4-3

Release 3

Simulation Page

Version 1

Initial UI without a metric report.

Simulation Page

Version 2 (Wireframe)

Introduced a metric report to provide detailed simulation insights for users.

Stakeholder feedback:

  • Removed the “Update” column, as it did not provide significant information.
  • Add a simulation progress percentage so dispatchers can track progress and better interpret metrics before resuming.
mockup4 1

Version 3

Screenshot 2569-04-07 at 23 16 11

Vehicle & Station Icon

Version 1

Initial UI with origin-based Icons.

Stakeholder feedback:

  • It would be helpful if the vehicle icon pointed in the direction it is moving.
Screenshot 2569-04-07 at 23 33 04

Version 2

Simplified station icons to numeric labels for a cleaner UI, and enhanced vehicle icons to indicate movement direction.

Screenshot 2569-04-07 at 23 36 11

Clustering

Version 1

Initial UI with origin-based clustering.

Screenshot 2569-04-07 at 23 24 30

Version 2

Introduced color to indicate differences in the number of tasks in each cluster.

Screenshot 2569-04-07 at 23 22 28

Version 3

Improved clustering for better usability, including zoom-level-based variations and displaying task counts within clusters. This also helps improve drag-and-drop task assignment.

Screenshot 2569-04-07 at 23 17 09

Clone this wiki locally