top of page

Case study 02: Fiat Chrysler Automobiles

A modular campaign framework

Project background

While working at SapientNitro in 2015, I was put in charge of designing a flexible, modular campaign framework for Fiat Chrysler Automobiles (FCA). It had to support all five of their brand websites and a variety of campaign types. It was also the first responsive web project for FCA.

This end goal was help each of the brands gain future efficiencies in both design and development by allowing brand managers to run campaigns for things like new vehicle launches by using a set of reusable templates.

Yearly site visits (in millions)

25

20

15

10

5

0

jeep.com

dodge.com

ramtrucks.com

chrysler.com

fiatusa.com

Getting started

To get started, I conducted interviews with brand managers, strategists, and product stakeholders to understand their priorities for the project and their vision for the end product. This helped me prioritize varying objectives across a large number of stakeholders.

My takeaways
  • Key site objectives are driving users to lower funnel activities (LFAs) like 'Build & Price' or 'Find a Dealer'.

  • There was an emphasis on prioritizing visual and interactive content as it led to higher user engagement.

  • Define responsive web components to fix the fractured experience that existed across mobile and desktop.

  • The campaign pages had to allow for pages to evolve through the lifespan of a promotion.

  • I would need to define templates that could accommodate varying amounts of content on a campaign-by-campaign basis.

Taking inventory

My next step was to begin auditing a repository of past campaign page designs for each of the five brands. This allowed me to create an inventory of existing components.

Jeep campaign
Fiat campaign
Chrysler campaign
Dodge campaign
Ram Trucks campaign
I began prioritizing

In order to prioritize campaign components, I used site analytics to determine which content was generating the most user engagement and which content was leading to user journeys that resulted in our key performance metrics (lower funnel activities).

Screen Shot 2018-10-09 at 2.18.47 PM.png
My process
  • I ultimately recommended 16 components for development in order to meet business, product, and most importantly user needs.
     

  • I used analytics to determine which breakpoints would best serve our users based on device traffic.
     

  • I began sketching components and responsive page layouts, and then turned those into wireframes of various campaign content configurations.
     

  • After client approval of wireframes, I began annotating the wires and designing the final visual mocks.
     

  • I used InVision to create simple, clickable prototypes to help communicate the story and functionality to clients.

Sketches
...more sketches.
Component wireframes
Wireframe
w2.png
Wireframe
Wireframe
Wireframe
Page template designs
Wireframe
Wireframe
Wireframe
Mobile considerations

Our client had not done much mobile design work previously, so I implemented standards that would ensure each of our components were optimized for touch devices.

This also meant I had to do some design evangelism and educate the automotive business owners about why doing the extra work to get mobile optimization right was important and would ultimately benefit user and business.

Screen Shot 2018-10-09 at 2.59.06 PM.png
Responsive images

Early on in our development phase, I identified an issue we were having with image resizing. At certain screen sizes the vehicles were being poorly cropped within the image frame.

I worked with the dev team and determined the best solution was a CSS framework called Focal Point, which allows you to automatically resize images when the viewport size changes and crop them with a specific focal point determined.

Screen Shot 2018-10-09 at 3.07.44 PM.png
Responsive typography

I established adaptive typographic column sizes for each of our breakpoints. While there are some advantages to allowing columns to resize fluidly, using adaptive sizes with the fewest breakpoints possible was the best solution because readability for users is much more important than having a layout that fills the entire viewport. Optimal readability requires control over column width and text size, which adaptive allowed us to control.

responsivetype.png
columns.png
Visual design mocks
Our first campaign

Our team was under pressure to deliver on a tight deadline because there was an impending new vehicle launch for the Jeep Renegade that was being backed with a big media push during Super Bowl XLIX.

Thanks to the newly built campaign templates, we were able to support the launch campaign with speed, efficiency and significantly reduced business costs thanks to decreased engineering efforts.

Super Bowl campaign
The results
  • The first campaign using our modular framework was launched during Super Bowl XLIX, promoting the all-new Jeep Renegade. Super Bowl ads led to the site receiving over 450,000 visits in the first two weeks.
     

  • The average duration of page visit was +104% higher than similar vehicle launch campaign pages.
     

  • Our key performance metric – lower funnel activity rates – increased 37% comparative to other brand campaigns and 18% higher than vehicle landing pages.
     

  • Brands were now equipped with a responsive campaign framework to use for future promotions, dramatically reducing design and engineering efforts, and saving the business time and money.

Jeep hero

Case study 01: Sears

The quest for a better home page

Case study 03: Amazon

Reachable refinements
bottom of page