Through the new website, clients can easily book a detail type, a specific detailer, and time and day in seconds. Bookings were previously done over the phone and now the inefficiency of the website freed the owner from hours of calls.
I streamlined TDP's website & business to take online mobile detailing bookings through a custom reservation portal. With my help, TDP made auto detailing easy.
The Detail Pros (TDP) Sacramento Web Design & Custom Booking Section
The Problem
The owner Nick of TDP Sacramento was swamped with calls and detail reservations all day. Being a one-man operation of a ten-year successful mobile detailing business the flow of clients was too much for Nick to tackle. Nick had an idea to streamline his business through an online booking section. He would also contract out local rockstar detailers to help with the workload as well as give them clients business through his extensive network.
The Solution
After many conversations with Nick about his plans, I started to construct a reservation workflow. Nick was very insistent that the main goal of the website was:
1. To free himself from phones so he can fall into a more managerial role.
2. To promote rockstar detailers in the Sacramento area to share the wealth.
3. The site needed to be able to collect all the relevant and specific information such as type of detail, vehicle type, add-on services, date and time, detailer, and location of the vehicle to be detailed.
The flow of the custom booking section I came up with went as follows:
Step 1:
The client selects a detailed package out of three options. After a choice is made, a pop-up modal asks for the size and type of vehicle as well as, add-on upgrade paid services.
Step 2:
The client is given an option to select a specific detailer. Each detailer has its specialties and client ratings viewable. If the client does not want to choose a detailer, there is an option for "soonest available detailer" to select.
Step 3:
Depending on, or if a specific detailer is selected, a calendar with available dates will be presented to the potential client.
This calendar pulls from the detailer's google calendar and populates onto a master calendar for the client to select from. Each detailer has their google calendar attached to the master calendar which allows them to set their availability in real-time.
Nick, the owner has access to the master calendar to follow up on reservations and customize company days off etcetera.
The potential client then selects the available time and day.
Step 4 (payment):
A client enters the vehicle address and payment information. During this step, there is also an option for an image of the vehicle to be detailed to be uploaded well as confirmation and the ability to edit previous steps.
Step 5 (email confirmation):
Client selected detailer and Nick the owner receive a confirmation email of the upcoming new mobile detail job. The client has the option to edit the reservation via this email. If an edit is made, the detailer and Nick are notified.
The Design
For the design, I wanted to bring a sense of Sacramento pride. The owner, Nick was a huge fan of the city and community. He's a season ticket owner for the Sacramento Kings, he's a member of numerous business networking groups, and is even a volleyball coach for a local school in the area. In a nutshell, Nick loves Sac-Town.
To bring Nick's pride out on the website I made several design nods to the city, some obvious like a picture of the capitol building and a blurb about how TDP is Sac-Town proud. I also added a less obvious "S" border design with text and images within it.
TDP's previous website had a mostly white background to keep it clean (hence clean cars 😉), for the redesign I added a beige background to give the site a little color that fit within the black and red primary colors. The beige is representative of the luxury interior of certain high-end cars.
Nick was very insistent on making the site seem tech-forward. I used a lot of cards to highlight key information and also to guide the booking process. I wanted to create behavior patterns for the users. Everything was very similar on each page to give the user a sense of understanding as they migrated throughout the page.
I used a lot of curves in masking and backgrounds as well as a rotated "water drop" behind each mockup of TDP's van. This "water drop" also represents a location mark on maps as the detailer will be driving to the customer's place of residence or work.