'Fit it for me' Booking - Eurocarparts

About Eurocarparts

Eurocarparts, one of the biggest UK distributor of car parts and accessories, with around 200 locations in Europe.

Aside their extended their existing delivery, click and collect services there si an ongoing need of a new “Buy and install” package service. Under a series of customer requests and competition analysis, they’ve decided to create “fit it to for me” business by offering fitting quotes price right from the shopping basket (mobile & web).

This service allows you to buy car parts online and then choose a local approved workshop to fit it. The online service allows you to choose from your closest car workshop or from the workshop labour prices to fit your selected part. After choosing the garage workshop and time, you will then only pay for the part you have ordered online.

The Goal

Create a journey for 'Fit it for me' service and seamless integration with the current basket

Make a seamless basket integration with the current experience, without changing the current flow and conversion

As other competitors created a different product, with a different name and platform, we aimed to have the flows piggybacking the current ecomm journey of the main website.

The concept gives an option to users to get their parts fitted directly from the basket page, up-sell the fitting price, option select and deselect parts while reviewing the total price, select the closest workshop to user's postcode and book a time slot.

Team Structure

We were pleasured to work really closely with the ECP team, they were so nice to come 2 days per week in Biglight’s offices and be with us across the lifespan of the project. This helped us shortne the feedback loop and get a good understanding of the tech and business needs.

Time

3 months

4 Client Workshops

1 User Testing Session

My Role

Research

Wireframing

Client Presentation

User Testing

Visual Design

Team:

UX/UI Designer (Me)

User Researcher

Project Manager

Brand Designer

Tools:

Sketch, Figma

Notion

Miro Board

Principle App

Roadmap

Define Audience & User Personas

Research & competitor analysis

Main User flow, validate with the tech team

Define the happy path (wireframes)

Tackle edge cases

Visual Design (via DS)

Process

Workshops

The first thing was to understand as much as possible the nature of the business. My aim was to absorb any bit of information, to try to put myself in each others shoes and see the different perspective and understand their goals.

So I lined up some of the key people from Eurocarparts: a business executive, their logistic director and head of product design. From our agency side, we grouped our main researcher, visual designer, project manager and client account manager.

Design

In order to speed up the whole process we decided to create unbranded grayscale wireframes in order to focus on the functionality while we tested the prototypes.

Prototyping

For prototyping I've used Principle, a tool that helped us to wire together the wireframes from Sketch. One unique feature in this software is that I could create all sort of complex interactions in the same screen. One good example is to show how the fitting price range adapted to the product selected in the basket (we will get to this example later)

User Testing

For testing, we used our onsite testing facility at Big light. We had ten car owners that tested two hypotheses. I've made two prototypes each with a couple of slight variations that we wanted to test.

Audience & User Personas

It was interesting to discover that there is a shift in the customer demographic of the car owners. This generation has more money on their hands but they are at the same time pretty time and price aware. They prefer to save money to buy a new gadget for example rather to willingly pay lot's of money on a service.

Car ownership model is changing at a different pace so a car is less and less desirable to actually own, this is affecting how much money customers would spend on fixing and fitting their cars.

Research

In order to kick-off the ideation process we had a look over competitors and other relevant companies, looking to identify trends and patterns.

We found lots of standalone services that paired customers to garage services, but none that start this journey directly from a basket place.

Things we liked:

A way to split the availability of basket items via the delivery or collection method — Argos

What you pay now vs later — Airbnb

Multiple checkout - Farmdrop

Booking a day over a timespan of 1-2 weeks - Specsavers

User flow

In order to start designing was to decide the step taken for every function in the plan. So started to sketch and ideal path and then validate it with the tech team in order to see the backend process for each step. Things like server queries, input requirements, timeout cases.

Findings

👀

People would like to know upfront if a certain part is eligible to be fitted. Extra points if we can upsell by providing a quote like “This part is eligible for Fit it for me from £59 at a nearby garage”

📍

Postcode Lookup Quotes can be generated only after we knew the postcode of the customer, as every region have different hourly rates. If we hadn’t had the location of an user in the system (from previous purchases) we had to create a postcode prompts before the prices are shown.

🚗

Vehicle Reg Check The salesforce database sometimes provided multiple VRN entries, as a household may have multiple cars, so we gave an option to select from an existing plate, or to type a new VRN number

🚖

Multiple VRMs We started with the premise we will support multiple vehicles like for example you want to fix two or three cars at once. While the complication of it sounded exciting for me and created a version where you would see the part compatibility versus your vehicles stored (called the garage), it turned out it was too much information for the user to get around and our typical user in 95% of the cases would only want to fit/repair only one car.

💳

At the moment of the Beta, ECP hadn’t supported online payments for the fitting price, so we had to test and find a good way to demarcate and signpost the price you’re paying Now vs Later at the garage

☎️

We tackled most of the edge case through design, considering the dev and system limitations. When really rare situation would appear, they were handles via customer support.

⏰

Due to the system limitations we’re unable to have hourly time slots, the only two options were Mornings and Afternoon, once a booking have been made, the exact hour would have been determined over a call or at the location. Update: After 6 month of beta, 2h slots were added to the system.

Default Path

Once we settled on a flow I started doing the wireframes focising on the ideal user, defining the required steps and how it can be implemented over their current checkout process.

FEATURES

Basket

In testing we've discovered the simplest approach is the best one. Even though we tried to avoid showing two consecutive call to actions, they tested far better than a selection option and a single CTA.

Key Points

Straight forward call to actions

Possibility to up-sell the fitting price by showing the estimate next to the CTA

Each item has a badge showing the delivery options

🏷️

Labels were more successfully understood by users rather than complex text messages, multiple CTA may look a bit heavy, but it balances better the options available

FEATURES

Postcode and VRM

We debated how to ask users for a postcode and vehicle registration from the start without creating an extra effort. Some items in the basket where bought with an VRM, some don't require a VRM and some are brought by their serial number.

In this case I created the 'Postcode and VRM Gate' in order to always verify before the next step pf the journey.

Key points

Less Options, clean design

One page

Potentially pre-populate the VRM field with the data from the basket

FEATURES

Review Page

One of the challenges was how to group items in basket, we tested a couple of options and we settled on avoiding the fitting name and just list the items, grouping them via pre-defined patterns.

Simplicity

Grouping items that are part of the same fitting

Clear price overview

FEATURES

Nice to have vs. compulsory add-on purchases [ In the list view at checkout ]

After we created an ideal flow we tried to tackle edge cases that were crucial to the business, as the interrelationships between components. I have learned that rarely you can change one particular part when servicing a car, some are compulsory while others are just an advisory and are nice to have.

Following is an example of the disk brake system on a car. Disk brakes need a set of regulatory rule because they are a vital part of the safety of the driver and others. As every brake wears out differently, it’s important to change all items at once and be always a set of new parts. You can change the pads a few times, leaving your disk as optional, but you cannot change the disk without the pads.

Below there are two modes of experience, the one above shows how a customer buys a pair of disk pads while having an optional route to get new disks as well. While the latter is a flow where they are guided strictly to select a pair of pads, unless they have already purchase earlier or happen to have a set of pads as a spare in their garage.

FEATURES

Correcting a purchase

We tackle some edge cases when a product is flagged as not perfectly compatible, like for example the amount of oil that goes to an engine.

If the customer got a 4L oil change kit, but in our system we detect that the car has a 5L engine we will prompt the option to upgrade inline on the cards. But leaving the options to continue, in the case of an user has some spare oil in the garage.

🛒

We used a pattern used in ecom known as upselling an item to correct a product

FEATURES

Completing a purchase

There are situations when ideally a purchase needs to be completed by additional products, it’s not amending but we used design in order to inform and guide

FEATURES

Selecting a Workshop

In listing the workshop a lot of emphasis was put on the order of the listing. We did not have any rating system in phase 1 so we decided listing the garages in a 'Recommended' way, a mix of proximity and facilities.

🗺️

We initially excluded maps and opted for a list view only, but as we tested more people were keen on looking over what option is easier to get from a map. Some people are eager to read and scan text, while other would be incline to a more visual approach.

⭐

Ratings were a bit confusing to handle and manage, it would also add time to a conscious decision. We considered all of the garages are reputable and ECP would go an extra mile to ensure a good customer experience.

FEATURES

Summary Page

Lots of versions where made in order to see what's the best version to show your products, delivery, booking and method of payment.

🛠️

Icons and clear punchy copy was used to signpost the price of parts paid online vs the fitting cost which was due to be paid at the garage in person

FEATURES

Functions: Selecting Date

I created two ways to book the workshop in the platform, one is by filtering the results and one is by clicking and selecting the date in the workshop page. As we didn't had a lot of testing budget we decided to use both, duplicating the Date and time Selectors for reuse.

Filters on top of the workshop results page are by Date and Time. You can start with date and this will update time slots apropriatly or jump to timeand then you will see what dates are available for that specific slot.

By filtering

In page

Selecting Date and Time in the workshop page is designed for people that are prioritising the workshop brand over their time. Once you are in the workshop page you can select day and prefered time.

💡

Some users

FEATURES

Dropout Points

One important factor was to track any scenario when a user would drop off the journey and how long we can keep the selected slot on.

FEATURES

Mixed Baskets

An additional feature for this project was to make easier branching out the delivery methods (Collect and Deliver) and on the same level adding the 'Fit it for me' option.

The logic is creating three top tabs, the default one will be collected because all items are available for collection, almost all for home delivery and some for 'Fit it for me' service.

User Testing

The tool we used was Principle, as we needed to create features that where not possible to test through image based prototypes (like invision). We mocket the main features and for the rest that was not prototiped, we covered by questions.

We used Big Light's internal user testing facility in order to get feedback of our prototype model.

We added our feedback to post it notes color coded for each user

And from here all the data was transfered to a spreadsheet format and prioritised

Desktop Version

As 70% of the traffic on eurocarparts.com is from smartphones it made sense to start on mobile and then translate it to desktop. The logic of desktop is to keep the same elements from mobile and think how can the extra space be used in order to show more details, such things that on mobile require an extra tap for example.

Price Preview

One of the things that came out of our testing is that users need to always have the price and order summary in sight. So throughout the journey we created a fixed drawer on the top that in the initial position will show items and price.

Visual Design

In order to speed up the design process, I've created a modular system starting from wireframes. For that we used sketch components, so every wireframe is, in fact, a group of modular components that I can easily interchange in order to create each user journey.

When we moved to the visual design side of things we gradually skinned the wireframes from the small items like buttons, text blocks, checkboxes, etc and after that we integrated in the breakout points of the design.

Conclusions

Currently ECP is implementing the 'Fit it for me' service for a selected group of customers in the Midlands, followed shortly by nationwide throughout UK.

Products are getting tailored to the user and the aim in the long run is to aproach all the user types rather than focusing exclusively on one market.

The products will continue to branch out tailored journeys while keeping the whole checkout process as automatic and minimal as possible.

Results

Here are the final designs delivered for the development, scroll down to see the full process how we got tot this point!

/icons/link_gray.svg

Official Site: https://www.eurocarparts.com/fit-it-for-me-fitting-service

/icons/link_gray.svg

FAQ: https://help.eurocarparts.com/hc/en-us/sections/4407486962833-Fit-It-For-Me-FAQ

🎉

Kudos to Big Light and the Eurocarparts team! his wouldn't have been possible without the help of Steve Borges (founder), Anthony Cousin, Will Kettle, Sophie Robson, Manraaj Bansal, Waqaas Sadiq and the awesome team at Eurocarparts.

🤙

If you'd like to hear more about this project or to talk about how I can help you grow your start-up, ping me at felix.hornoiu@gmail.com