UI/UX
Dashboard
Internal Tools
Interaction Design
Live Site
Quantron is a German electric vehicle manufacturer building zero-emission commercial trucks and buses.
03 Quantron
The tickets view is structured to support both browsing and targeted lookup. Dropdown filters at the top let users scope the dataset before scanning, while a persistent search bar handles more direct queries. The table keeps column count focused on what's operationally relevant, with sort controls on every column and a linked row state for navigating into detail. Primary actions — switching to closed tickets, downloading, and raising a new ticket — are grouped in the top right, clearly separated from the filtering controls to avoid conflating two distinct modes of interaction.
The two-panel layout creates a clear reading order — context on the left, action on the right — preventing users from having to hold information in memory while filling out fields. Within the actions panel, the most critical flags are pinned to the top, while the remaining inputs follow a logical operational sequence from assignment through to diagnosis, delays, and communication. The Closure section is deliberately separated at the bottom, visually signalling a distinct phase of the ticket workflow rather than treating it as just another set of fields.
A Glimpse
The dashboard leads with the most operationally critical metric in a large hero tile, supported by a grid of smaller tiles covering vehicle status and warranty activity. Tonal variation across the blue palette creates hierarchy between tiles without visual noise. The donut chart offers a parameter breakdown within the hero tile, while the Age of Tickets line chart sits at the bottom of the layout — converting backlog data into a readable trend that informs prioritization.
This project involved designing an internal platform to support their service and fleet operations — a dashboard and tooling suite that is currently live as the Service section of the Quantron website.
about
————————————————————————————————— UI/UX ————— Dashboard Design ————— Internal Tools Design ————— Live Site ————— Information Design————— UI/UX ————— UX Research ————— Product Design ————— Interaction Design————— UI/UX ————— UX Research ————— Product Design ————— Branding————— Interaction Design—————
The core challenge was translating highly technical requirements into interfaces that felt clear and manageable for the people using them day to day. Ticket management, internal lookup functionality, and operational data all needed to be surfaced in ways that reduced friction rather than added to it. Development constraints were present throughout and shaped many of the design decisions directly — solutions had to be practical to build as well as intuitive to use.
Design Process
Over approximately three months, I worked with Quantron as a freelance UI designer, responsible for the visual design and design system of their internal service platform. The work involved close collaboration with developers and stakeholders, delivering a cohesive product within real technical and timeline constraints.
My Role
The platform is organised around three core surfaces, each serving a distinct operational need.
Dashboard The dashboard functions as the command centre for service operations. A grid of KPI tiles provides an at-a-glance overview of key metrics, with a donut chart and line chart sitting alongside to offer both snapshot and trend-based readings of the same data. A persistent header keeps notifications and messaging accessible at all times, and an Overview and Customize toggle gives users control over what they see.
Service Tickets The tickets view is built to handle large volumes of data without becoming unwieldy. Dropdown filters and a persistent search bar let users narrow down records quickly. The table surfaces all operationally relevant fields in a sortable, scannable layout, with clearly distinguished row states including a linked state for navigating directly into ticket detail. Primary actions — switching to closed tickets, downloading, and raising a new ticket — are grouped at the top right, kept clearly separate from the filtering controls to avoid conflating two distinct modes of interaction.
Ticket Detail The ticket detail view is the most operationally dense surface on the platform. A two-panel layout separates reference information from actionable fields, so users are never required to hold context in memory while updating inputs. Critical flags are pinned to the top of the actions panel. The closure section sits at the bottom as a deliberate visual signal — a distinct phase of the workflow, not just another set of fields.
Key Features
A consistent blue visual language runs across the entire platform, applied with tonal variation to create hierarchy without introducing colour complexity. On the dashboard, this approach lets users differentiate between metric tiles at a glance while maintaining a unified, professional aesthetic throughout.
Information hierarchy was a central consideration across all three surfaces. The tickets table in particular required balancing data density with readability — spacing, typography weight, and interactive states were calibrated carefully so the interface remained scannable even when populated with large datasets.
The design system was built around reusable components — form fields, dropdowns, status indicators, table patterns, and button hierarchies — to ensure consistency across the platform and support a clean, efficient developer handoff given the tight timeline and technically complex requirements.
Design Decisions
Working on Quantron taught me that a design is only as good as what actually gets built.
Building the design system with developer handoff as a first-class consideration, not an afterthought, changed how I think about every decision I make at the screen level.