Mobile Auto Service Website
Client: Honest D.E. Auto
My Role: UX/UI Designer
Timeline: 12 weeks
Overview
Honest D.E. Auto is a mobile auto service startup that comes to customers' locations to provide reliable, honest car maintenance and repairs.
The Challenge
Honest D.E. Auto lacks an online presence and needs a website to promote their services and allow customers to book appointments.
The Solution
Create a website and cohesive brand identity that reflects their mission and makes booking services easy.
Stakeholder Interview
I met with Honest D.E. Auto's two founders to understand their business goals and target audience. The key takeaways were:
-
Mission: built on honesty and aims to empower customers through education and trust.
-
Website Goals: clear service info, pricing, online booking, and a payment portal.
-
Target Audience: women, elderly, and families looking for affordable, mobile auto care.
-
Success Metrics: building trust, providing accessible service, and growing their customer base.
Competitor Research
I researched 4 competitors to identify effective strategies and areas for improvement. My analysis focused on two key aspects: the user flow for booking services and the mobile mechanic marketing approaches.
How Might We?
-
How might we help customers easily schedule an appointment for their vehicle maintenance or repair?
-
How might we help Honest D.E. Auto expand their customer base?
User Persona
I defined the user persona based on insights from user research.
Sitemap
I created a sitemap to provide a clear navigation system for the website.
User Flow
I created a user flow for customers booking appointments, beginning with the common inquiry: "When can I get an oil change?"
Sketch
Here's a few sketches I completed for the initial design.
Wireframes
I created low-fidelity wireframes in Figma for all pages. Below are the pages for home, about, services and the third step of the appointment booking process.
Usability Testing
I conducted moderated user testing with 3 participants who each completed 4 tasks. I identified 2 key areas that required changes to enhance the user experience. Below are my findings with the before and after:
User Problem #1
Before: participants were concerned they'd be charged before the service was completed.
After: there's language that clarifies they won't be charged until after the service is completed.
User Problem #2
Before: users struggled to distinguish between maintenance and repairs.
After: services are now divided into maintenance and repairs to help users find what they need faster.
User Interface
Mockups
Based on user testing feedback, I refined the designs and implemented our design system to maintain consistency across all pages. Below are 4 of the 11 pages, shown in desktop, tablet, and mobile screen sizes:
Prototype
I created a high-fidelity prototype to provide a realistic experience for user testing.
Final Design
Impact
Stakeholders were enthusiastic about the design, highlighting its clarity, brand alignment, and streamlined booking experience.
Key outcomes:
-
User testing validated intuitive service booking flows that distinguish between maintenance and repairs
-
Mission-driven visual identity builds credibility and trust with target audiences including women, families, and older customers
-
Strategic content and clear CTAs drive high engagement and are expected to increase bookings