Embedded Files
About
Background
The Car Care App streamlines car servicing by logging owner requests into a job sheet. The service engineer and technician handle repairs, with a manager overseeing escalations. After a final inspection, the issue is resolved, the owner pays, and the service is completed.
Scope
The app streamlines car servicing by digitizing job sheets, tracking progress, and ensuring quality. Managers oversee inspections, address concerns, and approve closures for a smooth and efficient experience.
My Role
Lead User Experience Designer
Team Size
03 (Lead UX Designer, Product Owner, Technical Architect)
Targeted User
Fleet Managers
Tools Used
Figma, Microsoft Forms, Chrome, Google Sheets, Microsoft Teams
Double Diamond Design Process
Research
To understand the pain points, expectations, and behaviors of service engineers, and managers in the car servicing process. The goal is to ensure the Car Care App enhances efficiency, improves service quality, and meets user needs effectively.
Goals
Understand the current process of job sheet management, service tracking, and quality control.
Identify pain points in digitizing job sheets, tracking progress, and ensuring service quality.
Evaluate manager roles in inspections, addressing concerns, and in case closures.
Assess the impact of a digital system on efficiency, transparency, and user experience.
To achieve and understand above goals, interacted with several Service Engineers, Technicians and Managers. Interactions were both in-person and video call.
Analyzed Information
How do you currently create and manage job sheets?
Manually fill out paper job sheets based on customer input, then update them as work progresses. Sometimes, details get lost or misinterpreted.
What challenges do you face in tracking service progress?
Tracking progress is manual, and updates aren’t always documented in real-time. If multiple people work on a car, miscommunication happens, leading to delays also Finding past service records is time-consuming.
How do you currently oversee service progress and job completion?
Rely on updates from technicians, which are mostly verbal or on paper. Walk around the workshop to check on progress manually.
How would a digital system improve or hinder your ability to manage service quality?
A system that tracks when a job is ready for review and sends me a notification. Real-time alerts on job status changes and escalations.
How do you communicate updates or issues with managers?
Mostly through phone calls or face-to-face conversations, but that can cause delays if the manager is busy. Sometimes they write notes, but they might get misplaced.
What would make job sheet management and service tracking easier?
A digital system where we can update job sheets in real-time and track service stages. Notifications or alerts when there’s an update or approval needed.
What difficulties do you face in inspecting service quality and approving closures?
There’s no structured checklist, so quality checks vary by engineer. It’s hard to track whether all required work was completed before closing a case. Some complaints arise because customers feel they weren’t informed about what was done.
How do you handle customer concerns and escalations?
Customers usually approach me directly, but sometimes I only find out when they complain at checkout. Don’t always have a clear record of past complaints, so tracking recurring issues is tough. When not available, escalations get delayed.
Current Process and Workflow
Understanding the current modal is crucial, so the below illustration supports the current work flow modal.
Define
Based on the understanding of targeted user of web application, defining the persona, empathy map and IA is very essential. These were created after careful analysis of research activity.
Persona
Empathy Map
Information Architecture
Ideate and Prototype
Web App end to end design, ensuring it meets the needs of various users. One of the most critical personas was the "Service Manager" — the person responsible for overseeing multiple cars, tracking service progress, and ensuring customer satisfaction.
Low-Fid
To kickstart the design process, I started with low-fidelity wireframes — basic sketches outlining the dashboard’s structure. Instead of focusing on colors and aesthetics, I prioritized layout, functionality, and usability.
For the Service Manager persona, I knew they needed: A quick overview of multiple car service statuses, real-time tracking of ongoing repairs, an escalation system for unresolved issues and easy navigation to deep dive into individual cases.
I mapped out: A main dashboard with status indicators (In Progress, Completed, Escalated), search bar to find specific cars quickly, real-time tracking section to monitor ongoing services.
Testing and Ideation with the Manager Persona: Shared the low-fidelity wireframe with a real Service Manager to gather feedback. After that a few pain points surfaced:
Can I see technician details to know who’s working on what?
Notifications panel would be useful for urgent cases.
Their feedback helped refine the wireframe, and in the next iteration. Below is the final iteration of low-Fid mockup where the surface pain points with few other suggestions were added.
Clickable — Prototype - Low-Fid
High-Fid
After refining low-fidelity wireframes based on feedback from the Service Manager, it was time to transition into high-fidelity designs. At this stage, the goal was to focus on visual hierarchy, interactions, and accessibility, ensuring that the dashboard wasn’t just functional but also intuitive and polished.
With the core features validated in low-fidelity, I moved to high-fidelity mockups, bringing in: Color schemes & contrast for readability, Typography & spacing for clarity, Visual elements like charts and progress bars for at-a-glance.
I emphasized a clean, high-contrast layouts. Dashboard providing high level information on overall day, whereas other pages were adding the details to particular objective of page such as the "Real-Time Tracking Panel" provides live progress updates, job for details etc.... Likewise other pages full-fills the purpose of easy navigation and usable product.
Prototype - High-Fid
After these refinements, I developed a clickable prototype, allowing managers to simulate real interactions.
Usability Testing
Goals
Questions
Evaluate Navigation & Ease of Use
Validate Feature Functionality
Identify Pain Points & Usability Issues
Measure Task Completion Efficiency
Assess Overall Satisfaction & Adoption Likelihood
How easy was it to navigate the dashboard?
Were you able to find the car tracking feature quickly?
How long did it take to track a car’s real-time status?
What challenges did you face while using the dashboard?
What do you like most about the dashboard?
What improvements would you suggest?
Quantitative
Qualitative
What do you like most
What improvements would you suggest?
"The real-time tracking is clear and responsive."
"The layout is clean and modern."
"I like the color contrast; it's easy on the eyes."
"Add a search feature to find vehicles faster."
"Reduce the number of clicks needed to check Real Time Service Tracker"
Conclusion
By starting with low fidelity, validated the core needs without wasting effort on aesthetics. With high-fidelity, fine-tuned interactions, accessibility, and workflows. The Service Manager now had a dashboard that wasn’t just functional but also optimized for real-world efficiency and decision-making.
As the final design was approved, I could see the impact of user-driven iteration—transforming an initial sketch into a tool that truly empowered managers.
UI Components
Google Sites
Report abuse