Designing the Toyota Logistic Design Competition Website

Role: Project Planning, Design, HTML/CSS, Competition Platform Integration

Employed at: Sqore

Visit the website

Background

Each year the Toyota Material Handling department run a design competition to find the latest new talent within the industry, offering cash prizes and awards for the winner and runners-up. Participants are asked to rethink the traditional supply chain and come up with new ways to streamline the material handling process. The deliverables for the participants are a .pdf presentation describing their idea and a short (150 words) description. A jury of experts then selects the winner and runners up.

This competition also contributes hugely to the departments marketing strategy, with video content, ads etc all being built around the competition.

Project Goals

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

Competition branding was provided by Toyota for this project. (Colours, Type etc).

To achieve a strong impression I used a large hero section with multiple animated elements creating a moving cityscape and very prominent call to action driving new users to register (supported with a countdown to the competition deadline to push the feeling of urgency).

Other animated elements (Train, Van etc.) are used throughout the page to retain interest.

Small elements link each section of the page, to strengthen the theme of a supply chain. A parcel moving through different types of transport etc.

Build

I built the site using HTML/CSS (SASS) using CSS animations (SVGs) for all of the animated elements.

Conclusion

Both the clients and the competition participants loved the site, receiving great feedback from both.

On a personal note, I had a lot of fun working on this project. Having never really explored animated SVGs, I was able to dive pretty deep and really explore some fun ideas.

This site is now used as one of main portfolio peices at Sqore.

Toyota Design Competition Fullpage
The landing page features a large, striking hero area with animated cityscape and CTAs.
Toyota Design Competition Iphone
One of the major hurdles in this project was ensuring it was as just as engaging on smaller devices as it is on desktop. Due to the complex nature of the site and animations, only the most obvious and useful animations were used on smaller screen sizes. Other more superficial elements like the animated lines etc. were dropped.
Toyota Design Competition Train Animation
Animations are used through the page to keep interest and help the content further down the page feel less static.
Toyota Design Competition Process Animation
Animated lines were used to link sections, moving on and off screen. Signifying the "supply chain".
Toyota Design Competition About Page
A smaller, static hero section is used on the internal pages.