Design and delivery of a modular UI component system featuring interactive vehicle diagrams for streamlined invoicing
Product
Material Management System (B2B)
My Role
Product Designer
Timeline
Q3 2023
Team Members
Tech Lead
Industry Expert
Key product challenge
Designing a faster, more intuitive way for workshop staff to identify and select vehicle parts during the invoicing process, without relying on long drop downs or technical jargon. The solution needed to support multiple vehicle types, and be usable by busy mechanics in high-pressure, hands-on environments.
Vehicle Diagrams That Work
We decided to build vehicle diagrams with clearly selectable parts, guided by three key criteria: ease of use, low development effort, and adaptability across multiple vehicle types.
Concept 1: Isometric Models
Panel-body View
Unibody View
We began by exploring isometric vehicle diagrams—angled illustrations that offered a semi-3D look. Visually, they added depth and gave a more realistic feel to the layout, with the potential to feel modern and dynamic within the UI.
However, the perspective made part selection less precise, especially on smaller screens. The design also required complex hit zones and higher dev effort, making it too costly and interaction-heavy for the intended users and platform.
Concept 2: Orthographic Projection
Panel-body View
Unibody View
Our second approach used orthographic projections. Clean, flat diagrams showing the vehicle from top and side views. This method prioritised clarity and simplicity, giving users a familiar, no-frills way to locate and select parts quickly. The layout also allowed for easy replication across different vehicle types.
Compared to the isometric version, this concept struck the right balance between usability and development efficiency. It required minimal interaction logic, kept visual noise low, and worked well on both desktop and tablet. This became the selected approach.
Easily selectable through multiple viewpoints
Adapting Across Vehicles
Following the orthographic project concept, models for a range of vehicle types were designed. Each model follows the same visual system and interaction logic, making it easy to scale while maintaining clarity and usability. The modular approach also allowed for quick adjustments based on the unique structure of each vehicle.
In Action
A preview of the final diagram model in the app: users can tap on different parts of the vehicle to select them, with immediate visual feedback. The interaction is clean, responsive, and works consistently across all supported vehicle types.
Faster, smarter invoicing
Workshop owners responded positively to the new diagram UI, noting how intuitive it felt in day-to-day use. The streamlined interaction helped reduce invoicing time to just 2 minutes, improving both speed and accuracy across the workflow.
Invoicing time reduced by 90% (2 minutes on average)
Over USD $70 million billed to date using Eagle
Alex Koutmous
Co-founder
EagleMMS
Syed has been an absolute pleasure to work with and I would highly recommend leaning on his design and artistic skills for your business needs. Communication and iteration cycles were always fast and tight and Syed was always able to deliver exactly what we needed. Easily one of the best designers that I have worked with!