Mobile Billing UX.UI Design
Improving Workflow Efficiency for Auto Repair Shops
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
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 initiated and scoped the mobile invoicing concept based on research insights. I aligned with cross-functional stakeholders, defined the experience direction, and prepared assets for the next phase of product development.
RESEARCH
Understanding estimator needs
Gaps in auto shop workflows with the current mobile application
By observing auto shop workflows, I identified friction both the 3M mobile and desktop invoicing flow. Estimators frequently switched between tools and relied on memory or paper notes. This revealed an opportunity to design an end-to-end mobile workflow that supports real-time documentation directly on the shop floor.
(Journey Map)
(Design Requirements)
DESIGN NEEDS
Defining the design space
Shaping the mobile invoicing opportunity
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 concept
I explored multiple concept directions that supports and aligned with stakeholders to ensure feasibility and business alignment. The final direction focused on an interactive vehicle diagram for fast repair selection and a simplified material entry flow.
(Concept Sketch)
Prioritizing information for mobile simplicity
A key challenge was adapting dense desktop information into a mobile interface that supports quick, accurate decisions. I analyzed user performance data with the sales team to define clear information priorities. These insights shaped the core hypotheses and informed the mobile information hierarchy.
(Heat Map & Google Analysis)
Based on hypotheses about the primary interaction, I aligned with the product team on key information priorities and translated them into the mobile layout.
(Information Hierarchy)
From architecture to prototype
I defined the information architecture, designed key interactions, and built low-fidelity prototypes. After approval, I refined the design within the existing 3M design system for consistency.
(Low Fidelity Prototype)
(High Fidelity Prototype)
DESIGN REFINEMENT
Improving clarity, consistency, and usability
Refining the repair application selection flow
Through internal design critiques, I improved the repair application selection flow to reduce friction. I addressed issues with small touchpoints, limited location precision, and difficulty viewing or editing selected RAs. The updated design keeps the vehicle diagram visible and responsive, while clearly showing selected and frequent repair applications for faster decisions.
Improving touch accuracy and clarity
Through prototype testing, I identified opportunities to improve touch accuracy and reduce visual complexity. I increased touch target sizes, simplified layout grouping to match users’ mental models, and clarified selection states to better support real-world shop environments.
Matching desktop tab behavior
To reduce ambiguity, I aligned component patterns with established desktop behaviors, replacing unclear RA cards with structured tabs for clearer interaction and lower cognitive load.
Reducing progress tracker interaction risk
Because the flow is short and linear, I moved the progress tracker into a navigation drawer, freeing up primary screen space and reducing accidental interactions.
DESIGN SOLUTION
Design solutions and why they matter
PROBLEM
SOLUTION
EASE OF USE
ACCURACY
Provides simple, quick yet accurate
selections for application type.
PROBLEM
SOLUTION
EASE OF USE
ACCURACY / FAMILIARITY
Include material images and categories
to support quick recognition and recall.
EVALUATION
Validating the concept with users
Measuring impact through usability testing
In the final three weeks, I led usability testing with six estimators, designing task-based scenarios and measuring success rates to validate the concept. The prototype achieved a 90 percent success rate with no critical failures, confirming strong usability, and post-task feedback helped validate the value of the concept.
Evolving the concept through insight
Based on user feedback, I refined the design and proposed improvements. Users preferred starting with the vehicle diagram but struggled with small touch targets. I recommended enhancing diagram-based navigation with clearer visual detail to improve accuracy and precision.
We learned that material images were unnecessary for experienced estimators, but color distinction was important. I proposed adding a color indicator during quantity selection.
I am excited to share that this concept was later adopted into the current mobile product. 🎉
(Implications from Evaluation)
PRODUCT IMPACT
What I shared
Future planning and handoff
Before concluding my internship, I documented next-phase research plans, outlined the need for larger-scale feature validation, and expanded the mobile design system. I aligned design components with engineering and visual design teams to support future integration.
REFLECTION
My take away from the journey
👊 Project challenge
The biggest challenge was navigating a complex product ecosystem while collaborating with diverse stakeholders and understanding a new business model. I learned the importance of asking targeted questions, adapting my communication to different team languages, and aligning design decisions with product and business priorities.
📝 What I learned
This project strengthened my ability to design across systems, translate desktop workflows to mobile, and balance accessibility within industrial environments.
👉 If I had more time
I would expand testing with a broader set of estimators for quantitative insights, conduct targeted A/B tests for feature preferences, and deepen accessibility refinements to align with WCAG standards for future release.
