Book an Appointment
📆

Book an Appointment

"The Book an Appointment feature enables SEAT and CUPRA customers to schedule maintenance and repair services easily and efficiently directly from the website.”

image

Summary

SEAT and CUPRA had no digital functionality that allowed users to schedule workshop appointments, forcing them to make phone calls to schedule services. This process was inefficient and inconvenient for users. The objective of the project was to create a digital solution that would simplify this process, improving the user experience and optimizing service management by the workshops.

Duration

6 - 9 months

Role

Product Designer

Tools

Figma, Zepplin, Adobe Photoshop

Team

SEAT Web and Private Area

Challenge

It was necessary to design an intuitive experience that would reduce friction in the process, ensuring that users could complete the flow without errors. The decision to undertake this project came from identifying an opportunity to not only digitize the process, but to achieve these objectives:

1. Increase user retention

2. Faster response time

💪🏼
How to make it easy for users to schedule workshop appointments quickly and easily?

Design Process

Research Process:

  • Goal: Understand user needs and analyze competition.
  • Key actions:
    • Utilized insights provided by Strategy team, based on data, adopting user-centric methodologies.
    • Analyze similar solutions in the automotive market. I studied their information architecture, user paths, UX approaches and visual styles. This allowed me to avoid mistakes and adopt best practices for this functionality.
image

Ideation:

  • Initial proposal: create a flow based on an existing “Find a Dealer” component ensuring consistency across the digital ecosystem.
  • First iteration: Linear flow with clear steps:
    1. Selection of services.
    2. Choice of date and time.
    3. Confirmation of personal data.
image

Feedback received:

  • Extensive list of Services offered by the workshops.
  • Integrate MyCUPRA to provide a more personalized experience.
  • Structured and defined URL as an access point to the functionality on the web.

Problem solving:

Most users were looking to quickly schedule recurring services, such as oil changes or a technical overhaul. So simplify andavoid option overload: Lengthy lists create confusion, but simplified basic options work best. We also added an option for users to detail more services if they wanted to.

image
💡
More than 50% of service calls were to schedule basic services.

The flow for new and unregistered users needed to be clearly analyzed, as it depended too much on Private Area. It had to be well defined but at the same time interconnected with the entire digital ecosystem, in order to create synergies and offer users all the necessary information.

image

Business Goal:

To enhance the use of the Private Area, offering personalized services.

Feedback received:

  • Each step of the flow could have a different URL to facilitate navigation and allow the user to resume the process if interrupted. However, it slowed down the flow, disconnected user data and complicated navigation.

What Went Wrong and Lessons Learned

I collaborated with the development team to evaluate alternatives and we adopted a modular design approach that was better suited to the existing system. Initially, I didn't feel that using a modal might be the best option from a user interaction standpoint, especially in a flow that required a larger, more detailed view. After the intervention of other designers and developers, I understood that the modal, although it could generate certain problems in terms of usability, was necessary due to the architecture of the system.

Lesson Learned: It is always essential to consider all points of view and understand the technical limitations before making definitive recommendations.

☝🏼

Disadvantages of using a modal

  1. Navigation limitation
  2. Usability issues on mobile devices
  3. Accessibility
  4. Cannot be easily indexed
  5. Lack of persistence

Solution

Identify your Vehicle

  • Users can enter their license plate or select the model and year for personalized services.
  • Personalization: Tailoring services based on vehicle identification enhances relevance.
  • Flexibility: Offering multiple identification methods lowers barriers for users with varying levels of vehicle knowledge.
  • Simplicity: Logically grouped fields prevent information overload.

Objective: Simplify access to specific services based on vehicle models, improving user experience and internal workflows.

image
image

Selección de Servicios y Servicios adicionales

image
  • Clear basic options with the ability to add specific details.
  • Cognitive Load Reduction: Categorizing services clearly with a limited list of options prevents user overwhelm.
  • Additional Flexibility: A comments field allows users to specify unique needs not covered by standard options.
  • Visual Consistency: Checkboxes enable straightforward multi-option selection.

Objective: Provide users with clear control over needed services while maintaining simplicity.

Date and Time Selection

image
  • Intuitive calendar with dynamic time slots.
  • Clear Visualization: The calendar displays available dates, enabling quick selection.
  • Time Slot Grouping: Grouping into blocks like "morning" and "afternoon" simplifies the process.
  • Error Minimization: Limiting choices to real-time availability reduces frustration.

Objective: Save users time and ensure a smooth booking experience.

Contact Confirmation and Reservation

  • Verification of entered information with a clear summary before finalizing.
  • Real-Time Summary: A dynamic summary ensures users confirm correct details.
  • Logical Order: Personal details like name, phone, and email are organized intuitively.
  • Privacy Compliance: Visibility of privacy policies builds trust and ensures regulatory compliance (e.g., GDPR).
  • Positive Reinforcement: A "Thank You!" message boosts user satisfaction.

Objective: Conclude the process with clarity, leaving users confident and satisfied.

image
image

The “Book an appointment” screens were perfectly adapted to different screen sizes, ensuring a consistent and user-friendly experience across all devices.

  • Desktop XL and L. For the German market in the viewport L, it was necessary to increase the width of the container.
  • Tablet M
  • Mobile S

This adaptive design ensures that users can review and manage their appointments with ease, whether they are using a desktop computer, tablet or smartphone.

image

Usability Testing

  • Tests were conducted with17 users, who successfully completed the proposed tasks.
  • Errors such as incomplete data or invalid selections were identified and fixed with clear tooltips.

Testimonials

“I can now schedule my services in minutes, no calls needed.”
“The experience was very clear and gave me confidence in the process.”
image
✏️

Outcome: I designed a series of informative error messages using tooltips instead of modals to avoid confusing overlaps.

Impact

35%

increase in online appointments during the first 3 months

20%

more registered users used the Private Area to manage appointments.

47

countries where the design has been implemented on the website.

Lessons Learned and Future Improvements

If I were to work on this project again, I would take a more detailed approach to the initial usability testing. One of the biggest lessons I learned was the importance of including users early in the process to avoid assumptions.

🎓
  • The importance of balancing design convictions with the technical realities of the project.
  • Better communication with developers could have prevented some initial friction.
  • Greater emphasis on interdepartmental collaboration to align objectives from the outset.

Conclusion: Transforming the user experience

This project not only digitized a manual process, but significantly improved the user experience and aligned operations with SEAT and CUPRA's business objectives. It was a key learning on how to bring together design, technology and customer needs into a practical and efficient solution.