3M RepairStack Mobile Invoicing
Taking Invoicing from the Desktop to the Shop Floor
Role
Timeline
Team
Platform
OVERVIEW
Completing the mobile invoicing workflow
Expand the desktop invoicing experience to mobile
Replace paper-based work with real-time documentation
Enable end-to-end invoicing on the shop floor
IMPACT
Incorporated into the live product
97 SUS score from six estimators
90% task success with zero critical failures
Recommendations incorporated into the mobile app
Background
Problem to Solve
Estimators could not finish invoices on the shop floor
How might we bring the complete invoicing workflow to mobile?
Our Solution
Expand the existing mobile experience into an
end-to-end invoicing workflow for the shop floor.
Capture Damage in Context
Select the damaged area and repair type directly on an interactive vehicle diagram.
Add Materials on the Spot
Search or browse materials without walking back to the cabinet or relying only on barcode scanning.
Review and Submit
Review repair applications, materials, quantities, and costs before submitting the invoice.
WORK PROCESS
Project timeline
From workflow gaps to a validated solution
RESEARCH
Understanding estimator needs
Following the invoice across the shop
(Journey Map)
What if the invoice could follow the estimator?
(Design Requirements)
DESIGN NEEDS
Defining the design space
Bringing essential desktop tasks to mobile
I mapped the invoicing journey across desktop and mobile to find where mobile could add the most value. I focused on helping estimators capture repair applications, and search materials easily, then aligned these features with the existing mobile flow for consistency.
(User Flow)
DESIGN DEVELOPMENT
Building the mobile design direction
Developing a feasible mobile design concepts
I explored multiple concepts and aligned with stakeholders. The selected direction combined visual damage selection, simplified material entry, and invoice review.
(Concept Sketch)
Prioritizing what matters on a smaller screen
The challenge was deciding what information estimators needed most on a smaller screen. I analyzed performance data, developed interaction hypotheses, and translated the findings into mobile design layouts.
(Heat Map & Google Analysis)
(Information Hierarchy)
Translating insights into testable interactions
(Low Fidelity Prototype)
(High Fidelity Prototype)
DESIGN REFINEMENT
Prototype test and improvements
Making repair selection faster and clearer
Through internal design critiques, I improved the repair application selection flow to reduce friction. Early concepts made precise selection and review difficult. The refined experience enlarged touch targets, clarified selection states, and organized locations around the vehicle.
Improving touch accuracy and clarity on the shop floor
Prototype testing showed where conventional mobile patterns broke down under real working conditions, and made changes.
Gloved hands reduced touch accuracy: enlarged touch targets
Estimators thought spatially: matched the vehicle layout
Busy shops required quick decisions: clarified selection states
Bringing familiar desktop navigation to mobile
To reduce ambiguity, I replaced the unclear selected repair applications with the tab pattern users already knew from desktop. Estimators could navigate the mobile version without relearning anything.
FINAL DESIGN
Complete the Invoice wherever the work happens
EVALUATION
Testing value and usability
Measuring impact through usability testing
I conducted task-based testing with six estimators to evaluate usability, familiarity, and perceived value. The prototype achieved a 90 percent success rate with no critical failures, confirming strong usability.
Refining the experience through testing
Estimators preferred starting with the vehicle diagram but needed larger touch targets for accuracy. I recommended larger interactive areas and clearer visual details to improve precision.
Testing also showed that experienced estimators relied more on product color than material images. I proposed adding color indicators during quantity selection so users could distinguish variants more quickly.
(Implications from Evaluation)
PRODUCT IMPACT
How my work helped the team move forward
Preparing the experience for implementation
I documented the research findings, usability results, design specifications, and recommendations for the next phase of development. I also expanded the mobile design system with responsive components and handed off the final experience with engineers.
What my team said 💬
REFLECTION
My take away from the journey
👊 Project challenge
Designing for the environment, not just the screen
The greatest challenge was translating a complex desktop workflow into a mobile experience that worked under real shop-floor conditions.
Gloves, bright lighting, constant movement, and limited attention changed how familiar interface patterns needed to behave. This project taught me to design around the user’s environment, not simply the screen.
📝 What I learned
A successful desktop-to-mobile transition requires more than resizing an interface. It requires understanding which information matters in the moment and redesigning interactions around the context in which they are used.
👉 If I had more time
With more time, I would test the experience with a larger group of estimators, evaluate feature preferences through targeted experiments, and further improve accessibility for different shop environments.
