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
Agency: These Days Wunderman
Tools: Adobe Photoshop - Adobe Illustrator
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,…
- 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, …).
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?
- 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.
- 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.
Building a personalized homepage
Current scenario: A wizard open search on 3 levels of the site (Tyre catalog, Range and Product Detail page)
- 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.
- 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.
- 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.