UX/UI DESIGN

How to reduce customer service support requests related to car maintenance bookings?

COMPANY

Beely

ROLE

UX/UI Designer

EXPERTISE

UX/UI Design

YEAR

2024

Project description

Our client, Beely, aimed to reduce customer service support requests related to car maintenance bookings by improving the clarity and usability of their digital platform. This project was part of the Metropolia Notio Design production.

Team

Project manager
Two UX/UI Designers (Including me)

Background

Beely is a car subscription service where users pay a fixed monthly fee, covering maintenance and other services. However, as a relatively new service, many customers had questions about how it works—especially regarding maintenance bookings.

The goal was to streamline the digital experience, reducing the need for direct customer service interactions regarding maintenance bookings.

User problems

Unfamiliar Service Concept

The new service concept was unfamiliar to users, and several test participants struggled to fully understand what Beely offers and how it works.

Low Visibility of Key Actions

On the "Services" page, the Book a service or repair button was easily overlooked. In user testing, only 2 out of 5 users were able to locate the booking option without assistance.

My role

As a UX/UI designer, my responsibilities included:

Conducting a heuristic evaluation to identify usability issues on the existing site.
Planning, conducting, and analyzing user tests; I documented observations and comments, then summarized key usability insights.
Planning and facilitating design workshops for our team to clarify and move forward in the design process.
Ideating easily implementable solutions with the team based on findings.
Designing the new services page structure and interface grounded in user research and business goals.

Process

I redesigned the service page based on user testing, heuristic evaluation, and stakeholder materials. I facilitated an workshop to identify high-impact, low-effort improvements, which I then prototyped to enhance usability and service discoverability on services page.

Research & Analysis

I started by reviewing background materials provided by the client, including existing user journeys and personas. Since the site structure seemed complex, I suggested creating an information architecture (IA) map to clarify the overall layout. I contributed to the design of the IA map and participated in a heuristic evaluation to identify usability issues. These methods helped us gain a deeper understanding of the site’s structure and revealed key usability challenges that needed to be addressed.

User Testing & Insights

At this point, I felt we had gathered enough background information and it was time to validate our assumptions through usability testing. I collaborated with the team to design the test and was responsible for synthesizing the key findings from the test sessions. We then conducted user testing with five participants from the target group which provided valuable insights into how users search for car maintenance services—and how the current structure could be improved to support a more intuitive experience.

During user testing only 2 out of 5 users completed the task independently. User testing also revealed that 4 out of 5 participants looked for car maintenance booking in the footer, but only 2 were able to locate the link—and only 1 successfully completed the task.

Workshops & Ideation

To move from insights to action, I proposed, planned and facilitated a workshop for our team. In this workshop we mapped ideas on a 2x2 matrix (impact vs. effort) to identify high-value, low-effort solutions.

Based on this prioritization, we moved into the design phase, creating clear and effective UI solutions aimed at improving service discoverability—making it easier for users to navigate and take action, while keeping implementation effort minimal for the business. I focused on redesigning the service page while others redesigned the homepage.

2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.
2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.
2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.
2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.

2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.
2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.
2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.
2x2 matrix
I proposed, planned and facilitated a workshop where we brainstormed ideas based on findings from user testing, heuristic evaluation, and background research. I guided the team through clustering the ideas by theme and prioritizing them using a 2x2 matrix based on implementation effort and user/business value.
This method helped the team prioritize impactful and feasible solutions, ensuring we could deliver meaningful improvements without requiring major changes to the existing service.
ia map
IA map I suggested helped the team better understand the complex site structure and revealed unnecessary pages the client wasn’t even aware of.
user testing
User testing provided valuable insights into how users navigate the website and where they expect to find help when booking car maintenance services. We conducted tests with 5 participants from the target customer group, each using their own smartphone during the sessions to ensure a realistic and natural user experience. Only 2 out of 5 users were able to complete the task independently.

Solutions

Our design solutions focused on improving the usability of maintenance booking with minimal effort. By identifying and addressing key friction points in the booking flow, I aimed to help users complete their tasks more independently while reducing the need for customer support.

Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.
Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.
Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.
Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.

Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
Both heuristic evaluation and user testing revealed that the existing button on the services page was easily overlooked due to its subtle appearance. We redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.
Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
Both heuristic evaluation and user testing revealed that the existing button on the services page was easily overlooked due to its subtle appearance. We redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.
Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
Both heuristic evaluation and user testing revealed that the existing button on the services page was easily overlooked due to its subtle appearance. We redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.
Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
Both heuristic evaluation and user testing revealed that the existing button on the services page was easily overlooked due to its subtle appearance. We redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.

before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: clear Hero Section
The hero section was simplified to clearly communicate Beely’s core value proposition. Our goal was to ensure users immediately understand what the service offers and why it matters—without distraction.
before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: clear Hero Section
The hero section was simplified to clearly communicate Beely’s core value proposition. Our goal was to ensure users immediately understand what the service offers and why it matters—without distraction.
before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: clear Hero Section
The hero section was simplified to clearly communicate Beely’s core value proposition. Our goal was to ensure users immediately understand what the service offers and why it matters—without distraction.
before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: clear Hero Section
The hero section was simplified to clearly communicate Beely’s core value proposition. Our goal was to ensure users immediately understand what the service offers and why it matters—without distraction.

Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.
Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.
Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.
Before: Booking path was unclear and inefficient
User testing revealed that 4 out of 5 participants looked for car maintenance and repair booking in the footer, but only two were able to locate the link—and only one successfully completed the task. The reason: the footer link directed users to the services page, requiring them to independently find the actual booking link from there.
After: Quick access to service booking
User testing revealed that 4 out of 5 participants looked for car service booking in the footer. Based on this insight, we added a clearly visible shortcut to the footer to improve discoverability and streamline the user journey.

Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
The existing button on the services page was easily overlooked due to its subtle appearance. I redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.
Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
The existing button on the services page was easily overlooked due to its subtle appearance. I redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.
Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
The existing button on the services page was easily overlooked due to its subtle appearance. I redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.
Before: The button was hard to notice and often overlooked
Both heuristic evaluation and user testing revealed that the existing button was easily overlooked due to its subtle appearance. In fact, 2 out of 4 participants missed the button on the services page entirely.
after: Easier for users to notice and take action
The existing button on the services page was easily overlooked due to its subtle appearance. I redesigned it to be more visually prominent and intuitive, ensuring users can quickly notice and access the booking feature without confusion.

before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: Clear Hero Section
Since the service was new to consumers, I suggested listing all of the service's USPs in the hero section of the home page. This way the hero section was simplified to clearly communicate Beely’s core value proposition. My goal was to ensure users immediately understand what the service offers and why it matters—without distraction.
before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: Clear Hero Section
Since the service was new to consumers, I suggested listing all of the service's USPs in the hero section of the home page. This way the hero section was simplified to clearly communicate Beely’s core value proposition. My goal was to ensure users immediately understand what the service offers and why it matters—without distraction.
before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: Clear Hero Section
Since the service was new to consumers, I suggested listing all of the service's USPs in the hero section of the home page. This way the hero section was simplified to clearly communicate Beely’s core value proposition. My goal was to ensure users immediately understand what the service offers and why it matters—without distraction.
before: Vague value proposition and layout confusion
The hero section did not clearly communicate what Beely is or how it differs from traditional car leasing services. Users were unsure why they should choose Beely. Additionally, two competing call-to-action buttons created confusion about the next step.
After: Clear Hero Section
Since the service was new to consumers, I suggested listing all of the service's USPs in the hero section of the home page. This way the hero section was simplified to clearly communicate Beely’s core value proposition. My goal was to ensure users immediately understand what the service offers and why it matters—without distraction.

Takeaways

By improving clarity in navigation and simplifying the hero section, users will better understand Beely’s offering and navigate the site more confidently. These changes are expected to reduce cognitive load and help more users complete maintenance bookings independently—ultimately decreasing the need for customer support.

Customer feedback

”Projekti Notion kanssa oli todella onnistunut ja tuotti Beelylle erinomaista insightia asiakas- ja käyttäjäkokemuksen parantamiseksi. Olin myös erittäin tyytyväinen siihen, miten konkreettisen ja ammattimaisen esityspaketin tiimi sai kasaan varsin lyhyessä ajassa ja rajallisin taustatiedoin.”