Overview
A four year long project from 2019 - 2023, helming, designing and maintaining the design overhaul of the online buying experience for Stellantis vehicle brands in conjunction with CARZATO LLC, ROUTE ONE, AutoFi, KBB, MOPAR and more. The experience was implemented across thousands of US dealership websites and their tier 1 websites including: Alfa Romeo, Maserati, Chrysler, Dodge, JEEP, RAM, and Fiat. E-SHOP is integrated with various Stellantis systems, including brand marketing campaigns, CRM, and dealership admin systems, streamlining the customer journey.
Role: UX/UI Director and Lead Designer
Timeframe: 2019 - 2024
Target Platform: Responsive Web
Design Process:
• Research | Personas | User Flow IA | User Journeys
• Wireframing
• Design Systems (Iterative overtime)
• High-Fidelity UI Mock-ups & Interactive Prototypes
The Challenge
Create a UX and UI design that makes it easier on a responsive web platform to:
• Search | build | book test drives | calculate finance options | purchase and lease vehicles
• Generate leads
• Apply for and get approved for financing and leasing.
• Reduce End-to-End Process time by 25-50%
Key challenges Addressed:
• Added 4 Step Process from end-to-end.
• Usability on mobile responsive needed a complete overhaul on UI & UX.
• Increase leads on vehicle ordering with strategic form placement
• Ability to have all required functionality on the interface at all times:
Non-linear navigation | book test drives | vehicle info | finance calculators and apply for financing - Without cluttering the interface.
Design Process
Research | Personas | IA Web Flow | User Journeys
Information Architecture
• We focused on an intuitive 6 steps for the overall process with a structure consumers could navigate easily from vehicle selections to search and build to finance and delivery of vehicles.
Search Dashboard
• Filters for available vehicles and dealer geo-location, ability to compare vehicles and select favorites.
Main Dashboard
• Lead Form for dealers, Credit score check, Calculators, Vehicle info, Book test drive, 4 Step process: Trade-in, Service & Protection plans, accessories, review & submit for delivery.
Wireframing & Prototyping:
• Started with low-fidelity wireframes to map out key screens like Dashboard, Clients, Tasks, and Automation.
• Focused on clear hierarchy, mobile ergonomics, and easy access to a complex menu system.
• Created mid-fidelity wireframes in XD to refine layout, spacing, and navigation logic. Later converted to Figma.
• Developed interactive prototypes to simulate core flows for vehicle search, build and ordering process.
• Conducted user testing with a select group of users to validate flow clarity and tap-friendly design.-
• Iterated based on feedback — improving task visibility, linking communication history, and refining mobile nav.
Scalable Design System for Visual Design & Style Guide:
Note: The scalable design system we created is proprietary to Stellantis for all it's brands and can't be public.
Primary Colors, Typography, Consistency and Tone:
• All colors and typography were set by the styles represented by each vehicle brand. Stellantis Online Brand Guidelines
Created a Scalable Design System for Consistency across all brands:
• A unified component library with styles, variables and tokens ensured visual and interaction consistency across all screens — from vehicles to buttons and modals.
Accessibility - ADA and WCAG:
• Color choices were tested for contrast to meet accessibility standards, especially for all interactive elements.
Tone:
-The overall design language is clean, professional, and modern.
Usability Testing:
• Conducted with 15 consumers using XD and Figma prototypes.
Key Tasks Tested:
• Search for vehicle
• Fill out lead forms
• Automate a post-visit email
• Go through 4 step process from Trade-in's and accessories to Service & protection and finally Review and delivery.
• Apply for financing/leasing as well as pay with cash.
Results:
• 100% completed tasks with minimal guidance
• 15/15 said the Dashboard gave them “instant clarity”
• Users felt the new mobile version was 100% easier to navigate from it's predecessor.
The Result
50% Time Savings (end-to-end process)
200% Usability increase over the previous UX
33% Increase in Lead Generation
We accomplished and exceeded all Stellantis's concerns, requirements and expectations. Maserati and Fiat customized their experiences post-initial build to stand out.
Moving forward: The mobile UI/UX is a constant ever-changing challenge, due to business needs, low real estate and changes. It needs to be simplified even more.
The new UX/UI for buying Fiat contributed to a Fiat sales comeback in 2024 Sales:
"...2024 total calendar-year sales increased 153%, led by the introduction of the all-new, all-electric 500e. The brand's fourth-quarter results saw total U.S. sales increase 317% year over year." - Jan 3, 2025 | Newswire PR
Here are a few of the e-shop experience URLs:
E-Shop Desktop
E-Shop Mobile
