Open site navigation

Through the new website, clients can easily book a detail type, a specific detailer, and time and day in seconds. Bookings where 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 Probelm

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 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 work load 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 work flow. 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 fo detail, vehicle type, add-on services, date and time, detailer and location of vehicle to be detailed.

 

The flow of the custom booking section I came up with went as follows:

Step 1: 

The client selects detail package out of three options. After a choice is made, a pop-up modal ask for size and type of vehicle as well as, add-on upgrade paid services.

Step 2:

The client is given an option to select specific detailer. Each detailer has their 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 detailers google calendar and populates onto a master calendar for the client to select from. Each detailer has their own google calendar attached to the master calendar which allows them to set their own 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 available time and day.

Step 4 (payment):

Client enters 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 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 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 in the website I made several design nods to the city, some obvious like, a picture of the capital building and a blurb about how TDP is Sac Town proud. I also added a less obvious "S" border design with text an 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 to luxury interior of certain high end cars.

Nick was very insistant in making the site seem tech forward. I used a lot of cards to highlight key information and also to guide to 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 the migrated through out 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 customers place of residence or work.