Sylvia Bosteels
Digital Product Designer

Design Process of the search module for Bridgestone Europe

 
 

Design Process of the Bridgestone Tyre Search

The search module is at the heart of the Bridgestone site. It’s the result of a multi-phased process by the Bridgestone team at These Days. - Bridgestone.co.uk

AgencyThese Days Wunderman

Tools: Adobe Photoshop - Adobe Illustrator

Credits to the These Days Bridgestone team: Gino Lardon (UX) - Koen Speelmeijer (Project Manager) - Laura Schillemans (Account Manager) and Toon Diependaele (Strategy)

Development: Cegeka

 
 
 

Phase I: 

Scenario: Building two search components: a tyre search and a tyre advisor. Both components function separately from each other and can be used on different levels of the site. The tyre search has to function as the main module and influence the rest of the content e.g. Tyre Talk (magazine), promo’s,…

Goals

  • Designing a consistent search module on different levels of the site (Tyre catalog vs Range page vs Product Detail).
  • Designing a clear result block with specifications such as season, RFT, gallery, price,… 
  • Integrating two ways of searching: a basic search based on explicit facts (car brand, tyre size, …).

 

 

© Wireframes Tyre Search & Tyres Advisor: These Days UX team (2014)

© Wireframes Product Detail Page: These Days UX team (2014)

 

Phase II

Scenario: Bridgestone is the kind of client who actively participates in brainstorm sessions. They offer a unique and detailed perspective on their wide product range. Through these sessions, we were challenged with adding additional important product information to our new search module.

Some of the issues we had to explore were

  • How do we allow to select different tyres for different front and rear tyre sizes?
  • How do we make sure the car can support a selected tyre?
  • How can we integrate the option to select Run Flat Tyres?
  • How can we make the search module consistent on range and product detail page?
  • How can we make the vehicle selection more intuitive and faster?
 

© Whiteboard brainstorm: These Days Bridgestone Team (2015)

 

Goals:

  • Building one combined search module (tyre search and tyre advisor in one).
  • Include options to select tyres for cars with different front and rear size, weather situations, Run Flat Tyres,..
  • Open search field for car information instead of 4 dropdowns.
  • Consistent search module on range and product detail page.
 

Wizard based open search

Range page with open search and tyre results (Different Front and Rear tyre)

Search Result message for desktop and mobile (different languages)

 

Solution:

  • A Wizard search consistent on both range and product detail pages.
  • The customer chooses if they search by car, tyre size or needs. Afterwards, the wizard will guide them through the whole search in order to give the best tyre recommendation.
  • We aligned all result blocks to accompany the different front and rear tyre sizes and all additional options. 
  • An open search with clear indications of the amount of steps.
 

Open search by vehicle

 

Phase III

Building a personalized homepage

Current scenario: A wizard open search on 3 levels of the site (Tyre catalog, Range and Product Detail page)

Problems

  • The search module was only accessible by a call- to- action in the header. This gives the impression the user had to start all over again when visiting the site multiple times.
  • The header image + the search module takes up too much space above the fold.
  • Adjusting the search module becomes a very labor and time-intensive effort due to all different scenarios.

Goals:

  • Put as much personalized information (recommend tyre, other matching tyres, last viewed tyres, specific articles matching your search by car, your favorite dealer locator,…) as possible above the fold.
  • Try to guide the consumer through a wizard where they are asked to  give as much information as possible.
  • Designing the Smartbox by the principle of Atomic Design. We would deliver atoms, molecules, organisms and pages instead of completely different designs for different scenarios. This atomic design linked to a clear flow chart explaining the process of the smartbox.
 

One of the first proportions for the homepage personalization. The header was too heavy and it was unclear to the customer how they had to complete their tyre profile.

 

Solution:

  • Building a vertical smartbox inside the header.
  • Depending on the pre-filled information, new questions will pop-up automatically to complete the search profile.
  • A tab menu allowed to add all personalized content above the fold.
  • Depending on the given information, the corresponding tab will be open by default.
  • Atomic sheet.
 

© Flow for the homepage personalization by Gino Lardon

Homepage personalization

One of the pages from the Atomic Design Styleguide