AutoClearProtect
EMPOWERING CUSTOMERS TO PROTECT THEIR AUTO INVESTMENT
Role
UX Designer
Timeline
January 2023 - April 2023
Skills
UX Design
Marketing / Branding
Information Architecture
Tools
Duda CMS
Adobe Creative Cloud
Figma
MidJourney
AutoClearProtect (ACP) is a mobile automotive service provider in the Greater Phoenix, AZ area. They were operating through a dysfunctional web booking system.
Resulting Impact
I collaborated with stakeholder and chief engineer, Blake, to relaunch their digital presence and optimize their appointment settings. AutoClearProtect needed to serve not just as a service provider, but an informational hub for clients to have all their questions about vehicle protection answered.
75% Increase in Monthly Bookings
Increase in 50% of monthly traffic
Market Research
What are the common design trends for the automotive service industry?
Large Hero Images
High-Quality Vehicles Shown
Demonstration of High-Value
Service Images of Technicians
Ample use of White Space
Sans Serif Fonts (Modern)
Modern/Futurist Design Aesthetic
like Porsche, Tesla, BMW
Simple Color Palette
Header CTA
ACP’s users were mostly upper-middle class clients who drove vehicles such as Teslas, BMWs, and Range Rovers. Following the insights from competitive research, ACP’s branding needed to feel modern, state-of-the-art, clean, professional, and tangibly expensive.
User Persona
ACP’s clients are typically upper-middle class working professionals in the Phoenix area that prioritize convenience and quality. They see their vehicles as an investment and expression of their ethos, and put a high-value on ensuring their quality.
UI Choices
Value convenience
Busy schedules
Understand automotive value
Well-informed
Don’t mind paying more for quality
Tech-conscious
Associate with brands like Tesla, BMW, Range Rover, Porsche, Lexus
Project Challenges
Content Management System
The client had created their initial website using the Duda CMS. As a result, they wanted to stick to that CMS so they could maintain the website and make their own changes in the future. This presented some challenges. Duda has a lot of capabilities but it is also fairly clunky, limited in UI capabilities, and required me to learn a new CMS during this project. Duda worked out well, but in an ideal scenario I would have opted for a different CMS. I had some Figma designs that I believed would have been beneficial but couldn’t be directly translated to Duda, but that is all part of the typical design process.
Client Relationship
The client, Blake, was tech-savvy and a software engineer, which helped the process move forward quickly, but also led to outcome disparities between us. He had his own ideas of what he believed to be the correct design methodology and those conflicted with my opinions in certain circumstances. We worked well together, but in the end I had to deliver what the client wanted, which is never what we as designers envision. From my initial designs, Blake made adjustments and we iterated back and forth until we came to something he was happy with. Since my departure, Blake has continued to adapt the site to his needs using the design motifs I established.
ACP Before Redesign
Initial Figma Designs
Vehicle Hero Image
Modern Color Palette
Inspired by BMW & Tesla
Refined Navigation System
CTA in header
Simple Tagline
Explains primary services and what makes ACP unique (mobile services)
Clear Call-To-Action with Primary Color
Service Highlights
Secondary CTA
Technician Photos
Testimonial Reviews
FAQ Section
Increase buyer confidence
Informs users
Optimized Footer
Social links
Contact information
Hours of operation
Repeated primary CTA above footer for quick user access
MidJourney generated automotive pixel-art
Visual Slider
Demonstrates product/service
Easy to use
Less image waste
Redesigned Content Blocks
Easy to to read
Primary & secondary CTA
Visual representation of product/services
Additional Service Pages
Our client previously had only been offering Paint Protection Film (PPF) installation on their website, but they also offered traditional detailing services and wanted to begin offering Ceramic Coating.
Service Oriented Copywriting
Visually Distinct CTA
Product Images Target User Persona
Range Rover, Tesla
Short High-Quality Video
Demonstrates service and quality of care
Service Highlights
Utilize same FAQ design pattern to deliver valuable information
Optimized headers with expandable information
Product/Service Slider
Slide cycles between Automotive, Motorcycle, Boat, RV
Shows diversity of product uses
Service Package Redesign
Organized ACP’s ceramic coating into three packages based on ceramic coating level
Used Gold/Diamond/Platinum names to emphasis high-quality service
Purposefully didn’t use Bronze/Silver/Gold, to help users know that all ACP’s services are exceptional
Client Feedback & Revisions
Showcasing the initial redesigns to Blake, he was thrilled, we then worked together to incorporate some of his design ideas into the final product. Through feedback with him, and translating Figma concepts to Duda CMS, design changes had to be made.
Landing Page
Header changed to include partnerships drop down
Social proof to client
Changed header CTA to phone number
Removed orange primary CTA color
Removed CTA on landing page
Designed hero image slider to showcases multiple vehicles
Tesla, Land Rover, BMW, etc…
Hero video showcasing services and product highlights
Detailing Services Page
Mission Statement
Service Highlights
Delivered
Trusted
Guaranteed
Quality
Ceramic Coating Page
Implemented image slider
Demonstrates step-by-step process of how ceramic coating is applied
Informs users in easy-to-use format
Visual information
Footer
Removed pixel-art super-footer banner
Implemented community social media content block
Demonstrates real ACP clients and service images
Encourages community engagement
