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.
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).
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.
Component wireframes
Page template designs
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.
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.
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.
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.
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.
