As it turns out, there are quite a few pain points each shop experiences. While many shops uses social media to attract customers, the core of most of the pain points point to the fact that they never truly adopted a digital workflow: inspection forms and waivers are still paper-based, customer communications are loosely managed and largely through phone, and repetitive tasks are done manually again and again.

The main reason is that auto servicing businesses has its own unique workflow. Off-the-shelf SaaS designed for sales, retail or product development simply don’t add enough value for the shops to adopt.

Knowing both product design and the automotive industry, I started breaking down each part of the operation of different types of auto servicing businesses. I sat through hours of YouTube videos on how to run a repair shop and took notes through a product designer lens to reimagine how these processes can be improved with readily available technologies. Read my notes here ➞

Current jobs & upcoming drop-off

Current jobs is the home view Motorvate. It shows all cars that are currently in the shop, whether they are in queue to be serviced, currently being serviced, or completed and waiting to be picked up. An accurate visualization for each car is automatically generated from the VIN number that was scanned when the car first enters the shop.

Upcoming drop-off shows all scheduled drop-off and allows staff to quickly onboard a customer with all the information pre-filled. Inquiries show all instances when a customer inquires about an service but did not go through with scheduling an appointment.

I particularly focused on organization and hierarchy. The strategic use of negative space and z-axis allowed functionalities to be directly accessible without feeling cramped or overwhelmed. Additionally, I paid a lot of attention to affordance and mistake-proof design.

Pop-up job status component allows shop to quickly update the status of the car without interrupting the flow, where customers will receive an automatic text update. The pop-up also only allows changing to adjacent statuses (e.g. you can only change from in queue to in progress, not completed or picked up), to further prevent confusion and mistake.

New inquiry & drop-off

While inquiry and drop-off are known terms within the automotive servicing industry, they are the sales equivalent of a lead and a scheduled appointment.

As quick actions buttons, new inquiry and drop-off are always accessible and at the same position on any screen. I also gave each section a distinctive color to prevent placing the wrong task. All these usability safeguards in place not only guide first-time user gently, but also greatly reduce cognitive load and the amount of learning needed.

During my shadowing, I noticed asking for a job (inquiry) and scheduling for that job (new drop-off) are often but not always in one process, hence I designed them to be separate but contiguous sections. The shop can easily text customers a web form while on the phone so intricate information doesn’t have to be verbally communicated. The deposit payment can be done through the same process. Clear indication of section completion and current status allows shops to see exactly what’s going on.

Start onboard

Start onboard is the core of the Motorvate experience. This is the workflow for when a customer arrives at the business and drop their vehicle off. Currently, not only customers have to fill out at least three forms, but the forms themselves are long and additional communication is often needed to fill them out. During a particular busy morning this could mean lines and delays, and worst of all, a terrible experience.

Motorvate allows a seamless onboard experience that fully integrates scheduled appointments to prefill information and leverages customer’s own phone to sign forms and waivers. Motorvate also uses the on-device camera to document vehicle condition and to scan VIN number of customer’s vehicle which automatically generates most necessary information. The increase in throughput allows shops to scale easily and quickly without needing to hire additional non-technical staff.

Job details & chat

Motorvate combines job detail and communication page in one unified view to allow shops to easily see everything that’s going on with a job when communicating with customers.

By adhering to the design system, and strategic and constrained use of font sizes, weight and colors, the design enables a high level of predictability and organization even without the visible grid, which further removes visual clutter. UI elements of the same function always appear and behave the same across the entire app, and the job status picker is no exception here with the same applies to send link button.

One of the challenges is to give the shops a high degree of customizability without hurting the simplicity of the experience. I designed custom information fields for any unanticipated additional job details, as well as expandable smart chat components that are organized in “chips” that shops can enable and disable as they go.

Many details are carefully thought out. For example, the vehicle details section is independently scrollable from the chat section to accomodate for additional custom fields while being highly responsive for mobile adoption. “Add information type” and “Add information detail” mirror the text size and weight of the already inputted information above, so the user knows exactly what goes where. The chat view shows and labels both automated and manual messages to give shops a centralized place for all communications with a given customers.

Automated messaging

Automated messaging is the foundation of many Motorvate’s features. Although Motorvate automatically generates customized automated messaging templates and presets based on shop and service types, many shops expressed how important it is for them to have full control over communication with customers and fine tune it so that it works for their individual needs.

Instead of fighting to simplify what’s clearly a pro feature, I focused on visibility and structural consistency: all settings, toggles and parameters should be at the right place and logically laid out so people know exactly where everything is. Design wise many components are shared with the sign up experience, as both functionally and logically both are a part of setting up a shop’s work environment, and as previously mentioned “UI elements of the same function always appear and behave the same across the entire app.” This decision also allowed cost savings in front end development.

I made a strategic decision to name Motorvate’s automated messaging rules either “reminder” or “updates” instead of other technical terms because reminders and updates are essentially what these automation rules do.

Creating a new document and staring at the blank page can be daunting; the same is very much true for creating automation rules. Internally, I call Motorvate’s automated messaging “recipes.” Like recipes which people use as a base to add their own flare upon rather than stringent rules to follow, I designed Motorvate’s automated messaging settings to be template-based, but fully customizable so that shops can learn as they change out each template to fit their exact needs.