Voit Auto

Voit Auto Mobile Service Platform

Transforming emergency automotive service booking from a stressful experience into a seamless, confidence-building interaction through comprehensive UX design and development.

6 months
Project Duration
Research to Launch
89%+
Booking Completion
vs 67% industry avg
<4.5min
Average Booking
Emergency scenarios
+47%
Online Bookings
Year-over-year growth
UX Strategy
Mobile-First Design
Multi-Step Flow
Location Services
Payment Integration
Emergency Services
SITUATION

Business Context & Market Analysis

Market Problems Identified

73% of automotive emergencies occur outside business hours
Average customer stress level during roadside emergencies: 8.2/10
89% of users reach for mobile devices during emergencies
Customer expectation for response time: Under 30 minutes

Target User Segments

Emergency Emma (35)

Working professional needing immediate roadside assistance during commute

Prepared Paul (42)

Family man scheduling preventive tire services for multiple vehicles

Business Betty (29)

Entrepreneur requiring reliable commercial vehicle maintenance

Critical User Pain Points

Overwhelming information during high-stress situations
Uncertainty about service area coverage
Complex vehicle specification requirements
Payment security concerns during emergencies
Lack of real-time updates on technician arrival
Poor mobile booking experiences
TASK

Objectives & Success Metrics

Primary Objectives

  • • Reduce booking friction from contact to completion
  • • Provide transparent pricing with no hidden fees
  • • Ensure service area coverage through location verification
  • • Handle complex vehicle specifications accurately
  • • Process payments securely with multiple options
  • • Deliver exceptional mobile experience

Success Metrics

Booking completion rate
>85%
Mobile conversion rate
>12%
Customer satisfaction
>4.5/5

Technical Requirements

  • • 24/7 availability with 99%+ uptime
  • • Multi-device compatibility
  • • WCAG 2.1 AA accessibility compliance
  • • PCI DSS security standards
  • • Google Maps integration
  • • Real-time communication capabilities
ACTION

Design Process & Implementation

1. User Research & Discovery

The Research Challenge

The Problem: Voit Auto's phone-based booking system was creating barriers during the most stressful moments of customers' lives. With 73% of automotive emergencies occurring outside business hours, customers needed a reliable digital solution that could match the urgency of their situation.

The Research Approach: I conducted comprehensive user research to understand how stress affects digital behavior during emergencies. The goal was to identify the exact moments where current solutions fail and design interventions that transform anxiety into confidence.

The Impact: Research findings directly informed design decisions that reduced booking friction by 67% and increased mobile conversion by 14%, proving that empathy-driven design can turn emergency situations into trust-building experiences.

6 weeks
Research Phase
47
User Interviews
156
Survey Responses

Discovery Research Methods

Stakeholder Interviews (8 sessions)

Business owners, technicians, and customer service representatives to understand operational constraints and customer pain points

User Interviews (47 participants)

In-depth interviews with customers who experienced roadside emergencies in the past 12 months

Contextual Observations (12 field studies)

Shadowing real service calls to observe customer behavior during high-stress emergency situations

Online Survey (156 responses)

Quantitative data on booking preferences, technology usage, and service expectations

Validation & Testing Methods

Usability Testing (24 participants)

Task-based testing of booking flow with users experiencing simulated emergency scenarios

A/B Testing

Testing different variations of key booking steps to optimize conversion rates

Analytics Review

Analysis of 6 months of phone booking data to identify patterns and friction points

Competitive Analysis (8 providers)

Comprehensive evaluation of existing emergency service booking experiences

User Personas

Emergency Emma

Marketing Manager, 32

Demographics
  • Age: 32 years old
  • Occupation: Marketing Manager
  • Income: $75,000/year
  • Location: Dallas, TX
  • Family: Single, no children
Technology & Auto Experience
  • Tech Level: High - Early adopter
  • Primary Device: iPhone 14 Pro
  • Auto Knowledge: Basic maintenance awareness
  • Service History: Dealership preferred
Pain Points
  • • Overwhelming anxiety during roadside emergencies
  • • Uncertainty about service quality from unknown providers
  • • Difficulty explaining vehicle issues over the phone
  • • Long wait times with traditional roadside assistance
Goals & Motivations
  • • Get back on the road quickly and safely
  • • Transparent pricing with no surprise charges
  • • Professional service that builds confidence
  • • Easy mobile booking without phone calls
In Her Own Words
"That morning when my tire blew out on I-35, I was supposed to be presenting to our biggest client in 45 minutes. I needed help immediately, but every roadside service wanted me to stay on hold or couldn't tell me when they'd arrive. I just wanted someone to say 'We'll be there in 20 minutes' and mean it."
- Emergency Emma, from user interview #23
Communication Preferences
  • • Mobile app notifications
  • • Text message updates
  • • Real-time tracking
  • • Live chat support
Scenario Context

Emergency: Flat tire on highway during morning commute to important client meeting. Stress level: 9/10. Needs immediate solution with clear timeline.

User Journey Map: Emergency Emma's Experience

The Story: It's 7:15 AM on a Tuesday morning when Emma hears the unmistakable sound of a tire blowout on I-35. She's 25 minutes away from the biggest client presentation of her career. Her phone shows 23% battery, it's lightly raining, and traffic is building up around her disabled vehicle.

This journey map traces Emma's experience from initial panic to final satisfaction, showing how each touchpoint either increases or decreases her stress level, and how our design interventions transform a crisis into confidence.

Problem Recognition
Stress: 9/10
Panic
Solution Search
Stress: 8/10
Anxiety
Service Discovery
Stress: 7/10
Hope
Information Gathering
Stress: 6/10
Evaluation
Booking Process
Stress: 5/10
Focus
Payment & Confirmation
Stress: 3/10
Relief
Service Delivery
Stress: 2/10
Confidence
Follow-up
Stress: 1/10
Satisfaction
Critical Touchpoints
Initial Discovery:

Google search "emergency tire service Dallas" on mobile

Trust Building:

Service area verification and transparent pricing

Booking Flow:

9-step mobile booking completed in under 4 minutes

Opportunity Areas
Immediate Reassurance:

Clear "Help is on the way" messaging

Progressive Disclosure:

Show only essential information to reduce cognitive load

Real-time Updates:

Live technician tracking and ETA communication

Empathy Map: Emergency Roadside Scenario

The Moment: A 35-year-old marketing professional sits in her disabled car on the shoulder of a busy highway. Light rain taps against her windshield as evening rush hour traffic roars past at 70 mph. Her phone battery shows 15% and dropping. She needs to get home to her family, but first she needs to figure out how to get off this highway safely.

This empathy map captures the emotional, physical, and psychological reality of our primary user during their moment of greatest need - informing every design decision we made.

THINKS
  • • "How much will this cost me?"
  • • "Is this service provider legitimate?"
  • • "Will they actually show up quickly?"
  • • "Should I call my insurance instead?"
  • • "I need to text my family I'm safe"
  • • "My phone battery is dying"
FEELS
  • • Anxious about safety on busy highway
  • • Frustrated with the timing
  • • Vulnerable and exposed
  • • Worried about cost uncertainty
  • • Relief when finding clear solution
  • • Grateful for professional help
SEES
  • • Traffic rushing past at high speed
  • • Light rain making conditions worse
  • • Mobile website with clear pricing
  • • Professional certifications and reviews
  • • Simple booking interface
  • • Real-time technician tracking
SAYS & DOES
  • • Calls spouse: "I'm safe but need tire help"
  • • Searches "emergency tire service near me"
  • • Compares multiple service options quickly
  • • Books service through mobile app
  • • Shares location for technician tracking
  • • Posts positive review after service
CORE NEEDS & INSIGHTS
Primary Need: Safety and fast resolution with trusted provider
Key Insight: Clear communication reduces anxiety more than speed alone
Opportunity: Transform emergency stress into confidence through transparency

Key Research Discoveries

The Breakthrough Insight

"During our field observations, we discovered that customers made the decision to trust or abandon a service provider within the first 90 seconds of interaction. This insight fundamentally changed how we approached the entire booking experience."

User Interview Findings (n=47)
Mobile booking preference89%
Location verification critical94%
Pricing transparency needed91%

Qualitative insights from emergency service users across Dallas-Fort Worth metroplex

Usability Testing Results (n=24)
Task completion rate96%
Average completion time4.1min
Mobile preference92%

Task-based testing with simulated emergency scenarios

A/B Testing Impact
Conversion rate increase+34%
Booking abandonment reduction-41%
User satisfaction improvement+67%

Statistical significance achieved across all key metrics (p<0.05)

Research-Driven Design Principles
"90-Second Trust Window"
Critical first impression elements must be visible within initial viewport
"Stress-Responsive Interface"
Progressive disclosure adapts to user's emotional state during emergency
"Confidence Through Transparency"
Upfront pricing and location verification reduce decision anxiety

2. Design System Development

Visual Design Principles

Color Strategy

Minimal, high-contrast palette designed for emergency stress reduction

Primary
Secondary
Light Grey
Dark Grey
Typography
Inter Font Family
Medium Weight for Buttons
Regular for Body Text
Small for Supporting Info

Component Architecture

Button System

44px minimum touch targets for accessibility

Service Card Pattern
Emergency Service

Hover for interaction

Key Design Decisions

User Experience Strategy
  • Progressive Disclosure: Show only essential information to reduce cognitive load during emergencies
  • Consistent Interactions: Standardized hover states and transitions for predictability
  • Mobile-First Design: Touch-friendly 44px targets and thumb-reachable navigation
Technical Considerations
  • Performance: Optimized for under 2.5s load times during high-stress situations
  • Accessibility: WCAG 2.1 AA compliance with screen reader optimization
  • Responsive Design: Fluid layouts across 320px to 1920px viewports

3. Multi-Step Booking Flow (9 Steps)

1

Service Selection

Emergency roadside, tire installation, battery services

2

Vehicle Information

Year, make, model dropdowns, tire specifications

3

Location Verification

GPS geolocation, Google Maps autocomplete

4

Contact Details

Name, phone, email validation

5

Schedule Selection

ASAP emergency or scheduled appointments

6

Service Review

Itemized pricing, terms and conditions

7

Email Verification

Account creation, verification code system

8

Payment Processing

Stripe integration, multiple payment methods

9

Confirmation

Booking confirmation, technician details

4. Technical Implementation

Technical Stack

Frontend: React/Next.js with TypeScript
Styling: Tailwind CSS with custom design system
Animations: GSAP + Framer Motion
Maps: Google Maps JavaScript API
Payments: Stripe API with React integration
Analytics: Google Analytics 4 + custom tracking

Performance Optimization

LCP Target: <2.5 seconds
FID Target: <100ms
CLS Target: <0.1
Mobile PageSpeed: >90
Accessibility: WCAG 2.1 AA compliance
Security: PCI DSS Level 1 compliance
RESULTS

Quantitative Outcomes & Impact

89%+
Booking Completion Rate
vs. 85% goal
14%+
Mobile Conversion Rate
vs. 12% goal
<4.5min
Average Booking Time
vs. 6min goal
99%+
Payment Success Rate
vs. 98% goal

Business Impact Achieved

Online bookings increase+47%
Customer service calls reduction-34%
Average order value increase+28%
Customer retention improvement+41%

Technical Achievements

Zero security incidents with payment processing
100% uptime during critical service periods
A+ rating on security and performance testing
100% WCAG 2.1 AA compliance achieved
PCI DSS Level 1 compliance maintained

User Experience Improvements

Qualitative Feedback

"The easiest way to book emergency service I've ever used"
"Finally, a service that understands what information they need"
"The real-time location verification gave me confidence"

Key Improvements

  • • Reduced stress during emergency booking process
  • • Increased confidence through transparent pricing
  • • Enhanced trust via location verification features
  • • Improved satisfaction with mobile-optimized experience

Implementation Timeline

1

Core Platform

Weeks 1-4
  • • Basic booking flow implementation
  • • Payment processing integration
  • • Location services setup
  • • Responsive design foundation
2

Enhanced UX

Weeks 5-6
  • • Advanced animations and micro-interactions
  • • Performance optimization
  • • Accessibility enhancements
  • • Error handling improvements
3

Analytics & Optimization

Weeks 7-8
  • • Conversion tracking implementation
  • • A/B testing framework setup
  • • Performance monitoring
  • • User feedback collection system