Dodge Mobile App

UI Design Case Study

Project Overview

This project involved designing the UI for an interactive Dodge vehicle exploration app — a digital experience built to bring the Dodge Charger Daytona to life on screen. My scope covered the full UI design across both mobile and web versions: screen layouts, user flows, wireframes, graphics, and custom iconography. Vehicle renders used throughout the app were delivered by the client and integrated into the design.

The app allows users to explore the car’s features in an immersive, gesture-driven environment: rotating the vehicle model, diving into the frunk, interior, charging system, and signature sounds, all from the palm of their hand — or from a desktop browser.

The visual direction was shaped by the Dodge brand itself — dark, powerful, and performance-first. Every screen was designed to feel like an extension of the vehicle: bold blacks, sharp typography, and high-contrast UI elements that stay out of the way of the experience.

Problem and Goals

Modern automotive brands face a challenge: how do you communicate the full depth of a vehicle’s features when customers aren’t in a dealership — or when a sales team needs a compelling, consistent tool for live presentations?

Static brochures and spec sheets fall short of capturing what makes a car feel exciting. The goal of this project was to bridge that gap with an app that functions as both a self-guided exploration experience and a structured sales presentation tool.

Key design goals:

Create an immersive first experience that hooks the user from the moment they launch the app
Make complex vehicle features feel approachable and explorable without overwhelming the user
Design a smooth onboarding flow that teaches interaction patterns without friction
Build a structured Auto-Guides system that empowers sales teams to run consistent, polished presentations
Maintain brand fidelity to Dodge’s bold, high-performance visual identity throughout
Deliver a consistent, responsive experience across both mobile and web platforms

1 2 3 4 5

Design Process

My role on this project was focused entirely on UI design — translating concepts into polished screens, building out the visual system, designing custom icons and graphics, and mapping the user flows and wireframes for both mobile and web. Vehicle renders were provided by the client; my work was to design the UI layer around them in a way that felt purposeful and on-brand.
The design process started with a deep understanding of two distinct user types: the curious customer exploring on their own, and the dealership sales associate using the app as a presentation tool. These two modes required different flows but a unified visual language.
Onboarding & Orientation The tutorial was intentionally minimal — four short steps using gesture illustrations to teach the core interaction (rotate, tap, explore) before putting the car front and center. A “Skip tutorial” option respects returning or tech-savvy users. The goal was to get users to the car as fast as possible.
Visual Identity & Atmosphere The UI uses a near-pure black canvas to let the client-supplied vehicle renders carry the visual weight. Red accents pulled directly from the Dodge brand system signal interactive elements, calls-to-action, and navigation. Custom icons and graphics were designed from scratch to complement the renders and maintain a cohesive aesthetic. The result is a UI that feels premium and on-brand without competing with the content.

dodge-ui-mobile-webapp_2026-03-24_13-31-05_bottommenu

Navigation

Navigation Architecture The app’s bottom navigation keeps the core feature sections — Shortcuts, Home, and Back — always within one tap. Within each explore section (Frunk, Interior, Charging, Sounds), directional cues and labeled entry points guide the user through the vehicle’s highlights without requiring them to read through dense documentation.

Mobile & Web The design was built for both mobile and web, requiring thoughtful adaptation of layouts, touch targets, and navigation patterns across screen sizes. Rather than simply scaling screens up or down, each version was considered independently to ensure the experience felt native to its context.
Iteration & Detail Particular attention was paid to micro-moments: the power button on the splash screen that sets the tone for the whole app, the circular charging animation, the sounds screen that frames the car on a racetrack for dramatic effect. These details reinforce the sense that the UI was designed specifically for this vehicle, not adapted from a generic template.

Key Feature and Screens

dodge-ui-mobile-webapp_2026-03-24_14-14-23

Splash & Launch Screen
A full-black screen anchored by the Dodge wordmark and a tactile power button. The screen sets the tone immediately — stripped back, deliberate, and on-brand. No clutter, no distraction. Just the logo and an invitation to begin.

dodge-ui-mobile-webapp_2026-03-24_14-17-32_tutorial

Tutorial Onboarding

A four-step gesture guide introduces users to the app’s interactive model. Clear silhouette illustrations and concise instructional text (e.g. “Tap and swipe to rotate car”) make the onboarding feel effortless. The experience is completable in under 20 seconds.

dodge-ui-mobile-webapp_2026-03-24_13-29-10

Interactive Car Exploration UI

The hero screen of the app — a full-bleed, immersive view of the Dodge Charger Daytona with a life-size human figure for scale. Vehicle renders were provided by the client; the surrounding UI, layout, and feature navigation were designed to frame the car without obscuring it. Feature shortcuts and navigation sit at the bottom of the screen, keeping the car at the center of attention.

dodge-ui-mobile-webapp_2026-03-24_13-34-00

Interior Features

An illustrated overhead car-interior view combined with an “Explore Interior Features” call-to-action. The iconographic treatment makes the section feel approachable and visually distinct from the exterior-focused screens.

dodge-ui-mobile-webapp_2026-03-24_13-36-43

Charging

The charging screen uses a circular arrow motif — a natural visual metaphor for energy flow — overlaid on the vehicle in a dramatic low-light environment. It communicates the EV nature of the car while keeping the aesthetic firmly in Dodge territory.

Sounds

The sounds screen puts the Charger on a racetrack, with Start and Stop controls surfaced prominently. This screen delivers the most visceral feature of the app — letting users actually hear the car’s performance audio profile. The cinematic backdrop makes it a standout moment in the experience.

dodge-ui-mobile-webapp_2026-03-24_14-25-04

Auto-Guides and Shortcuts

A structured library of guided presentation flows for dealership use. Each guide is clearly labeled with its title and step count, making it easy for a sales associate to select the right flow for a given customer conversation. The list design is clean and scannable, prioritizing speed and usability in a live sales context.

dodge-ui-mobile-webapp_2026-03-24_13-34-12

My Responsibilities

UI Design — screen design, user flows, wireframes, custom graphics & iconography, mobile and web versions. Vehicle renders provided by the client.

* All trademarks, logos, visual materials, and renders presented in this project are the property of Dodge and are used solely for presentation and portfolio purposes.