A Conversational AI for Cars: Designing Stellantis' First LLM

Turning cutting-edge AI into a seamless, branded experience that helps users explore vehicles with confidence and ease.

Client

Stellantis (Jeep, Chrysler,
Ram, Dodge, Fiat)

Role

UX/UI Designer

Tools

Figma, Mobbin

Timeline

May–June 2024

Dec. 2022 –

Mar. 2023

(4 months)

Overview

Stellantis set out to integrate an AI-powered conversational agent into its brand websites—a first for the company. The goal was to design a seamless and engaging Large Language Model (LLM)-powered experience that would encourage user interaction, provide real-time support, and enhance customer satisfaction across Stellantis' brands.

This was a high-stakes, high-visibility initiative, with buy-in from executive leadership. Our design needed to strike a balance between innovation and usability, all within a tight, four-week delivery window.

Ask Chrysler successfully launched on mid-December, you can view it live at Chrysler.com

Stellantis set out to integrate an AI-powered conversational agent into its brand websites—a first for the company. The goal was to design a seamless and engaging Large Language Model (LLM)-powered experience that would encourage user interaction, provide real-time support, and enhance customer satisfaction across Stellantis' brands.

This was a high-stakes, high-visibility initiative, with buy-in from executive leadership. Our design needed to strike a balance between innovation and usability, all within a tight, four-week delivery window.

Ask Chrysler successfully launched on mid-December, you can view it live at Chrysler.com

Stellantis set out to integrate an AI-powered conversational agent into its brand websites—a first for the company. The goal was to design a seamless and engaging Large Language Model (LLM)-powered experience that would encourage user interaction, provide real-time support, and enhance customer satisfaction across Stellantis' brands.

This was a high-stakes, high-visibility initiative, with buy-in from executive leadership. Our design needed to strike a balance between innovation and usability, all within a tight, four-week delivery window.

Ask Chrysler successfully launched on mid-December, you can view it live at Chrysler.com

Design Process

1

Research

Competitive Analysis

1

Research

Competitive Analysis

1

Research

Competitive Analysis

2

Define

UI Requirements
UX Requirements

2

Define

UI Requirements
UX Requirements

2

Define

UI Requirements
UX Requirements

3

Design

Wireframes
High Fidelity Wires

3

Design

Wireframes
High Fidelity Wires

3

Design

Wireframes
High Fidelity Wires

4

Prototype

Animated Prototype

4

Prototype

Animated Prototype

4

Prototype

Animated Prototype

The Problem

When this project came to my team, the dev LLM exploration process had already begun. The foundation experience was done, but needed heavy UX and UI refinements. That's where we came along. We needed to fill in the gaps: doing a full UI overhaul that ensured our new design felt modern, cohesive, and met industry standards for AI, while also crafting intuitive UX patterns that would make the experience seamless.

Research

Though we had a limited timeline to complete this project, it was crucial for us to conduct at least some preliminary research into other conversational LLMs in the market. As such, we first conducted a competitive analysis, with the aim of identifying patterns in UX and UI and establish a baseline for the best practices to follow in Stellantis' LLM.

Competitive Analysis: UI Patterns

We analyzed popular conversational AI agents (Chat GPT, Gemini, Copilot) along with similar OEM's experiences (Hyundai) and made note of predominant UI and UX patterns across these experiences.

Sample of some of the competitive audits we conducted (select image to enlarge).

What we uncovered

Most LLMs fit on a scale between 'Playful' and 'Conversational' to more 'Formal' and 'Informative'.

After discussing these findings with our design lead, we decided to follow a more informal and conversational tone for Stellantis' LLM, giving the impression of a human chat experience, but with the knowledge and capabilities of AI.

Define

After conducting our competitive audit, it was time to define the guidelines and requirements for the LLM. These would lay the foundation for our wireframes and higher-fidelity designs.

Defining UX and UI Guidelines

UX Guidelines

Ease of Use & Discoverability

Interactions should feel intuitive, following existing UX chat interface patterns, and requiring minimal learning or onboarding for first-time users.

Content Legibility & Readability

Vehicle model gallery

Conversation content should be clear, concise, and visually scannable. The hierarchy, tone, and pacing of responses should make interactions feel natural.

Transparency & Error Handling

Vehicle model gallery

Empower users through effective feedback and error handling. Ensuring transparency by making it clear that users are interacting with an AI.

UI Guidelines

Mobile-First Approach

Given that over 70% of Stellantis' page traffic comes from mobile, the interface should prioritize small-screen usability and readability, with the UI in larger breakpoints adjusting seamlessly.

Modern & Timely Style

Vehicle model gallery

Leverage common UI patterns from popular chat interfaces and other LLMs to create an intuitive interface. Provide a modern look and feel, utilizing subtle animations and visual cues to provide delight.

Cross-brand Flexibility

Vehicle model gallery

Adhere to the Stellantis Design System and ensure brand consistency across all interfaces. Create a flexible and modular UI framework that easily adapts to the different brands' identities.

UX Exploration

How should users access this LLM interface?

As we were defining our requirements, an important decision was how users should access this LLM. We wanted to make sure that the experience felt cohesive and integrated well in our users' shopping and research journeys. We explored the following options:

Option 1: Main Navigation Button

In this approach, the LLM interface would be accessed through a dedicated button in the main navigation bar. In doing so, we would avoid introducing new visual elements (such as a floating action button) that could obscure page content. However, because it blends into the navigation, this feature becomes less prominent and might be overlooked by casual users.

Option 2: Floating Action Button

This alternative consists of placing a floating action button in the lower-right corner of the page. The design invites immediate interaction with the chat interface while maintaining a clean, unobtrusive look. This pattern, frequently seen in modern AI interfaces, improves visibility and encourages user engagement without interrupting the browsing flow.

Option 2: Floating Action Button

Option 1: Main Navigation Button

In this approach, the LLM interface would be accessed through a dedicated button in the main navigation bar. In doing so, we would avoid introducing new visual elements (such as a floating action button) that could obscure page content. However, because it blends into the navigation, this feature becomes less prominent and might be overlooked by casual users.

Mobile

Desktop

Mobile

Desktop

This alternative consists of placing a floating action button in the lower-right corner of the page. The design invites immediate interaction with the chat interface while maintaining a clean, unobtrusive look. This pattern, frequently seen in modern AI interfaces, improves visibility and encourages user engagement without interrupting the browsing flow.

After exploring both options, we presented the concepts to stakeholders and design leads for feedback. The team agreed that the button should feel more visible and inviting to highlight the new AI experience.

In the end, we moved forward with the floating action button approach (option 2), as it struck the right balance between visibility, accessibility, and maintaining a clean, modern layout.

Design

Now that we had a clear idea on what the user experience would be like, we moved on to honing down what the UI would actually look like. This was a challenging yet gratifying experience, since we had to work with the constraints of Stellantis' main brands (Jeep, Chrysler, Dodge, and Ram), while also elevating the look to match that of what is expected from an LLM interface.

Low-Fidelity Wireframes

Creating wireframes was crucial to allow us to understand what types of answers we would be receiving, and to use as a framework to design for all these scenarios.

Final UI

In the end, we decided on a style that felt modern and elegant as would be expected from an AI experience, while still using subtle brand tones that could easily adapt to any of Stellantis' brands.

Templated Answers

We developed a system of templated response formats tailored to the initial requirements we had defined in the early design stages. By designing these components early on, we ensured that the interface could consistently present information in a clean, readable, and user-friendly way, regardless of the type of content returned by the AI. This approach not only enhanced visual clarity but also supported scalability and maintainability, allowing the interface to adapt seamlessly to different types of queries and outputs.

01/ Initial Chat Drawer

02/ Starting Screen

03/ Chat Interface

Desktop Mockups

Finally, we adapted the mobile designs to desktop. To align with common chat standards, we placed the LLM button on the bottom-right side of the page.

01 / Initial Chat Drawer

03 / Chat UI Interface

02 / Starting Screen

Final Prototype

To finish off the designs, we created an interactive prototype with subtle and intentional transitions and animations to elevate the overall experience. In the end, we were able to deliver a clean and smooth prototype, that was key for our client presentations and final developer handoff.

To finish off the designs, we created an interactive prototype with subtle and intentional transitions and animations to elevate the overall experience. In the end, we were able to deliver a clean and smooth prototype, that was key for our client presentations and final developer handoff.

To finish off the designs, we created an interactive prototype with subtle and intentional transitions and animations to elevate the overall experience. In the end, we were able to deliver a clean and smooth prototype, that was key for our client presentations and final developer handoff.

Reflections and Takeaways

Early research is crucial.

Even with our limited timeline, doing early competitive research and research on designing for LLMs was incredibly important. Our research defined our UX and UI guidelines, helped us have a clear design direction, and ensured we aligned with current standards for LLMs.

Communicate constantly with devs.

Having daily conversations and check-ins with our devs was imperative to ensure we were aligned. This close collaboration helped us make sure our designs were modern and innovative, while still being feasible.

Stay flexible.

LLMs and AI products in general are in an incredibly rapidly evolving field. As designers, we had to adjust accordingly, and maintain an open mind as we created different design iterations. We ensured our UI designs were modular and scalable, and could adapt to any changes in the future.