The Approach

A complete digital overhaul for the world leaders in automotive performance.

1.0 Discovery Phase

Understanding Yokohama's goals with the new site

The Yokohama team felt that their current UI structure resembled a WordPress template, with flat, one-dimensional design that lacks interaction and movement. Their objective with the new Yokohama website is a modern and intuitive platform that successfully lifts brand credibility, awareness and user engagement.

Synthesizing the data

After reviewing the analytics data, we identified several issues that could be affecting the site's user experience. The site's SEO health score was 38% with overall site speed falling at a below average speed of 61% (recommended site speed is 90-100%). Several key pages had high bounce rates and a number of user journeys were either incomplete or didn't present users with enough direction to take next steps. With this data, we were ready to constructively create high impact design solutions to improve their UX/UI.

2.0 Implementation Phase

Content strategy - Ideas meet function

Drawing connections between the insights gathered during the discovery phase, we explored various user journeys to get a sense of how to emotionally connect with Yokohama's target audience, and at what point in the experiential journey decisions were effectively to be made.

Our understanding of Yokohama's audience segmentation of consumer-based and commercial-based audiences informed our content flow and structure. Our goal was for users to connect with the experience on an emotional level, while giving them the information and education they needed to ultimately make an informed purchase.

Curating a new web style guide to help define consistency

In an effort to modernize Yokohama's web presence as well as create a visually consistent experience, we decided on Roboto Condensed, a google font, as their new primary web font. The new typography emits bold visual appeal and brand consistency, while being exceptionally legible and readable at a glance, giving Yokohama the stand-out edgy look it deserves.

Visual Design and real-time development

Visually, we enhanced the existing experience by designing a mega nav that allows for easy access to all website content, incorporating more video elements to create an exciting user experience and revamping the product anatomy with interactive elements that showcase and educate users of Yokohama's superior quality tires.

Simultaneously, we developed our pages in parallel with design to expedite code delivery. This allowed us to see and interact with our physical prototypes in real time, which gave both teams time to align more rapidly on decisions and identify areas for improvement.

3.0 Evaluation & Test Phase

Creating visual alignment on all breakpoints

To ensure consistency on all devices, we fleshed out a consistent visual flow that adapts well to all devices. For touch-based devices, we created some innovative custom solutions like compacting information, optimizing images and videos and cleanly structuring content for easy user consumption.

Testing and Quality Assurance

Our final and crucial step is to test the website to uncover bugs or mistakes before it goes live to ensure a smooth experience for all site visitors. This includes form input and validation, link testing, UI testing, accessibility, mobile responsiveness and functionality testing.

Key website features

Making a striking first impression

Our goal for the homepage was to embody all aspects of Yokohama as a brand - The premier innovator in cutting-edge tire technology. We showcased this by creating an eye-catching homepage that communicated performance and proof-in-motion through powerful imagery, bold video elements and subtle design features inspired by the Yokohama logo to create a strong brand identity throughout the website.

Tire Anatomy and Showcase

An interactive experience that comprehensively displays all details and specs of a tire in a visually striking manner. A tabbed navigator affixed to the left side of the page allows users to seamlessly navigate through all levels of detail. Along with cleanly laid out specs and bold photography, users can view the product anatomy of each tire and learn about the quality construction and features that each offer. With access to information regarding warranty, sizing specs and tire benefits, the tire showcase page is now a one-stop shop for a user to gather information for any Yokohama tire.

Motorsports Hub

As leaders in high performance tires, the team at Yokohama was in dire need of a web focal point that showcased all of Yokohama's latest motorsports news and information. Our solution: A dedicated Motorsports hub educating users on topics ranging from upcoming races to individual showcases of their race tires. Our approach was to create a scalable microsite, easily accessible through the universal navigation as well as through an entrypoint on the Consumer homepage. The sub-navigation was designed to be simple yet conspicuous. As the user scrolls, this sub-navigation sticks below the global navigation allowing them to easily explore the microsite without any friction.

Dealer Locator

We created a clean and intuitive experience for users to easily search and locate a dealership near them that supplies Yokohama tires. With geolocation capabilities built within the page, users are able to view all dealership locations near them within a 20 mile radius. To narrow down their search, users can utilize the filtering capabilities to view results based on their needs. Each location is styled in a list view and display the necessary information for a user to take the next step and get in touch.

Next Project

Yokohama Tire

Dynamic web redesign for a world leader in automotive tire performance.