Ford Motor Company
Reconstructed the digital design system of Ford’s North American site following rebranding & new art direction
ROLE
SR. UXUI DESIGNER
SR. UXUI DESIGNER
TOOLS
FIGMA, JIRA & SKETCH
FIGMA, JIRA & SKETCH
TIME
JAN – MAY‘24
JAN – MAY‘24
Problem
Ford’s digital platform lacked consistency, cohesion, and an easy-to-use experience for the consumer.
How might we maintain Ford’s established brand, but also modernize the design system?
Solution
Create design patterns with clear standards for assets and components, promoting recognizability cross-platform.
The Holy Grail
Ford’s restructured design principles
AUTHENTIC
Craft with Intention
AUTHENTIC
Make decisions rooted in reason. Be thoughtful. Be purposeful. Be empathetic to human need.
Let it Breathe
EFFORTLESS
Make space. Create focus. Guide. We should be a breath of fresh air in a complex world.
Stir the Soul
PASSIONATE
Connect with people. Inspire optimism. Spark imaginations. Create energy. Be bold but relatable. Tell real stories.
Advance the Icon
PURPOSEFUL INGENUITY
Forward advancement is in our blood. We stay true to our visionary heritage by showing up in unexpected ways.
Vehicle Home Page ︎︎︎
Some reskinned screens01 GLOBAL NAVIGATION
Reduced amount of clickable items for simpler hierarchy.
02 HERO, SECONDARY NAVIGATION, ATTRIBUTES
Emphasized vehicle imagery and key attributes.
03 MODEL WALK
Restructured to help users compare different model prices.
04 360° COLORIZER
Highlighted color variations of each vehicle type.
![]()
Highlighted color variations of each vehicle type.
05 FEATURED CARD CAROUSEL
Added variety in content with imagery, text, and button componentry.
The Design Process ︎︎︎
The Before
Ford’s design system lacked clear standards for how the brand must be expressed. Inconsistencies with icons, buttons, links, alignment, color, imagery, and components created a dated look and led to an unreliable online experience.
The After
By leveraging new design principles, we organized and created structure. Strategically used negative space to welcome and create freedom in designs. Prioritized information hierarchy to clearly guide and communicate what is critical. Removed extraneous elements to say more with less. Used motion to advance the experience and propel the user forward.
EyeQuant Data ︎
Smart Eye-tracking
Gained instant feedback and data from intelligent eye-tracking “heat maps”. Understood which elements created a distraction or competed with each other to improve design and drive conversions before going live.
