Mobile Billing UX.UI Design

Mobile Invoicing for Auto Repair Estimators

Protected by design spells. Enter the magic word. ✨✨✨

Protected by design spells. Enter the magic word. ✨✨✨

Protected by design spells. Enter the magic word. ✨✨✨

Overview

The project aimed to improving 3M RepairStack™ Billables Invoicing by introducing an Easy Mobile Billing feature that allows estimators to create and manage invoices directly on the shop floor.

As a UX design intern, I proposed and designed a mobile invoicing experience that supports real-time material documentation, intuitive repair application entry, and seamless integration with existing RepairStack systems.

The goal was to replace analog workflows with a pocket-ready digital tool that fits naturally into daily shop operations.


My Role

UX Design Intern I 3M, SIBG Design Team
User Research, Wire Framing, Prototyping, UX/UI Audit, Usability Testing, Design System Development, Stakeholder Presentation

Team

Worked with the 3M RepairStack product group, including 2 UX researcher, 1 product manager, 2 developers, and 1 product owner.

Tool

Figma, Miro, Azure DevOps, Storybook, Microsoft Office

Duration

3 month,​ Jun-Aug 2025

Background

Extending desktop invoicing to a mobile

experience for auto repair estimators

Extending desktop invoicing to a mobile

experience for auto

repair estimators

3M RepairStack Billables is application that helps auto body shops create invoices for 3M materials.

After a major mobile release in Sept–Oct 2024, mobile invoicing increased 150%, revealing new opportunities to support users creating invoices away from their desks.

3M RepairStack Billables Invoicing is application that helps auto body shops create invoices for 3M materials.

After a major mobile release in Sept–Oct 2024, mobile invoicing increased 150%, revealing new opportunities to

support users creating invoices away from their desks.

While effective on desktop, shop floor users still rely

on manual methods, leading to errors and delays.

3M RepairStack Billables Invoicing is application that helps auto body shops create invoices for 3M materials.

After a major mobile release in Sept–Oct 2024, mobile invoicing increased 150%, revealing new opportunities to

support users creating invoices away from their desks.

How might we replace analog workflows from paper to pocket with a mobile invoicing tool that supports real-time material documentation on the shop floor?

How might we develop an automated system that improves work productivity by optimizing monitor positioning and ergonomics?

How might we develop an automated system that improves work productivity by optimizing monitor positioning and ergonomics?

Our Solution

A mobile invoicing feature replaces manual workflows, allowing estimators to document repairs and submit invoices directly from the shop floor.

Capture Damage in Context

Mark vehicle damage directly on a visual diagram, making it easy to capture application details on the shop floor.

Add Materials on the Spot

Search or browse materials by category to quickly add items without leaving the shop floor.

Review and Submit

Allow users to review added repair applications and submit easily with a clear summary of materials, total RAs, and cost.

WORK PROCESS

Planning project timline

From research insight to proof of concept

As the sole UX designer, I proactively created a concept prototype based on mobile app research, aligned with cross-functional stakeholders, and prepared assets for the next phase of design development.

RESEARCH

Understanding estimator needs

Gaps in auto shop workflows with the current mobile application

By observing auto shop workflows, I identified estimator pain points in the 3M mobile and desktop invoicing flow, where frequent tool switching forced reliance on memory or paper. This pointed to the need for an end-to-end mobile workflow.

Integrating mobile features for end-to-end invoicing workflow

I mapped the end-to-end invoicing workflow and clarified how mobile features connect within the existing system. I have focused on key features that allow estimators to capture repair applications and materials on the shop floor.

Add Repair Application

How might we develop an automated system that improves work productivity by optimizing monitor positioning and ergonomics?

PROBLEM

Estimators manually check damage on printed sheets, creating
repetitive work to translate everything on the desktop.
Estimators manually check damage on printed sheets, creating repetitive work to translate everything on the desktop.

SOLUTION

EASE OF USE

Allows estimators to document damage on
the shop floor with a clear visual diagram.
Allows estimators to document damage on the shop floor with a clear visual diagram.

ACCURACY

Provides simple, quick yet accurate
selections for application type.

Add Material

How might we develop an automated system that improves work productivity by optimizing monitor positioning and ergonomics?

PROBLEM

Users don’t want to walk back and forth to the 3M cabinet,
and the scanner only recognizes codes to select materials.
Users don’t want to walk back and forth to the 3M cabinet, and the scanner only recognizes codes to select materials.

SOLUTION

EASE OF USE

Enable users to add materials by searching
or scrolling by category without scanning.
Allows estimators to document damage on the shop floor with a clear visual diagram.

ACCURACY / FAMILIARITY

Include material images and categories
to support quick recognition and recall.
VALUE

Will our customers see creating material invoices from a mobile device as a valuable tool for their shop?

Can users complete tasks easily on floor with minimal training?

USABILITY

Are new features usable?

Is the mobile version familiar for current users?