We recently launched the new Cars 3 website for our client, Mattel. As the focus of the project, our web design and development experts created a microsite for a hot, new toy hitting shelves this fall—Tech Touch Lightning McQueen.
Here’s how we did it.
The concept.
Our goal was to closely align the website’s design with the packaging art for Tech Touch Lightning McQueen: the coolest, fastest race car in town. To make sure our creative captured the overall look and feel, we took the interactive product features into consideration:
- Built-in touchscreen interface
- Tire selection + tune-up options
- Moving eyes, mouth and wheels
- The ability for users to design their own track
- Working headlights and taillights
- Crash avoidance functionality
Since the toy also quite literally comes to life, we wanted the microsite to represent that. We incorporated moving parts in both the header image and the headlines throughout the page. We also personalized the copy to reflect Lightning’s character from the movie.
The design.
To showcase Tech Touch McQueen’s three modes of play (Select Race, Design Race and Story Mode), we broke down the site into three sections—each demonstrated in a video format.
Each section we designed featured descriptive copy and corresponding screenshots of large, colorful imagery illustrating Lightning’s functions. We utilized the signature red and black colors throughout the site and focused on making the scrolling and user experience as interactive as possible.
The localization.
Once the web design was complete, we then localized the entire site for Latin American Spanish. Down the road, we will be localizing for additional languages as well.
Want to see the above web design and development in action? Take a look at the completed Tech Touch landing page. Questions or comments on our creative process or the final product? Connect with us on Twitter.