Shop Controller App

Transforming complex data into an intuitive user experience.

Transforming complex data into an intuitive user experience.

ShopController needed a user-friendly interface for their automotive shop management solution that could:

  • Serve three distinct user personas with different technical abilities

  • Handle massive volumes of specialized data

  • Replace outdated systems with intuitive digital workflows

  • Operate in real-time for both customer interactions and backend management

I created a psychology-informed design approach that:

  • Prioritized User Psychology: Applied cognitive load management principles to prevent information overload while maintaining full functionality.

  • Developed Modular Components: Built flexible UI elements that adapted to each user's needs and permissions, including:

  • Dynamic job tiles that evolved throughout service lifecycles

  • Streamlined customer intake workflows

  • Visual management systems for operational oversight

  • Created a Comprehensive Design System: Delivered a complete library of components, spacing standards, and automotive-specific iconography that established a foundation for current and future products.

  • Quick iterations with Figma prototyping.

Measurable Insights

  • Eliminated costly paper-based errors

  • Modernized inventory management, reducing overhead

  • Enhanced customer satisfaction through improved communication

  • Accelerated development of subsequent products from my design system

  • Provided leadership with actionable business intelligence

Share This:

More Content

TBV Website

Logo design featuring a minimalist letter 'C' against a dark background.

BW Mark 002

Logo design featuring a minimalist letter 'C' against a dark background.

A table logo icon.

Text graphic featuring "Inline Type Styles in Figma" with a modern design and contrasting colors.

Inline Text Styles - Framer 101

This video breaks down everything you need to know about Framer’s approach to inline text styles, including the strengths, weaknesses, and workarounds.

Logo featuring a hexagonal shape with a stylized arrow or corner element, set against a dark background.

BW Mark 001

Logo featuring a hexagonal shape with a stylized arrow or corner element, set against a dark background.

Cubed faux 3D memorability.

TBV Website

Text graphic featuring "Inline Type Styles in Figma" with a modern design and contrasting colors.

Inline Text Styles - Framer 101

This video breaks down everything you need to know about Framer’s approach to inline text styles, including the strengths, weaknesses, and workarounds.

Logo featuring a hexagonal shape with a stylized arrow or corner element, set against a dark background.

BW Mark 001

Logo featuring a hexagonal shape with a stylized arrow or corner element, set against a dark background.

Cubed faux 3D memorability.

Logo design featuring a minimalist letter 'C' against a dark background.

BW Mark 002

Logo design featuring a minimalist letter 'C' against a dark background.

A table logo icon.

TBV Website

Logo featuring a hexagonal shape with a stylized arrow or corner element, set against a dark background.

BW Mark 001

Logo featuring a hexagonal shape with a stylized arrow or corner element, set against a dark background.

Cubed faux 3D memorability.

Text graphic featuring "Inline Type Styles in Figma" with a modern design and contrasting colors.

Inline Text Styles - Framer 101

This video breaks down everything you need to know about Framer’s approach to inline text styles, including the strengths, weaknesses, and workarounds.

Logo design featuring a minimalist letter 'C' against a dark background.

BW Mark 002

Logo design featuring a minimalist letter 'C' against a dark background.

A table logo icon.