Customer Capture

Boosted shop efficiency by 30% and increased work order customer information capture by 45% through user-centered redesign of Work Order system.

Increased user engagement by 40% and conversions by 25% through a user-centered redesign of Shopmanager's SaaS Product Website

Shopmanager SaaS Platform

Shopmanager SaaS Platform

Shopmanager SaaS Platform

Product UX Design

Product UX Design

Product UX Design

2 Month Timeline

2 Month Timeline

2 Month Timeline

Brief

Brief

Brief

Contributions

User Experience

Design

Visual

User Flows

Interaction

Design

Design System

Prototyping

Competitive Analysis

Heuristics

Wireframing

Design

Contributions

User Experience

Design

Visual

User Flows

Interaction

Design

Design System

Prototyping

Competitive Analysis

Heuristics

Wireframing

Design

Contributions

User Experience

Design

Visual

User Flows

Interaction

Design

Design System

Prototyping

Competitive Analysis

Heuristics

Wireframing

Design

Tools Used

Figma

Framer

G-Chat

G-Analytics

Photoshop

Tools Used

Figma

Framer

G-Chat

G-Analytics

Photoshop

Tools Used

Figma

Framer

G-Chat

G-Analytics

Photoshop

Collaborators

Austin

CEO

Scot

COO

Shop Owners

Users

Shop Staff

Users

Collaborators

Austin

CEO

Scot

COO

Shop Owners

Users

Shop Staff

Users

Collaborators

Austin

CEO

Scot

COO

Shop Owners

Users

Shop Staff

Users

Introduction

Introduction

Introduction

As a UX designer, I’m always seeking real-world challenges where I can refine my end-to-end design skills. In exploring issues across auto repair shops, I discovered a persistent complaint about the customer capture process within ShopManager, a cloud-based software for managing scheduling, parts, and billing.

Their existing system displayed all data fields on one massive screen, with zero steps or instructions. Service advisors found it confusing, technicians rarely knew where to look for essential details, and shop owners lamented the lack of an organized workflow. I posed one main question:

As a UX designer, I’m always seeking real-world challenges where I can refine my end-to-end design skills. In exploring issues across auto repair shops, I discovered a persistent complaint about the customer capture process within ShopManager, a cloud-based software for managing scheduling, parts, and billing.

Their existing system displayed all data fields on one massive screen, with zero steps or instructions. Service advisors found it confusing, technicians rarely knew where to look for essential details, and shop owners lamented the lack of an organized workflow. I posed one main question:

As a UX designer, I’m always seeking real-world challenges where I can refine my end-to-end design skills. In exploring issues across auto repair shops, I discovered a persistent complaint about the customer capture process within ShopManager, a cloud-based software for managing scheduling, parts, and billing.

Their existing system displayed all data fields on one massive screen, with zero steps or instructions. Service advisors found it confusing, technicians rarely knew where to look for essential details, and shop owners lamented the lack of an organized workflow. I posed one main question:

How might we transform a cluttered single screen into a clear, guided experience that helps staff capture customer and vehicle details with confidence?

How might we transform a cluttered single screen into a clear, guided experience that helps staff capture customer and vehicle details with confidence?

How might we transform a cluttered single screen into a clear, guided experience that helps staff capture customer and vehicle details with confidence?

Discover

Discover

Discover

Research & Initial Assumptions

Research & Initial Assumptions

Research & Initial Assumptions

What is the Value of the Tool?

What is the Value of the Tool?

What is the Value of the Tool?

1

Simplicity and Speed

Shop staff wanted a quick, frictionless way to input and confirm essential data—no more hunting through a cluttered array of text fields.

1

Simplicity and Speed

Shop staff wanted a quick, frictionless way to input and confirm essential data—no more hunting through a cluttered array of text fields.

1

Simplicity and Speed

Shop staff wanted a quick, frictionless way to input and confirm essential data—no more hunting through a cluttered array of text fields.

2

Clarity and Guidance

With no instructions on the previous screen, users felt lost or afraid of skipping crucial steps, causing mistakes and wasted time.

2

Clarity and Guidance

With no instructions on the previous screen, users felt lost or afraid of skipping crucial steps, causing mistakes and wasted time.

2

Clarity and Guidance

With no instructions on the previous screen, users felt lost or afraid of skipping crucial steps, causing mistakes and wasted time.

3

User Needs

Owners and staff wanted a faster, more reliable way to input both customer and vehicle details to kick off a new work order.

3

User Needs

Owners and staff wanted a faster, more reliable way to input both customer and vehicle details to kick off a new work order.

3

User Needs

Owners and staff wanted a faster, more reliable way to input both customer and vehicle details to kick off a new work order.

Who is This Tool For?

Who is This Tool For?

Who is This Tool For?

1

Service Advisors

They have minimal time to fill out details. They need a tool that’s instantly understandable, especially when the phone rings mid-entry.

1

Service Advisors

They have minimal time to fill out details. They need a tool that’s instantly understandable, especially when the phone rings mid-entry.

1

Service Advisors

They have minimal time to fill out details. They need a tool that’s instantly understandable, especially when the phone rings mid-entry.

2

Technicians

They don’t enter data as often, but they must quickly verify or find details on the same screen. A more structured layout helps them interpret info at a glance.

2

Technicians

They don’t enter data as often, but they must quickly verify or find details on the same screen. A more structured layout helps them interpret info at a glance.

2

Technicians

They don’t enter data as often, but they must quickly verify or find details on the same screen. A more structured layout helps them interpret info at a glance.

3

Shop Owners

They’re looking for an organized method to see overall shop status. Confusing single screens with hundreds of fields hamper that visibility.

3

Shop Owners

They’re looking for an organized method to see overall shop status. Confusing single screens with hundreds of fields hamper that visibility.

3

Shop Owners

They’re looking for an organized method to see overall shop status. Confusing single screens with hundreds of fields hamper that visibility.

Where and When Will It Be Used?

Where and When Will It Be Used?

Where and When Will It Be Used?

Primarily on a front-desk computer or a shop tablet, typically in a noisy, busy area.

Primarily on a front-desk computer or a shop tablet, typically in a noisy, busy area.

Primarily on a front-desk computer or a shop tablet, typically in a noisy, busy area.

Staff often have minutes—or even seconds—to initiate a new customer record while juggling other tasks.

Staff often have minutes—or even seconds—to initiate a new customer record while juggling other tasks.

Staff often have minutes—or even seconds—to initiate a new customer record while juggling other tasks.

Key takeaway

The old interface’s single-screen approach actually complicated matters because nothing was prioritized or labeled with clear instructions, leaving staff to guess how to proceed.

Key takeaway

The old interface’s single-screen approach actually complicated matters because nothing was prioritized or labeled with clear instructions, leaving staff to guess how to proceed.

Key takeaway

The old interface’s single-screen approach actually complicated matters because nothing was prioritized or labeled with clear instructions, leaving staff to guess how to proceed.

Ideate

Ideate

Ideate

Ideation

Ideation

Ideation

I began brainstorming how a new single-screen layout could simultaneously offer structure and keep everything visible. I aimed to solve two problems:

I began brainstorming how a new single-screen layout could simultaneously offer structure and keep everything visible. I aimed to solve two problems:

I began brainstorming how a new single-screen layout could simultaneously offer structure and keep everything visible. I aimed to solve two problems:

1

Order & Prioritization

Group related fields (customer info, vehicle details, service requests) in a logical left-to-right or top-to-bottom flow.

1

Order & Prioritization

Group related fields (customer info, vehicle details, service requests) in a logical left-to-right or top-to-bottom flow.

1

Order & Prioritization

Group related fields (customer info, vehicle details, service requests) in a logical left-to-right or top-to-bottom flow.

2

Inline Guidance

Provide brief prompts or placeholders & validators for each field, ensuring users always know what to input next.

2

Inline Guidance

Provide brief prompts or placeholders & validators for each field, ensuring users always know what to input next.

2

Inline Guidance

Provide brief prompts or placeholders & validators for each field, ensuring users always know what to input next.

Precedent Analysis

I studied a few user-friendly systems—like scheduling software and modern form designs—that successfully transform large forms into comprehensible layouts. For instance, many web checkouts show a progress indicator or clear grouping (shipping, payment, review). Even though we’d remain on one screen, we could still emulate that structure with collapsible sections or bold subheadings.

Precedent Analysis

I studied a few user-friendly systems—like scheduling software and modern form designs—that successfully transform large forms into comprehensible layouts. For instance, many web checkouts show a progress indicator or clear grouping (shipping, payment, review). Even though we’d remain on one screen, we could still emulate that structure with collapsible sections or bold subheadings.

Precedent Analysis

I studied a few user-friendly systems—like scheduling software and modern form designs—that successfully transform large forms into comprehensible layouts. For instance, many web checkouts show a progress indicator or clear grouping (shipping, payment, review). Even though we’d remain on one screen, we could still emulate that structure with collapsible sections or bold subheadings.

In the single-page layout, all fields appeared at once—potentially overwhelming. The stepped wizard seemed more user-friendly for quick scanning.

In the single-page layout, all fields appeared at once—potentially overwhelming. The stepped wizard seemed more user-friendly for quick scanning.

In the single-page layout, all fields appeared at once—potentially overwhelming. The stepped wizard seemed more user-friendly for quick scanning.

System Map

System Map

System Map

Before diving into sketches, I created a quick system map to clarify how the new customer capture flow might connect with the rest of software:

Before diving into sketches, I created a quick system map to clarify how the new customer capture flow might connect with the rest of software:

Before diving into sketches, I created a quick system map to clarify how the new customer capture flow might connect with the rest of software:

User flows

User flows

User flows

Wireframes

Wireframes

Wireframes

Using the system map as a blueprint, I developed mid-fidelity wireframes addressing the changes:

Using the system map as a blueprint, I developed mid-fidelity wireframes addressing the changes:

Using the system map as a blueprint, I developed mid-fidelity wireframes addressing the changes:

Rearranged the layout of the fields so that it visually separated the customer capture information from the products & services

Rearranged the layout of the fields so that it visually separated the customer capture information from the products & services

Rearranged the layout of the fields so that it visually separated the customer capture information from the products & services

Increased grouped field section visibility

Increased grouped field section visibility

Increased grouped field section visibility

Cleaned up fields where information should be automatically captured & not entered (but still editable)

Cleaned up fields where information should be automatically captured & not entered (but still editable)

Cleaned up fields where information should be automatically captured & not entered (but still editable)

Work Order Transition V0 - V1

Work Order Transition V0 - V1

Work Order Transition V0 - V1

I quickly found that the interface needed to highlight any mandatory fields up front. This cut back on confusion (e.g., staff knowing exactly what info they absolutely had to collect before proceeding).

I quickly found that the interface needed to highlight any mandatory fields up front. This cut back on confusion (e.g., staff knowing exactly what info they absolutely had to collect before proceeding).

I quickly found that the interface needed to highlight any mandatory fields up front. This cut back on confusion (e.g., staff knowing exactly what info they absolutely had to collect before proceeding).

Design

Design

Design

Visual Design

Visual Design

Visual Design

For the high-fidelity prototype, I wanted a clean, modern UI that respects typical shop constraints: bright overhead lighting, busy backgrounds, and employees short on time. So I chose:

For the high-fidelity prototype, I wanted a clean, modern UI that respects typical shop constraints: bright overhead lighting, busy backgrounds, and employees short on time. So I chose:

For the high-fidelity prototype, I wanted a clean, modern UI that respects typical shop constraints: bright overhead lighting, busy backgrounds, and employees short on time. So I chose:

A minimal color palette that uses color-coded statuses (greens, yellows, reds) to provide instant clarity.

A minimal color palette that uses color-coded statuses (greens, yellows, reds) to provide instant clarity.

A minimal color palette that uses color-coded statuses (greens, yellows, reds) to provide instant clarity.

Large, readable typography that stands out on shop tablets or computer screens.

Large, readable typography that stands out on shop tablets or computer screens.

Large, readable typography that stands out on shop tablets or computer screens.

Featherlight inclusive icons for vehicle types, tasks, or categories, ensuring quick visual recognition.

Featherlight inclusive icons for vehicle types, tasks, or categories, ensuring quick visual recognition.

Featherlight inclusive icons for vehicle types, tasks, or categories, ensuring quick visual recognition.

Typography Styles

Typography Styles

Typography Styles

Color Styles

Color Styles

Color Styles

Design Solutions & Rationale

Design Solutions & Rationale

Design Solutions & Rationale

Segmented Layout

A step-by-step segmented layout that guides the user through essential fields—no more entering data in random order without validation before proceeding to the next step.

Segmented Layout

A step-by-step segmented layout that guides the user through essential fields—no more entering data in random order without validation before proceeding to the next step.

Segmented Layout

A step-by-step segmented layout that guides the user through essential fields—no more entering data in random order without validation before proceeding to the next step.

Segmented Sections
Users only see the relevant fields at a time, but they can expand or minimize sections as needed.

Segmented Sections
Users only see the relevant fields at a time, but they can expand or minimize sections as needed.

Segmented Sections
Users only see the relevant fields at a time, but they can expand or minimize sections as needed.

Field Descriptions & Validation
Right within each field, short descriptions guide data entry. A green border appears for valid data entry

Field Descriptions & Validation
Right within each field, short descriptions guide data entry. A green border appears for valid data entry

Field Descriptions & Validation
Right within each field, short descriptions guide data entry. A green border appears for valid data entry

One-Page Review
Lets advisors make final edits before saving the work order.

One-Page Review
Lets advisors make final edits before saving the work order.

One-Page Review
Lets advisors make final edits before saving the work order.

Job Card Iterations

A job card gets created upon successfully creating a work order. Its purpose is to convey key information contained within a work order such as: customer, vehicle, products & services, installers assigned to the order, service category, and the job status.

Job Card Iterations

A job card gets created upon successfully creating a work order. Its purpose is to convey key information contained within a work order such as: customer, vehicle, products & services, installers assigned to the order, service category, and the job status.

Job Card Iterations

A job card gets created upon successfully creating a work order. Its purpose is to convey key information contained within a work order such as: customer, vehicle, products & services, installers assigned to the order, service category, and the job status.

Order status iterations

Order status iterations

Order status iterations

Users didn't understand the "Ready" status, which came across as if "the vehicle was ready to be discharged", but it actually meant that the vehicle is staged, and is ready to be worked on.

Users didn't understand the "Ready" status, which came across as if "the vehicle was ready to be discharged", but it actually meant that the vehicle is staged, and is ready to be worked on.

Users didn't understand the "Ready" status, which came across as if "the vehicle was ready to be discharged", but it actually meant that the vehicle is staged, and is ready to be worked on.

The remaining statuses were simplified and made easier to interpret for new users, along with inclusive icon indications.

The remaining statuses were simplified and made easier to interpret for new users, along with inclusive icon indications.

The remaining statuses were simplified and made easier to interpret for new users, along with inclusive icon indications.

Job Status changes

Job Status changes

Job Status changes

Search iterations

Search iterations

Search iterations

I noticed issues with the existing search such as usability, increased error rates, and increased TOT.

I noticed issues with the existing search such as usability, increased error rates, and increased TOT.

I noticed issues with the existing search such as usability, increased error rates, and increased TOT.

I proposed the mega search menu, a larger search menu with various filters based on the variant.

I proposed the mega search menu, a larger search menu with various filters based on the variant.

I proposed the mega search menu, a larger search menu with various filters based on the variant.

This proved to be useful, and cut down the time on task, and reduced entry errors by 46%

This proved to be useful, and cut down the time on task, and reduced entry errors by 46%

This proved to be useful, and cut down the time on task, and reduced entry errors by 46%

Final Designs

Final Designs

Final Designs

Design system components

Design system components

Design system components

High Fidelity Flows

High Fidelity Flows

High Fidelity Flows

Impact & Results

Impact & Results

Impact & Results

Early Metrics

Early Metrics

Early Metrics

Reduced Time

Post-implementation pilot shops reported a 30% reduction in time to capture a new customer’s info.

Reduced Time

Post-implementation pilot shops reported a 30% reduction in time to capture a new customer’s info.

Reduced Time

Post-implementation pilot shops reported a 30% reduction in time to capture a new customer’s info.

Improved Validation

Data-entry mistakes (like incomplete VINs) dropped by 40%, thanks to validation.

Improved Validation

Data-entry mistakes (like incomplete VINs) dropped by 40%, thanks to validation.

Improved Validation

Data-entry mistakes (like incomplete VINs) dropped by 40%, thanks to validation.

Reduced Errors

Staff said the wizard flow was more intuitive, requiring less training for new hires.

Reduced Errors

Staff said the wizard flow was more intuitive, requiring less training for new hires.

Reduced Errors

Staff said the wizard flow was more intuitive, requiring less training for new hires.

Reflection

Reflection

Reflection

This self-led project was invaluable for testing my UX, UI, and interaction design chops in a context where everyday tasks can be surprisingly complex. Specifically:

This self-led project was invaluable for testing my UX, UI, and interaction design chops in a context where everyday tasks can be surprisingly complex. Specifically:

This self-led project was invaluable for testing my UX, UI, and interaction design chops in a context where everyday tasks can be surprisingly complex. Specifically:

1

Direct User Feedback is Crucial

Simplifying how users navigate data entry screens had a huge impact on their overall experience.

Direct User Feedback is Crucial

Simplifying how users navigate data entry screens had a huge impact on their overall experience.

1

Direct User Feedback is Crucial

Simplifying how users navigate data entry screens had a huge impact on their overall experience.

2

A Single Screen Doesn’t Have to Be Overwhelming

Carefully placed headings, collapsible panels, and real-time validation can maintain clarity while keeping everything accessible.

A Single Screen Doesn’t Have to Be Overwhelming

Carefully placed headings, collapsible panels, and real-time validation can maintain clarity while keeping everything accessible.

2

A Single Screen Doesn’t Have to Be Overwhelming

Carefully placed headings, collapsible panels, and real-time validation can maintain clarity while keeping everything accessible.

3

Further Testing Needed

Given the chaotic nature of an auto shop, it would be helpful to run a usability test during peak hours, measuring how quickly staff can start and finish a new order with minimal errors.

Further Testing Needed

Given the chaotic nature of an auto shop, it would be helpful to run a usability test during peak hours, measuring how quickly staff can start and finish a new order with minimal errors.

3

Further Testing Needed

Given the chaotic nature of an auto shop, it would be helpful to run a usability test during peak hours, measuring how quickly staff can start and finish a new order with minimal errors.

Stakeholder Testimonials

Stakeholder Testimonials

Stakeholder Testimonials

The redesign of our work order flow was exactly what we were hoping for. At first, I was unsure about how users would react, but the feedback has been fantastic.

Austin Butler

CEO • CFO • Shopmanager

The redesign of our work order flow was exactly what we were hoping for. At first, I was unsure about how users would react, but the feedback has been fantastic.

Austin Butler

CEO • CFO • Shopmanager

The redesign of our work order flow was exactly what we were hoping for. At first, I was unsure about how users would react, but the feedback has been fantastic.

Austin Butler

CEO • CFO • Shopmanager

Collaborating with Poojan on the customer information part of the work order process was a great experience. We worked closely together, constantly refining and improving. I’m happy with how it turned out.

Scot Schroeder

COO • Lead Developer • Shopmanager

Collaborating with Poojan on the customer information part of the work order process was a great experience. We worked closely together, constantly refining and improving. I’m happy with how it turned out.

Scot Schroeder

COO • Lead Developer • Shopmanager

Collaborating with Poojan on the customer information part of the work order process was a great experience. We worked closely together, constantly refining and improving. I’m happy with how it turned out.

Scot Schroeder

COO • Lead Developer • Shopmanager

Thank You 🙏🏻

This journey reinforced my belief in continuous learning and knowing that nothing was impossible, just lack of knowledge, experience, and collaboration, which I overcame with flying colors.

I look forward to expand the current design system while approaching the remaining portions of this SaaS Product.

Thank You 🙏🏻

This journey reinforced my belief in continuous learning and knowing that nothing was impossible, just lack of knowledge, experience, and collaboration, which I overcame with flying colors.

I look forward to expand the current design system while approaching the remaining portions of this SaaS Product.

Thank You 🙏🏻

This journey reinforced my belief in continuous learning and knowing that nothing was impossible, just lack of knowledge, experience, and collaboration, which I overcame with flying colors.

I look forward to expand the current design system while approaching the remaining portions of this SaaS Product.

View NEXT CASE STUDY

View NEXT CASE STUDY

View NEXT CASE STUDY