Bosch: Grade X Vehicle Diagnostic Tool
Redesigned the browser-based diagnostic interface, cutting average task time by 30 % in six weeks
Who
- Client: Bosch Grade X team, part of Bosch Automotive Aftermarket.
- Stakeholders: Product managers at Bosch and field technicians in certified workshops across Europe.
What
- Problem: The browser-based diagnostic interface was hard to use.
- Technicians spent extra time jumping between screens, misread data, and made avoidable errors.
Why
- Business impact: Slow diagnostics drove up labour costs in workshops.
- Frustrated technicians risked lower tool adoption and could push customers toward competitors.
- Improving the flow directly reduces service times, cuts costs, and keeps Bosch tools top choice.
My Role & Scope
My role
- Lead UX/UI designer for the Bosch Grade X diagnostic tool
- Owned research, flow design, wireframes, prototypes, visual UI, and usability testing
Collaborators
- Bosch product managers
- Front-end and back-end developers and QA engineers
- Field technicians for hands-on feedback
Key Metrics & Outcomes
Average task time
After the redesign, the average time to complete a full vehicle diagnostic fell from 15 minutes to 10.5 minutes. Technicians could run three more checks in the same shift, cutting idle time and keeping more cars moving through the shop.
Error rate
The rate of incorrect data entries dropped from 12 percent to 7 percent. Fewer mistakes meant fewer call-backs and less time spent fixing errors, which helped technicians trust the tool and work with confidence.
Tool adoption
Before the new interface, 60 percent of certified workshops used the browser tool. After launch, that number climbed to 80 percent. More shops picked Bosch’s solution, and feedback showed they found it easier to learn and to teach to new staff.
Technician satisfaction
We ran a survey of 50 technicians and saw satisfaction scores rise from 3.5 out of 5 to 4.4 out of 5. Users praised the clearer layout and faster flow, saying the new design felt smoother and more reliable in daily work.
Labour cost savings
With faster checks and fewer errors, Bosch saved about €120 000 in labour costs each quarter. Shops saw their overhead go down, and Bosch strengthened its position as the go-to diagnostic partner for automotive workshops.
Design Philosophy
I start by watching how people use the tool in real-world settings. I look for small frustrations and steps that feel confusing. My goal is to make each click feel natural, so users can finish tasks without stopping to think.
I follow a user-first, test-and-learn approach. That means I sketch ideas quickly, get feedback from actual technicians, then refine the design in short cycles. This keeps the work grounded in real needs and helps us deliver value fast.
Good design is invisible. It lets you get what you need without thinking about the interface.
Process Breakdown
Understanding the problem
Business objectives & user goals
We began by pinning down Bosch’s aims—speed up diagnostics, reduce errors, and drive tool adoption—and aligned them with technicians’ needs, like quick access to subsystem checks and clear error codes. This ensured every design decision tied back to real business impact and user value.
Why? To make sure every design change tied back to real business impact and solved an actual user need.
Evaluation of existing software
The old tool felt cluttered, withno clear indication what is the menu, what is interactive, what icons represent and vague labels that slowed work.
Usability testing
Using the old platform, we tested four experienced technicians and four apprentices on four core tasks. The results:
- Effectiveness:
- Senior technicians completed 68.75 % of tasks successfully
- Junior technicians completed 25 % of tasks successfully
- Efficiency:
- Seniors averaged 88.5 seconds per task
- Juniors averaged 122 seconds per task
Why? To establish a clear baseline of usability issues before redesigning core flow and to pinpoint where users failed or stalled and measure how much time each step took.
Field visits
I spent days in workshops observing a dozen technicians. Watching them switch between their handheld scanners, physical gauges, and the browser interface uncovered workarounds and habits that a desk-bound review would miss. These insights grounded our design in real workflows.
Why? To uncover real workarounds and habits you can’t see in an office or lab setting.
Analysis
Back in the studio, I coded notes and video clips to extract core pain points, then plotted a matrix of technician expertise versus digital familiarity. This revealed that highly skilled but less tech-savvy “Senior Pros” needed simpler flows, while younger, digitally fluent technicians could benefit from advanced shortcuts.
Why? To know where to simplify for less tech-savvy users and where to add power shortcuts for confident users.
Creating personas
From those insights, I crafted two personas:
- Senior Pro: Deep diagnostic expertise but limited comfort with complex digital interfaces. They need clear, step-by-step guidance and minimal on-screen clutter.
- Young Tech: Equally skilled in diagnostics and confident with digital tools. They value efficiency and welcome shortcuts and power features.
Why? To keep design decisions grounded in the real needs of distinct user types
User journey mapping
Finally, I sketched a journey map tracing each persona’s steps—from plugging into the vehicle through generating the final report. Seeing extra clicks and context switches on that map highlighted the precise spots to streamline in our redesign.
Why? To keep design decisions grounded in the real needs of distinct user types
Ideation & Strategy
Creating the red route
We used our personas to group features into core and secondary categories. Then we built a red route that highlights the daily tasks every technician needs. Those key tasks sit front and center, while less common features stay hidden but easy to find when needed. This keeps the interface clean, helps users move fast, and leaves room to add more tools later.
Why? To make main functions pop so technicians spend less time hunting and more time working. Focusing on core tasks cuts clicks and errors, and keeping secondary features out of the way keeps the flow smooth.
Mapping diagnostic tasks
We ran a card sorting exercise with technicians to group Grade X features into clear categories for each persona. Then we mapped the main path technicians follow during a check so content appears exactly when and where they need it.
Why? To make sure each category matches how technicians work and to put the most common tasks (red route) front and center. This cuts search time and cuts errors.
Red route flow
We used the journey map and task list to build a simple flow that highlights the main path in red. It shows technicians exactly where to go next. This clear path helps them find issues faster and make fewer mistakes, which speeds up work and makes customers happier.
Why? To focus technicians on the most important steps and cut out distractions. By highlighting the red route, we reduce navigation time and keep users on track, ensuring they complete key tasks efficiently.
Wireframes
I created 40+ wireframes for each key screen, focusing on flow and layout without visual details. These quick drafts let the team and a few technicians walk through core tasks and spot gaps in how screens connected.
Why? To test structure and sequence early, so we could catch broken flows or missing steps before investing time in detailed design.
Interface Patterns & Menu Design
Next, I set up reusable UI elements and created an editable navigation menu under Settings > Edit Menu. Technicians can pick and reorder the tools they use most, while core items like network tests, PDI, and service functions stay fixed. Once they’re familiar, they can collapse the menu to a row of icons, freeing up more screen space for the diagnostic view.
Why? So each technician can tailor the menu to their work, speed up access to their most-used tools, and get a cleaner workspace when they don’t need the full list
Visual Design (Desktop)
Using Bosch’s brand guidelines, I applied a clean color palette, clear typography, and simple icons. I spaced elements generously and highlighted key data areas so technicians could scan readings at a glance on large screens.
Why? To give the tool a polished, professional look that matches Bosch’s standards, while ensuring important information stands out in busy workshop conditions.
Visual Design (Mobile)
I adapted the desktop layouts for smaller screens by prioritizing top-level tasks and collapsing secondary controls behind a slide-out panel. Touch targets were enlarged and feedback messages placed close to related inputs.
Why? To ensure mobile users get the same clear, efficient experience. Simplified layouts and big touch areas reduce mis-taps and speed up work on tablets or phones.
Evaluating the new Grade X: Usability triumphs
We retested four senior technicians and four apprentices on the redesigned interface.
Effectiveness
- Senior technicians: 81.25 % task success
- Junior technicians: 87.5 % task success
Efficiency
- Seniors averaged 112 s per task
- Juniors averaged 103 s per task
The strong gains in accuracy—especially for apprentices—and the faster times show our updates make a real difference, while pointing to areas where we can still trim seconds for veteran users.
Lessons Learned and Final takeaways
The real success of this project wasn't just the pre-launch sales, but the valuable lessons we learned. Watching users easily navigate the new interface and seeing their confidence grow confirmed the importance of user-focused design. We stayed flexible, adapting to feedback and improving features throughout development.
The editable, collapsible menu boosted efficiency, but some users didn’t discover icon mode on their own. I’ll add a brief in‐app tip or walkthrough so every technician can unlock menu features without extra support.
Our redesign made key steps faster, cut errors, and raised satisfaction. The editable menu and clear main path let technicians work with less thinking and more focus on the vehicle.
This success led Bosch to ask me to apply the same process to their Ford diagnostic tool. I used what we learned here, such as red route flows, editable menus, and real-world testing, to speed up and simplify the Ford interface as well.
