Completed in 2016Detroit, Mi.Art Direction, Product Design
for
from
Ford Motor Co.
2016
Detroit, Mi.
from 2016
— an American Car Maker —
I worked closely with Team Detroit (now GTB) for six months, tasked with reshaping the incentives section to align with the evolving overhaul of the website.
My role(s) on this project included: Art Director and Designer.
Art Direction, Product Design for an American Car Maker
2016
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com*
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com*
Incentives & Offers on Ford.com*
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com
Incentives & Offers on Ford.com*
Tap anywhere to enlarge the work
A1
A2
A3
B1
B2
B3
B4
B5
G1
G3
G4
G5
b18
Behind the Work
I'm a Hybrid Designer living in Santa Monica. To learn more about me and my process, click here.
B6
B7
B8
B9
*B10
Detroit, Mi.— I worked closely with Team Detroit (now GTB) for six months, tasked with reshaping the incentives section to align with the evolving overhaul of the website.
My role(s) on this project included: Art Director and Designer.
Offers allow shoppers to customize seasonal offers to match their situation, which ultimately incentivizes them to make the purchase.
the end result
It's considered the last page a prospective buyer visits before they pull the trigger. At this point in the sales funnel, clarity is persuasive. Behind the scenes, the algorithm is taking into account many legal requirements which vary from region to region, resulting in savings within the context of something we can all understand:
a reduced monthly payment.
The Evolution of Model Detail
Try swiping left and right on the image to navigate.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
A starting point
Introducing Tabs
Each tab displays a breakdown of incentives.
Tabs, minimized
Introducing Cards
Details became compartmentalized and began to take the shape of cards.
Pulling out the card title
Demonstrating Focused Elements
Tightening up the masthead
CTA revealed with interaction
Another reveal style
Only One Card per Tab
Footer
My initial assumption was to filter the content using a tabbed system. That evolved into more of a cards-based approach, as they lend themselves to mobile quite nicely. Ultimately, we combined features from both tabs and cards towards the end.
Try swiping left and right on the image to navigate.
Showing 3 Tabs at once
One Tab at a time
The next screen shows what happens when the details button is pressed.
Breaking down the Incentives
Moving to Cards
Simplifying Cards
The next screen shows what happens when the details button is pressed.
Details in a modal
Close the modal
Details, in-line
Adding Details to Cards
Pulling Out the Card Title
Card, not selected
Card, selected
Cards, evolved
Tap to load
1
2
3
4
5
6
7
8
9
10
11
12
13
Details of an Offer
Try swiping left and right on the image to navigate.
Tap to load
1
2
3
4
5
6
7
8
9
Introducing side modal
The next screen shows what happens when the Customize Your Incentives is pressed.
Editable Incentives
A version with more detail
Removing Military Discount
Introducing center modal
Center modal, revised
Center modal, revised again
Adding Police Discount
Mobile Screens
Homepage Concept
Sitemap overlay
Try swiping left and right on the image to navigate.
Tap to load
1
2
Filter Vehicles by Available Offers
Try swiping left and right on the image to navigate.
Tap to load
1
2
3
4
5
6
7
8
Filtering vehicles
Live filtering based on the value of all combined incentives available.
APR, refactored
APR, dropdown
Top Filters
Side Filters: Best Lease
Side Filters: Cash Back
Side Filters: Low APR
Types of service
Try swiping left and right on the image to navigate.
Financing: Buy
Financing: Cash
Adjusting the monthly payment.
Financing: Cash
Adjusting the APR.
Zero Filters Selected
Selecting Filters
Filters Added
Popup
Try swiping left and right to navigate.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
International Model Detail
Try swiping left and right on the image to navigate.
