MotorTrend

A Gaming App Experience for Car Connoisseurs

1

Background

Since 1949 MotorTrend has been the car enthusiast’s go-to source for the latest cars, news, reviews, show coverage and more. MotorTrend’s mission today is to entertain a motoring world across every platform, and deliver content to a monthly audience of 26 million across web, TV, print, social, the only auto-dedicated subscription VOD service, and live events. One key to the company’s popularity is its skill of conveying excitement over the latest car models and trends to automotive superfans.

In late 2018, MotorTrend came to Code and Theory with the idea of creating a mobile app gaming experience based around that moment of excitement when you first see a new car in the flesh. The basic idea was developed into a capture and collect gaming concept with a goal of building out a Beta version to test with enthusiasts at the Detroit Auto Show (NAIAS) in early January.

2

Challenge

The challenge was to figure out how we could create a memorable branded game experience at a live car show event. Our target was the North American International Auto Show (Detroit, MI), which spanned 2.5 weeks and attracted car enthusiasts of vastly varying demographics. MotorTrend’s desire to innovate the way its users engage with its brand gave us the opportunity to create a modern way to experience the traditional car show via emerging technologies, gaming mechanics, and experience design.

Motor Trend3

3

The Technology

From a technology perspective, this project presented some interesting challenges. For the app to work, we needed to be able to accurately predict the make and model of a car based on a native camera image under unpredictable live event conditions. We also needed to run Machine Learning (ML) predictions on a user’s device (instead of a central server) in order to (a) provide real-time feedback to the user, (b) reduce dependency on uncertain network conditions, and (c) remain cost-effective to scale since cloud ML services charge per request.

The final development push presented a unique client-agency collaboration opportunity at the live event. In the week leading up to the show, our on-site developers, designers and QA engineers worked alongside the clients, who were also assisting with beta testing and collecting training data.

Throughout the week, the C&T and MotorTrend teams collectively balanced new features, ongoing testing & QA activities, and the app store submission and approval process while meeting clear deadlines. Despite last minute changes to the game rules and prizing logic to meet Google Play and App Store requirements, we pushed through as a team and made it happen. We were in the same space and camaraderie was high—especially when the event kicked off.

Technology Used:

  • iOS: Hybrid Swift/Objective-C Codebase
  • Android: Kotlin with AndroidX ViewModel
  • Image Recognition: TensorFlow and TensorFlow Lite for on-device car image recognition/classification
  • Custom ML Model: Bash/Python/Objective-C codebase
  • Custom training data consisting of over 250,000 labeled images of cars sourced from MotorTrend, public data sets, and images captured by the Code and Theory team.
  • Functional Reactive Programing (FRP) Frameworks: RxSwift, ReactiveReSwiftRouter, RxJava
  • Automated build and distribution system: Fastlane, Testflight, HockeyApp

4

Solution

The Car Spotting app was designed around gaming principles and a new interaction mechanic based on Machine Learning technology. From a design perspective, the user experience was carefully crafted to support the nuances of image recognition mechanics, while also keeping the user engaged throughout the overall experience. The interface was designed to be simple and intuitive so that users at the show could be up and running with ease. From a technical perspective, the application used a combination of a trained on-board Machine Learning model and a cloud service application to accurately recognize the target cars. This combination of design and technology became the base mechanism that not only helped drive the experience but also became part of its identity.

As the “Official App of the North American International Auto Show,” there was great buzz supported by marketing swag and brand ambassadors, which resulted in large-scale participation and learnings that helped to shape plans for future enhancements and roll outs. Over the course of the event, users took 105,000 photos of cars, with 86.5% of users attempting at least one capture, 52% of users successfully unlocking at least one target car, and 20% of users unlocking all 17. User engagement time averaged out at a staggering 24 minutes per user and the application also made the Apple App Store’s top 150 list within 3 days.

Motor Trend
Screenshot 2023 09 29 at 3 51 52 PM
The Ritz-Carlton

Redefining the Legacy of Luxury for a Powerhouse in Hospitality

The hotel giant partnered with Code and Theory to bring its hotel's luxury into every element of its digital experience.

Read More
  • Built a scalable design system for both The Ritz-Carlton and The Ritz-Carlton Reserve.
  • Created a guest-centric site structure to facilitate booking, content exploration and discovery.
  • Strategy, design and launch in under one year.

Driving B2B Growth

Partnering with some of the world's largest companies to fuel their business-to-business expansion.

Tipico Featured Module
Tipico

Succeeding on a Mission to Win Ohio

AOR leading an integrated campaign to capitalize on the moment and bring Tipico to market.

Read More
  • Challenging category conventions to create a differentiated connection with audiences
  • Speaking with Ohio sports fans the same way they speak to each other
  • Working in an Integrated Agency team to connect through all media channels, including the app

Evolving E-commerce to Fit Modern Audiences

We are shaping the digital transformation of the industry by creating strong connections between audiences and brands.

Screen Shot 2023 03 01 at 11 14 04 AM
Marriott Bonvoy

Reimagining Marriott Bonvoy as a Hub for Travel and Commerce

Evolving Bonvoy’s design system to be more modern and immersive while staying true to the core strong brand identity.

Read More
  • Mobile-First
  • Contextualized Conversion
  • Flexible Design and Content Systems

Leading With Empathy and Inclusivity

Having deeper conversations, widening the funnel, and driving innovation with an inclusive-first lens.

Untitled design
Allspring

Speed to Market for a Portfolio Optimization Tool

Crafting a UI for a complex product through user input and clear data visualization.

Read More
  • Improving workflow processes through enhanced user interface design
  • Clear and simple data visualizations for complex data sets
  • Designing a roadmap to continue to iterate and optimize the product on a rolling basis post-launch

Transforming Education's Forefront

Defining the future of digital experiences in education.

Pfizer World| Shaping a Platform into a Beacon for New Priorities and Ways of Work

Pfizer World

<p>Pfizer World</p>

Transforming a platform into a meaningful beacon to set new priorities and ways of working.

Read More
Galleri| Introducing a Revolutionary Medical Feat to the Market

Galleri

<p>Galleri</p>

Creating the first B2C campaign and user experience for a first-of-its-kind cancer detection test.

Read More
Black BoxBlack BoxBlack Box

Recognition

  • YETI x Code and Theory

    Innovation by Design

    Best in Marketing
  • Code and Theory

    Innovation by Design

    Design Company of the Year
  • Code and Theory

    Ad Age

    Agency A-List

All Work

 2023

Says a Lot —

Latest

News — 

Code and Theory Wins Three Drum Awards For AI, Creativity, and UX with YETI and Tipico

News — 

Under Armour Launches UA Rewards with Masterclass-style Video Series, in Partnership with Code and Theory

News — 

Figma Names Code and Theory as Launch Partner in New Service Partner Program

News — 

Scout by Sutter Health™ Launches an App Focused on Resilience Building for Youth and their ‘Champions’, Built by Code and Theory

News — 

Code and Theory Network Wins Six W3 Awards

News — 

Facing the Future: A Guide to AI and Design Transformation

News — 

Amazon Ads Debuts First Small Business-Targeted Campaign

News — 

YETI Wins Fast Company Innovation By Design Award for Marketing