Scott Muckenthaler
Geolocation Experiences
Putting the products where you are.
Quick take
When you get to explore products in the context of places you are, or that you know, the experiences become a lot more memorable.
brand
Hyundai
date
2012 to 2019
challenge
Personalize products for people by letting them explore it in their world.
role
Creative Director
Hyundai Elantra
Driveway Decision Maker
Don't decide until you've seen it in front of your house. Or anywhere else in the world of Google Street View you’d imagine driving it.
Car shopping goes local, visual and personal like never before.
Driveway Decision Maker was an experience that aimed to bring car personalization, a staple in online car shopping, to an entirely new level – by allowing you to take your car configuration on a magical journey to discover what it would look like in your world. Car configurators and build & price tools are powerful ways to help people customize, learn and dream, but it was seeing the car virtually drive to the location of your choice that really captured peoples' imaginations.
A tough decision made easy. Or at least fun.
The idea originated out of a need to help people know which of the three Hyundai Elantra models would be best for them. Prior to the campaign, the decision was simple with only the popular sedan model available. When Hyundai introduced the coupe and GT models, deciding which one to pick was going to be tough.
Introducing the three Elantras in the showroom. Let the decisions begin.
The physical, virtual, personalization and location worlds collide.
The Google Maps aesthetic influenced the look of Elantra journey and projection mapping.
The platform.
For the part of presenting the world of locations, landmarks, streets and driveways we turned to Maps and StreetView by Google. An easy choice. Then focus turned towards the difficult tasks of showcasing the cars as realistically and dynamically as possible within the vast range of location possibilities. For that we chose a 3D car solution placed on-top-of and matching the perspectives of the Street View scenes.
The promise of the idea still demanded more creativity and magic when it came to taking someone from the "showroom" style of the landing page to their selected location.
We needed a seamless drive through 4 visual stages. So beginning with a rendered CG sequence from the showroom, the scene shifted to a live-action projection-mapping shoot of each car starting a virtual drive through a google maps-inspired illustrated scene.
Eight phase-shifts & transitions that take Elantra from our Showroom to your StreetView.
Stage 1 / select your car
CG video
Stage 2 / calculating address
Physical car
Stage 3 / start the journey
Physical car
Stage 4 / the close-up
Physical car
Stage 5 / map intro
CG video
Stage 6 / in your neighborhood
Realtime CG
Stage 7 / street-view
Realtime CG
Stage 8 / park it
Realtime CG
Bringing worlds together.
Beyond using the actual maps, Google Maps also played a design inspiration role in the physical projection mapping part of the journey. The CG landscape during the projection mapping sequence adopted the colors and style from the Google maps visual language. We just translated some of the 2D map style into a 3D landscape.
The Google Maps aesthetic influenced the look of Elantra journey and projection mapping.
Projection mapping on stage.
This allowed your car to make an imaginative jump from the initial showroom to Google's Maps and Street View. Eight 3D projectors painted the moving scene across the cars and stage – turning parked Elantras into the high speed vehicles.
Mapping it out.
Next the overhead CG version of the car animated over a Google map scraped from the maps API near the user submitted address – this was when you begin to recognize the car is in your "neighborhood". Then a series of cut scenes let you see the car driving through street view scenes (also scraped from the Api) near your location. This was the real-time 3D version of the Elantra which enabled, among other things, for reflections of the landscape to appear in the sheet metal of the car for a realistic look.
Parking controls.
Time then for people to fine-tune the parking job and take a look at different colors. The interface for controlling the parking was done carefully to balance simplicity and quickness with making it detailed enough to help people get the car positioned right where they wanted it.
Colors.
Once you were happy with the angle, tilt and direction of the car you were on your way to swapping colors and the car model itself so you could get on with your “Decision”.
Elantras around the world.
People quickly began to explore the even-lighter side of driveway decision making, taking their Elantras on tours to the Eiffel Tower, The Colosseum, down the Vegas strip, over the Golden Gate Bridge and more. People were even discovering how to pay the President a visit inside the WhiteHouse.
Taking a trip around the world... in your Elantra.
DDM got some results.
Evidence that we were helping make these decisions easier for people was seen in sales figures for Elantra that were, for the first time, at higher volume than Sonata which has been Hyundai’s traditional sales leader. Other evidence that we were having an impact came in the form of big traffic numbers despite little media weight driving to the experience. The press took notice as did the industry with numerous international awards including The One Show’s Best Automotive Digital Marketing of the Year Award in 2013.
Hyundai Sonata
The 3,000-mile Test Drive
Part geo-loaction game. Part cross-country video series. It was the project that introduced America to the new Sonata. And the new Sonata to America.
Sonata and its six-stop trip across USA.
Teams in Southern California gave Sonata its interior and exterior design. A few of the car's popular new features were built on top of Bay Area technical know-how. And Alabama is where it all comes together at Hyundai’s Montgomery Manufacturing facility. Sonata's digital launch was a demonstration of the car and the stories of the people and places that helped bring it all to life.
The Sonata Spotted home screen.
Sonata at one of the game locations.
A couple ideas came together under this umbrella of the car’s origins. The brand was seeking to create more awareness around its presence in the country so the Sonata launch was a great platform. At the same time, we had to enable people to begin their shopping experience with information about the new sedan and we wanted engagement to play a role.
This led to the creation of the 3,000 Mile Test Drive and Sonata Spotted experience.
Top: the test drive film in Colorado. Bottom: the game showing a CG Sonata in Colorado in streetview.
Why this test drive had to be 1,000 times longer than a normal one.
So that we could get from Montgomery Alabama, our factory, over to Southern California, where we finish by hearing about the design inspiration from Orange County based Hyundai designers.
Not your average test drive.
We found some experts to ride along with us during the video.
A Hyundai manufactring technician representing the brilliant and dedicated people putting Sonata's together in Alabama.
A tight-lipped, safety-minded 18-wheel trucker in Texas that agreed Sonata is a solid choice.
A product director with Google's Maps division in MountainView that told us how they’re helping make Sonatas smarter for the drivers.
A World Champion race driver and stuntman who showed us Sonata’s athletic side by racing up the 14,000+ feet of Pikes Peak.
A Hyundai vehicle designer, along with a renowned suit maker who talked about how inspiration for Sonata’s design came from high-end tailoring.
Exploring the video and the many images from each of five locations.
Geography quiz meets photo gallery.
Another big idea that fit perfectly into the launch platform turned the focus towards interactivity and gamification – and of course it had everything to do with Sonata & road trips across the nation. But when we found a way to pull in the powerful capabilities an magic of Google Maps & Street View we saw a fun and competitive experience.
The landing screen for the game.
We called it Sonata Spotted.
The approach was really very simple. We’ll show the Sonata on a Street View scene somewhere in the United States. Your job? Guess where the car is using clues from the landscape, terrain, signs or your cunning intuition and drop a pin on the map.
Top: Sonata in steet view is your clue. Bottom: dropping your pin where you think Sonata is.
You weren’t entirely on your own though. A clue was available at each scene that married a feature of the car to the hint about where in the country it is. “Peer out Sonata’s panoramic sunroof and you might catch a glimpse of the Rocky Mountains in this region.” Let’s hope you wouldn’t have been guessing in someplace like Virginia here.
Clue cards for when you've got no idea where Sonata is.
It's a game.
So we needed some stats.
Some stats on how well you've been guessing.
Game UI patterns with a distict theme.
The site's tactile and visual experience grows out of careful engineering down to the smallest of elements. An array of icons, symbols, graphic patterns, animations and transitions became the connective tissue in a custom design system for the site. The resulting playfulness balanced by sophisticated imagery and striking color were the ideal solution for presenting Sonata.
UI
Colors
Bright. Unique. Fun.
UI
Icons
Custom. Useful. Playful.
UI
Diamonds
The focus of our geometric theme.
UI
Interactions
Quick and clear for game-like interactions.
Not just any map style would do.
With all engagement concentrated on or around maps, we wanted to carry our visual language into the styling of the maps themselves. Using Google Maps API gave us the robust map user experience everyone has come to expect. It also sets up for pretty deep customization which helped keep the design seamless.
The custome map style designed to compliment the site design themes.
Crafting all the "Spotted" scenes.
There were over 70 custom created Sonata Street View scenes set all over the nation – all of which had the car articulated to match the perspective of the location perfectly. Prior to getting the cars into Street View position though, the project required a rigorous location selection process. Altogether, the locations sought to take players to each state in the nation while being challenging to guess, but not completely anonymous. They had to be beautiful locations yet not iconic. Finally each had to offer some essence of an interesting road-trip.
Once the right locations were known and approved, the task was placing the Sonata on the road – and with the regulated camera height in most Street View images this wasn’t difficult. It actually allowed the team to pair the best angles of the car with he best angle of each location. But the CG rendering process for the car imagery went even further to match its lighting to that of the Street View location.
Sonatas were spotted all over the place.
Results
The 3,000 Mile Test Drive coupled with Sonata Spotted proved to be a powerful way to introduce the all-new Hyundai vehicle. The videos gathering well over a combined 5 million views while the Spotted Game logged thousands of guesses and a share of industry awards like both FWA's Site of The Day and Mobile Site of The Day.