Detail Connect
June 2026
Designing a Flexible Travel Fee Feature for Mobile Detailers
Overview
Detail Connect is a SaaS CRM platform that helps mobile auto detailers manage bookings, customers, invoicing, scheduling, business operations, and automate day-to-day workflows from a single platform.
As the product evolved, one business challenge became increasingly apparent. Detailers had no built-in way to charge customers for traveling beyond their normal service area. This often meant absorbing fuel costs, travel time, and vehicle wear or declining bookings that were no longer profitable. The goal was to introduce a flexible Travel Fee feature that allowed detailers to configure travel charges while keeping pricing transparent for customers.
The Problem:
Mobile detailers often had to cover their own travel costs for long-distance bookings because there was no way to automatically charge customers.
The Goal:
Design a flexible travel fee system that helped detailers recover travel costs while keeping pricing clear, configurable, and consistent across the booking experience.
Users:
Mobile auto detailers.
My Contribution:
End-to-end UX/UI design, interaction design, design iterations, developer handoff preparation, implementation review.
Challenge
The feature needed to support multiple pricing models, configurable service zones, booking-specific overrides, automated distance calculations, and validation rules. My challenge was transforming these business requirements into an experience that felt simple, intuitive, and consistent with the rest of the Detail Connect product.
The experience also needed to support multiple touchpoints including:
Travel Fee configuration
Customer booking flow
Booking management
Manual bookings
Invoice pricing
Error states
while keeping the interaction straightforward for detailers.
Understanding the Context:
Travel Fee wasn't a standalone feature. It affected multiple parts of the Detail Connect experience, including configuration, customer booking, booking management, manual bookings, and invoicing. Before designing, I needed to understand how these existing workflows connected so the new feature would feel like a natural extension of the product rather than a separate experience.
This understanding helped me design a solution that integrated seamlessly into existing workflows while keeping the experience consistent and easy for detailers to use.
Solution
Key Design Decisions
Designing for simplicity:
The Travel Fee feature involved several configurable settings including pricing type, free service radius, maximum travel distance, and booking-specific overrides. Instead of exposing these business rules in a complex interface, I focused on organizing the information into a clear and approachable workflow.
My goal was to organize the feature into a clear, predictable workflow that supported both first-time setup and future edits.
Design Impact:
Keeping the configuration simple reduced the effort required to set up travel fees while making the pricing rules easier to understand. This allowed detailers to quickly configure the feature without feeling overwhelmed by multiple settings.
Integrating the feature into existing workflows:
Rather than introducing a completely separate experience, I designed the feature to fit naturally within the Detailer Hub, where similar business tools already existed.
This reduced the learning curve by placing the feature where users would already expect to manage operational settings.
Design Impact:
Placing the feature within the existing Detailer Hub reduced the learning curve by keeping related business tools in one familiar location. This helped maintain consistency across the product and made the feature easier to discover and use.
Supporting transparency through visual communication:
To help detailers understand how travel fees worked, I incorporated visual map zones and supporting labels that clearly distinguished free and chargeable service areas.
I also introduced a pricing example beneath the configuration fields so detailers could immediately understand how their settings affected customer pricing without having to calculate it themselves.
Design Impact:
Using visual map zones, descriptive labels, and pricing examples helped explain how travel fees were calculated before users configured the feature. Making the pricing logic visible reduced guesswork and increased confidence when setting travel fees.
Reducing unnecessary navigation:
During design reviews, we identified opportunities to simplify common tasks.
Instead of requiring detailers to leave the booking flow and return to the Travel Fee settings page, frequently adjusted options such as fee type and working radius were made accessible within relevant workflows.
This reduced context switching and made booking management more efficient.
Design Impact:
Allowing frequently adjusted settings to be edited directly within the booking workflow reduced unnecessary navigation and made common tasks more efficient. Detailers could make changes in context without interrupting their workflow.
Iteration
Stakeholder feedback highlighted opportunities to reduce navigation and improve pricing clarity, leading to several focused refinements before development.
The final iteration focused on simplifying common tasks, improving pricing clarity, and making the experience easier to understand while maintaining consistency with the existing product.
Outcome
The Travel Fee feature was successfully implemented and launched as part of the Detail Connect product.
The final implementation closely matched the approved designs, and I validated the feature before release by reviewing the production build and reporting UI issues that required refinement.
What shipped:
Travel Fee configuration
Booking-level editing
Manual travel fee override
Customer price breakdown
Travel fee invoice support
The feature is now available within the live Detail Connect application and supports travel fee configuration throughout the booking workflow.
Result
Since its release, approximately 23% of detailers have enabled the Travel Fee feature.
