Tekmetric
Design System
Redesign of navigational components to align 3 component libraries and decrease tech debt.
Project Overview
Our Goals
At Tekmetric, the main goal is to service auto shops with the best experience to create repair orders, manage employees, and increase sales.
This project focused on redesigning navigational components to solve these internal and user problems:
• Inconsistencies between Figma and Storybook causing implementation issues and prolonged development time.
• Misalignment across all product teams introduced new component patterns other teams were not aware of.
• Build up of tech debt in the backlog.
This project focused on redesigning navigational components to solve these internal and user problems:
• Inconsistencies between Figma and Storybook causing implementation issues and prolonged development time.
• Misalignment across all product teams introduced new component patterns other teams were not aware of.
• Build up of tech debt in the backlog.
User Problem
Hierarchy & Layout
• Lack of clear hierarchy makes it unclear what needs attention first.
• Gray-on-gray titles and elements create a sense of weightlessness.
• Excessive space between elements creates a feeling of disconnection.
• The page has limited vertical space due to fixed content, making it hard to scan.
• Long jobs require excessive scrolling, complicating navigation and locating items.
• Gray-on-gray titles and elements create a sense of weightlessness.
• Excessive space between elements creates a feeling of disconnection.
• The page has limited vertical space due to fixed content, making it hard to scan.
• Long jobs require excessive scrolling, complicating navigation and locating items.
Design System Problem
Lack of Consistency and Cohesion
• Inconsistent button styles: black buttons with icons and text vs. gray icon-only buttons.
• Inconsistent language
• Visual elements, including mixed typography, shadow inconsistencies, and button alignment issues, detract from cohesion.
• Different colors are used inconsistently for status indicators and actions.
• Blue-on-blue tabs make inactive tabs look disabled, adding to visual confusion.
• Inconsistent language
• Visual elements, including mixed typography, shadow inconsistencies, and button alignment issues, detract from cohesion.
• Different colors are used inconsistently for status indicators and actions.
• Blue-on-blue tabs make inactive tabs look disabled, adding to visual confusion.
Solution
New Side Bar Menu and Top Nav Bar
As the lead designer, I made 6 rounds of iterations before landing on this solution.
As our app was growing with new menu items, I leveraged this redesign to have sub menu items,
a modern look, and simpler color palette that didn’t distract from the content.
As our app was growing with new menu items, I leveraged this redesign to have sub menu items,
a modern look, and simpler color palette that didn’t distract from the content.
Solution
Before & After
After implementing these larger changes, it laid the groundwork for redesigning highly used pages like the estimate page.
Roll Out Plan
Measuring Impact
Low Impact Release
Small changes with minimal user disruption and low risk.
Indicators:
✅ No training or onboarding required.
✅ No impact on core workflows.
✅ No expected downtime or performance issues.
✅ Easily reversible if issues arise.
Small changes with minimal user disruption and low risk.
Indicators:
✅ No training or onboarding required.
✅ No impact on core workflows.
✅ No expected downtime or performance issues.
✅ Easily reversible if issues arise.
High Impact Release
Major changes that alter core functionality, require user adaptation, and carry higher risk.
Indicators:
❗ Requires extensive user training, onboarding, or documentation.
❗ Could lead to downtime, performance issues, or major support requests.
❗ High likelihood of user resistance or confusion.
❗ Rollback would be complex and time-consuming.
Major changes that alter core functionality, require user adaptation, and carry higher risk.
Indicators:
❗ Requires extensive user training, onboarding, or documentation.
❗ Could lead to downtime, performance issues, or major support requests.
❗ High likelihood of user resistance or confusion.
❗ Rollback would be complex and time-consuming.
