Redesigning the Toyota Design Center Website

Role: Project Planning, Design, HTML/CSS, Wordpress Integration

Employed at: Sqore

Visit the website

Background

Toyota Material Handling Europe’s (TMHE) design team creates optimum quality forklifts with employee and customer in mind.

Project Goals

The existing THME website was a microsite within a much larger Toyota site with fractured, hard to find content and old low quality images.

The key goals for the this project were:

Planning

Working alongside a project manager I was involved in the early planning phases of the project, assisting in client meetings and guiding content creation.

Design

I created wireframes(balsamiq) to determine site layout and structure; alongside mood boards and inspirational material. After the direction was confirmed with the client, adhering to Toyota's brand guidelines, I produced all design work in Sketch.

The clients for this project provided a unique challenge as they were also designers in their own field, so had a strong sense of how they wanted the site to look and feel. By working closely together we developed an efficient working relationship and were quickly on the same page with the aesthetics of the site. This made for very few revisions and quick sign-offs.

Build

I built the site using HTML/CSS (SASS) and then integrated it with Wordpress (Custom post types, Blog, Editable regions etc).

Subtle css animations were used throughout the site to promote the sense of interactivity and give the site a techy feel.

Conclusion

This project was deemed a success by everyone involved and is used by Sqore as one of their key portfolio pieces. We have continued to add new sections/functionality to the site as budget has become available and also won further contracts with Toyota off the back of this project.

Toyota Design Fullpage
The homepage was split into various horizontal sections, each linking through to the internal pages of the site. To help achieve the magazine feel the client wanted, the content was set to a grid, and then in certain places breaks out of the grid. I also added some typographic elements on the sections titles.
Toyota Design Menu
To keep the hero section as minimal as possible, the decision was made to use a menu overlay animation which reveals the navigation when the hamburger menu icon is tapped.
Toyota Design History Animation
Subtle animations were used throughout the site to promote the feeling of interactivity and add a little fun.
Toyota Design Iphone
A simplified version of the layout is available on smaller devices, with all the content still accessible and easy to digest.
Toyota Design History Page
The internal pages of the site continue with the horizontal sections, with an alternate, relevant hero image used.