The Challenge
Create a better UX and UI that makes it easier on desktop and mobile devices to search, build, book test drives, calculate finance options, purchase and lease vehicles, generate leads, as well as apply for and get approved for financing and leasing.
Key challenges Identified:
• Needed a shorter process from end-to-end. (Step by Step Process)
• Usability on Mobile responsive needed a complete overhaul on UI & UX.
• Increase Leads
• Ability to have all required functionality on the interface at all times. - book test drives, vehicle info, finance calculators and apply for financing - Without cluttering the interface and affecting usability.
Note: Personas, User Journeys and Research were provided by Stellantis for this re-design.
50% Time Savings (end-to-end process)
2x Usability
33% Increase in Lead Generation
Process
Information Architecture
– We focused on an intuitive 6 step process with a structure consumers could navigate easily from 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 Figma to refine layout, spacing, and navigation logic.
- 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.
Usability Testing:
- Conducted with 15 consumers using a Figma prototype.
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.
Visual Design & Style Guide:
Primary Colors, Typography, Consistency and Tone:
- All colors and typography were set by the styles represented by each vehicle brand.
Consistency:
- A unified component library 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.
The Result
We accomplished and exceeded all Stellantis's concerns, requirements and expectations. Maserati and Fiat customized their experiences post-initial build to stand out.
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:
I helped maintain the online brand guidelines for all vehicle brands throughout the design and development process here:
E-Shop Desktop
E-Shop Mobile
