Toyota Yaris Website

Yaris Responsive Website

The Brief

With the new-look Yaris hatch on the way we were tasked to come up with a fresh new look for the Yaris page. It needed to be a fully responsive page,  a first for the Toyota Australia website, and would serve as a litmus test for the rest of Toyota's vehicle range that would launch towards the end of the year.

The importance of Yaris 

Almost half of all Yaris buyers will purchase another Toyota. This makes Yaris is a huge stepping stone into the Toyota brand and other models in the range. 

The hatchback market 

Over two thirds of buyers are female in the compact hatchback market and almost all of them live in the city. Yaris is all about lifestyle and fun packed in a small package.

How we communicate 

Internet and word-of-mouth are the two main channels the target market is exposed to on a day to day basis. They are switched-on, social and tech-savvy.

 
From old to new - The current Yaris site was last designed in 2012 and featured a lot of flash content.

From old to new - The current Yaris site was last designed in 2012 and featured a lot of flash content.

 

The Design

There were three key features for the Yaris page we focussed on had to do from a usability and design perspective:

Make it easy

Reduce technical jargon on the site and make it easy for our target audience to navigate through the range and understand what the differences are between models.

A modular structure

There's a lot of information to cover about the model - Breaking this info into sections not only gives structure to the site but we could also re-order them if we needed to.

Bring the sexy back

While the new-look Yaris is 'only' a facelift model (meaning cosmetic changes only) it was clear to us we wanted to bring the wow factor and excitement back to Yaris hatch.

 
Intro section featuring a fullscreen background video. On mobile we had a fall-back to a static image to save bandwidth.

Intro section featuring a fullscreen background video. On mobile we had a fall-back to a static image to save bandwidth.

 
The range section is easy to navigate by swiping or clicking left or right through the Yaris grades. We wanted to keep important info at the top like fuel economy and the key features have been trimmed to bite-sized pieces that are easy to understand. In this section the user is also able to see what the car looks like in various colours and toggle between front and back views.

The range section is easy to navigate by swiping or clicking left or right through the Yaris grades. We wanted to keep important info at the top like fuel economy and the key features have been trimmed to bite-sized pieces that are easy to understand. In this section the user is also able to see what the car looks like in various colours and toggle between front and back views.

 
The image above shows part of the expandable highlights section - giving the user key points of difference and why the Yaris is the one to buy.

The image above shows part of the expandable highlights section - giving the user key points of difference and why the Yaris is the one to buy.

 
The gallery section features fullscreen and beautiful images of the hot new Yaris hatch.

The gallery section features fullscreen and beautiful images of the hot new Yaris hatch.

 
The website ends on the 'your choice' section where you can compare side-by-side the different models, their prices, features and more.

The website ends on the 'your choice' section where you can compare side-by-side the different models, their prices, features and more.