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

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.

CASE CARD Blowout Top Image Size Image of 7680 432
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

Evolving the Financial Services Model

We’re transforming an antiquated industry through cutting-edge design and driving the future of finance forward.

Award WebbyW3 0031Ad Age 0023

Recognition

  • Code and Theory

    Webby Awards

    2022 Best Magazine – Websites and Mobile Sites
  • Code and Theory

    W3 Awards

    2021 Best in Show General Websites-Associations
  • Code and Theory

    Ad Age

    2020 Agency A-List

All Work

 2023

Says a Lot —

Latest

News — 

Ringier | Leading International Media Company Ringier Appoints Stagwell’s (STGW) Code and Theory to Transform the Blick Brand

News — 

Code and Theory Takes the Stage at Web Summit Rio

News — 

PRNewswire | Code and Theory, a Stagwell (STGW) Network Company, is Building New Artificial Intelligence Capabilities with Oracle Cloud Infrastructure

News — 

PRNewswire | Stagwell (STGW) Marketing Cloud Taps Former Microsoft Chief Data Analytics Officer John Kahan, Code and Theory Chairman Dan Gardner as Advisors

News — 

PRNewswire | Code and Theory Network Agency Kettle Promotes Lauren Kushner to CEO

News — 

PRNewswire | Stagwell's Code and Theory Network Expands Its Digital Transformation and Engineering Globally with Addition of YML

News — 

Ad Age | Top 5 Diversity, Equality, and Inclusion Efforts To Know About Right Now

News — 

PRNewswire | Stagwell (STGW) Digital-First Creative Agency Code and Theory Launches Industry's First Holistic Inclusive Design and Marketing Strategy Discipline