Web App
Affinitiv Automotive Multipoint Inspection
Overview
Multi-Point Inspection (MPI) tool is used by automotive technicians and service advisors across hundreds of dealerships in the US. The existing system was powerful but outdated; crowded screens, dense tables, and inconsistent interactions made it difficult for users to complete inspections efficiently and confidently.
I redesigned the MPI interface from a legacy, data-heavy layout into a modern, structured, and intuitive experience that improves technician workflow, reduces cognitive load, and enhances clarity during inspections
Overview
Multi-Point Inspection (MPI) tool is used by automotive technicians and service advisors across hundreds of dealerships in the US. The existing system was powerful but outdated; crowded screens, dense tables, and inconsistent interactions made it difficult for users to complete inspections efficiently and confidently.
I redesigned the MPI interface from a legacy, data-heavy layout into a modern, structured, and intuitive experience that improves technician workflow, reduces cognitive load, and enhances clarity during inspections
Overview
Multi-Point Inspection (MPI) tool is used by automotive technicians and service advisors across hundreds of dealerships in the US. The existing system was powerful but outdated; crowded screens, dense tables, and inconsistent interactions made it difficult for users to complete inspections efficiently and confidently.
I redesigned the MPI interface from a legacy, data-heavy layout into a modern, structured, and intuitive experience that improves technician workflow, reduces cognitive load, and enhances clarity during inspections
Challenge
The legacy MPI system was built over many years and accumulated significant UX debt:
Overwhelming tables with hundreds of data points
Poor hierarchy and unclear grouping of inspection items
Redundant fields, inconsistent spacing, and unpredictable interactions
Low adoption of media upload features due to confusing placement
Slow inspection flow caused by excessive clicks and inefficient navigation
Difficulty for service advisors to interpret technician findings
The challenge was to modernize the UI without disrupting existing workflows used daily across dealerships.
Objectives
Modernize the visual system while respecting the functional complexity of automotive inspections.
Improve task flow so technicians can complete inspections faster and with fewer errors.
Enhance clarity and readability through better grouping, spacing, and iconography.
Make media capture and recommendations seamless to support transparency with customers.
Create a scalable UI framework that could be reused across other Affinitiv products.
Solution
1. Clean, Modern Layout
The redesigned interface replaced dense tables with modular sections. Each inspection category becomes collapsible, reducing visual overload while allowing quick scanning.
2. Streamlined Inspection Flow
Technicians can now progress linearly through exterior, battery, under-hood, fluid levels, and brake checks with consistent controls and clearer inspection status indicators.
3. Improved Media Capture
Photo/video upload was redesigned as an inline, visual-first component—making it easier to document issues and build trust with vehicle owners.
4. Smart Service Recommendations
Recommendations are displayed with clearer descriptions, pricing, and part associations. Advisors can instantly understand technician findings without digging through data-heavy tables.
5. Stronger Hierarchy & Readability
Typography, spacing, and modern color usage guide the user through complex information with minimal effort. Critical statuses use clearer iconography and color indicators.
6. Scalable Component System
A reusable library of form elements, tables, inputs, and category blocks ensures consistency and speeds up development across other product modules.
Outcome
The new MPI interface significantly improves usability, visual clarity, and technician efficiency. Key improvements include:
Faster inspection completion
Easier documentation of findings
Higher adoption of photo/video evidence
Clearer communication between technicians and service advisors
A modern, scalable UI foundation for Affinitiv’s broader ecosystem
The redesign transformed a legacy enterprise tool into a more intuitive, modern experience without disrupting essential workflows.
*Disclosure: Designed at Affinitiv. All rights reserved by the company.
Challenge
The legacy MPI system was built over many years and accumulated significant UX debt:
Overwhelming tables with hundreds of data points
Poor hierarchy and unclear grouping of inspection items
Redundant fields, inconsistent spacing, and unpredictable interactions
Low adoption of media upload features due to confusing placement
Slow inspection flow caused by excessive clicks and inefficient navigation
Difficulty for service advisors to interpret technician findings
The challenge was to modernize the UI without disrupting existing workflows used daily across dealerships.
Objectives
Modernize the visual system while respecting the functional complexity of automotive inspections.
Improve task flow so technicians can complete inspections faster and with fewer errors.
Enhance clarity and readability through better grouping, spacing, and iconography.
Make media capture and recommendations seamless to support transparency with customers.
Create a scalable UI framework that could be reused across other Affinitiv products.
Solution
1. Clean, Modern Layout
The redesigned interface replaced dense tables with modular sections. Each inspection category becomes collapsible, reducing visual overload while allowing quick scanning.
2. Streamlined Inspection Flow
Technicians can now progress linearly through exterior, battery, under-hood, fluid levels, and brake checks with consistent controls and clearer inspection status indicators.
3. Improved Media Capture
Photo/video upload was redesigned as an inline, visual-first component—making it easier to document issues and build trust with vehicle owners.
4. Smart Service Recommendations
Recommendations are displayed with clearer descriptions, pricing, and part associations. Advisors can instantly understand technician findings without digging through data-heavy tables.
5. Stronger Hierarchy & Readability
Typography, spacing, and modern color usage guide the user through complex information with minimal effort. Critical statuses use clearer iconography and color indicators.
6. Scalable Component System
A reusable library of form elements, tables, inputs, and category blocks ensures consistency and speeds up development across other product modules.
Outcome
The new MPI interface significantly improves usability, visual clarity, and technician efficiency. Key improvements include:
Faster inspection completion
Easier documentation of findings
Higher adoption of photo/video evidence
Clearer communication between technicians and service advisors
A modern, scalable UI foundation for Affinitiv’s broader ecosystem
The redesign transformed a legacy enterprise tool into a more intuitive, modern experience without disrupting essential workflows.
*Disclosure: Designed at Affinitiv. All rights reserved by the company.
Challenge
The legacy MPI system was built over many years and accumulated significant UX debt:
Overwhelming tables with hundreds of data points
Poor hierarchy and unclear grouping of inspection items
Redundant fields, inconsistent spacing, and unpredictable interactions
Low adoption of media upload features due to confusing placement
Slow inspection flow caused by excessive clicks and inefficient navigation
Difficulty for service advisors to interpret technician findings
The challenge was to modernize the UI without disrupting existing workflows used daily across dealerships.
Objectives
Modernize the visual system while respecting the functional complexity of automotive inspections.
Improve task flow so technicians can complete inspections faster and with fewer errors.
Enhance clarity and readability through better grouping, spacing, and iconography.
Make media capture and recommendations seamless to support transparency with customers.
Create a scalable UI framework that could be reused across other Affinitiv products.
Solution
1. Clean, Modern Layout
The redesigned interface replaced dense tables with modular sections. Each inspection category becomes collapsible, reducing visual overload while allowing quick scanning.
2. Streamlined Inspection Flow
Technicians can now progress linearly through exterior, battery, under-hood, fluid levels, and brake checks with consistent controls and clearer inspection status indicators.
3. Improved Media Capture
Photo/video upload was redesigned as an inline, visual-first component—making it easier to document issues and build trust with vehicle owners.
4. Smart Service Recommendations
Recommendations are displayed with clearer descriptions, pricing, and part associations. Advisors can instantly understand technician findings without digging through data-heavy tables.
5. Stronger Hierarchy & Readability
Typography, spacing, and modern color usage guide the user through complex information with minimal effort. Critical statuses use clearer iconography and color indicators.
6. Scalable Component System
A reusable library of form elements, tables, inputs, and category blocks ensures consistency and speeds up development across other product modules.
Outcome
The new MPI interface significantly improves usability, visual clarity, and technician efficiency. Key improvements include:
Faster inspection completion
Easier documentation of findings
Higher adoption of photo/video evidence
Clearer communication between technicians and service advisors
A modern, scalable UI foundation for Affinitiv’s broader ecosystem
The redesign transformed a legacy enterprise tool into a more intuitive, modern experience without disrupting essential workflows.
*Disclosure: Designed at Affinitiv. All rights reserved by the company.
Ally Lilith
Currently based in Malaysia · Available for global collaborations. (Timezone MYT/GMT+8)
•
2025 / allylilith.com
•
•
2025 / allylilith.com
•