Online Service Scheduler

Role: Product Design Lead, UX Research

Organization: Dealer-FX (Automotive)
Business Type: B2B/B2C

Customers: MOPAR, Stellantis, Hyundai, Honda, Toyota, Volkswagen

Tools: Figma, Miro

Overview

Navigating the challenge was tricky as there was no opportunity for a back-end reconstruction, compelling us to innovate within the current framework while refreshing the front-end. Additionally, we needed to develop a responsive design capable of adapting seamlessly to various screen sizes.

Problem Statement

The current online appointment booking system was confusing and lacked user-friendly UI, leading to customer frustration and a loss of dealerships for Dealer-FX.

Goal

Design a more intuitive scheduler to boost sales, adoption, and customer retention by minimum 10%.

What We Achieved

Dealer-FX achieved a 40% increase in online service scheduling for their customers
Their clients experienced a 20% lift in dollars per Repair Order.
They successfully secured multiple contracts with various OEMs across both Canada and the United States.
Sample links to try the app live:
https://www.chryslerworld.com/online-service-scheduler/
https://www.colonialtoyotact.com/service/schedule-service/

Research

The project's success was crucial for the organization, given their customer loss and desire to outshine competitors. We initiated the project by conducting extensive research to thoroughly grasp the underlying problem before delving into solutions.

We conducted comprehensive qualitative and quantitative research, engaging with 10 dealership experts to gain insights from their firsthand experiences with customers, thereby understanding their pain points and objectives more intimately.

Below are the research methods we employed:

User interviews
We conducted one-on-one interviews with selected dealership experts to gather insights into their experiences, preferences, and pain points.
Surveys
We distributed surveys to a large group of users to collect quantitative data on their demographics, behaviors, and opinions.
Contextual inquiry
We observed 10 users to understand how they use the current products in real-life situations.
Heuristic evaluation
We evaluated the product regarding accessibility, usability, robustness, and perceivability to identify potential issues.
Persona development
We created representations of target users based on our user interviews, and research data to inform design decisions and ensure a user-centered approach.
Customer journey mapping
We visualized the end-to-end user experience to identify touchpoints, pain points, and opportunities for improvement through the user journey.

The Strategic Importance of the Login Page

The login page serves as the initial point of entry for users, facilitating secure access to platforms and services while safeguarding sensitive information. Its design and functionality significantly impact user experience, shaping perceptions of usability, security, and trustworthiness. When designing the login page for this online scheduler, we took into account several key factors to ensure an optimal user experience.

Simplicity
We kept the design clean and focused, ensuring the process was easy to navigate and straightforward to use. We avoided cluttered and unnecessary elements that could distract users from the login process.
Visual clarity and hierarchy
We utilized visual cues such as color, size, and placement to draw attention to the login form and guided users through the process. We also ensured that the login button was prominent and distinguishable from other elements on the screen.
Security measures
We implemented security features such as SSL encryption and password strength indicators to protect user credentials and prevent unauthorized access.
Error handling
We provided clear and helpful error messages when users entered incorrect credentials or encountered other issues during the login process. We made sure to guide them on how to resolve the error without frustration.
Accessibility
We ensured the login page was accessible to users with disabilities by providing alternative text for images, using proper markup, and allowing keyboard navigation.
Social login option
We considered offering social login options (e.g., "Sign in with Google") to provide users with a convenient alternative to traditional email/password authentication.
Responsiveness
We designed a specific login page for desktop, tablet, and mobile devices with form fields and buttons sized appropriately for touchscreen interactions.

Nobody Likes Waiting

Long waits for a screen to load without any indication of progress can be frustrating for users. Loading messages are very important as they provide feedback to users, letting them know that the website or application is actively working on their request. This feedback helps manage user expectations, reduces frustration, and improves perceived performance, as users are more likely to wait patiently when they understand that progress is being made. Additionally, loading messages can reassure users that the system has not frozen or encountered an error, promoting trust and confidence in the platform.

Building Connections Beyond the Screen

In our quest to create a standout digital product, we discovered a critical element: language. Through interviews, we learned that many immigrants abandon apps due to language complexity. Hence, our paramount goal in designing this application was crafting user-friendly copy accessible to all, regardless of English proficiency.

In all screens of this application, we included a descriptive text below the screen title to help users understand what to do next and the purpose of each screen.

Flexible Vehicle Search

Through user research, we discovered that dealership customers preferred two methods for searching their vehicles: by VIN or by year, make, and model. Consequently, we created two tabs for this purpose and provided guidance to users. For instance, in the VIN tab, we included a link to assist users in locating their car's VIN. Additionally, for existing customers who logged in, we displayed all their vehicles in the dealership system, enabling them to choose from their list.

Health Check

The health check screen was a new step we added to the process based on our research and after launching the app we received many positive feedback from the users as it provided them with valuable information about the condition of their vehicle. This transparency built trust and confidence in the dealership, as customers could see exactly what maintenance or repairs may have been needed. Additionally, it allowed customers to make informed decisions about their vehicle's care and prioritize any necessary repairs or maintenance tasks.

Service Selection

One of the most challenging aspects of this app was the services screen. Throughout our research, we encountered numerous instances of negative feedback regarding the language used, which was deemed overly technical and difficult for users to comprehend. Crafting the copy for this screen involved over 10 iterations before reaching a final decision, and during usability testing, the last version was approved by 70% of users.

Transportation & Time Selection

Selecting transportation and time is a crucial part of booking an online car service because it ensures a smooth and efficient process for both the customer and the service provider. Specifying the transportation type allows the service provider to prepare adequately for the appointment, ensuring they have the necessary equipment and resources available. Additionally, choosing the appointment time helps in scheduling and managing resources effectively, minimizing wait times for customers, and optimizing the service provider's workflow. Overall, this step enhances the customer experience by providing convenience, reducing uncertainty, and ensuring timely service delivery.

At the top of this screen, we prominently displayed the most important data about the selected vehicle, ensuring users booked appointments for the correct car. The appointment time was determined by the selected service advisor, a key factor we visually highlighted within the UI's hierarchy to maintain process clarity.

Review & Confirm the Appointment

The appointment summary screen featured crucial information about the vehicle, service advisor, selected services, transportation type, contact details, contact options, and privacy statement. By incorporating these elements, we ensured that users could thoroughly review all details before confirming the appointment, resulting in a smoother and more satisfactory booking process.

Payment Screen

The payment screen featured a simple design, with the estimated cost of services displayed prominently at the top. To enhance user experience, we prioritized displaying free services first in the list, followed by the remaining services in non-technical language for better comprehension. Users who had added comments in the services screen were given the opportunity to review them once more on this screen and make edits if necessary. Additionally, services could be deleted directly from this screen, saving users valuable time.

Outcome

The design of this online car service appointment application played a pivotal role in shaping the overall user experience and optimizing operational efficiency. By prioritizing user-friendly interfaces, intuitive navigation, and transparent communication of appointment details, we streamlined the booking process and enhanced customer satisfaction. Furthermore, incorporating features such as vehicle selection, service customization, and payment flexibility catered to diverse user needs while fostering trust and loyalty. Ultimately, through thoughtful design and continuous refinement, this online car service appointment scheduler revolutionized the way customers interacted with automotive service providers, paving the way for seamless, convenient, and reliable service experiences.