Building Your Custom Kia is as Smooth as the Ride
Kia.com — Build & Price Experience
Role & Engagement
Creative Director, UX & Design Lead
(Ansible / IPG Mediabrands for Kia Motors America)
The Brief & Opportunity
Following Kia’s initial responsive site launch, completion rates for their primary digital lead generator—the Build and Price tool—dropped significantly, particularly among mobile consumers. The legacy configurator forced users through fragmented page loads, unwieldy scrolls, and confusing navigation paths when attempting to customize vehicle trims, colors, and packages. The objective was to completely re-architect and redesign the end-to-end configurator across desktop, tablet, and mobile to reduce drop-off, clarify pricing, and drive qualified eLeads.
Strategic & Creative Scope
End-to-End Experience Architecture
Directed UX/UI strategy, wireframes, user flow mapping, and high-fidelity responsive visual designs across desktop, tablet, and mobile breakpoints.
Cross-Functional Leadership
Walked executive client stakeholders through design rationale and partnered directly with Kia Motors America’s in-house engineering team to ensure high-fidelity implementation from comps to code.
Performance & Bandwidth Strategy
Implemented a lightweight asset architecture—including lazy-loaded option graphics and on-demand 360° spin triggers—to maintain rapid load times on mobile networks.
Key UX Solutions &
System Enhancements
Step 1
At-a-Glance Trim Comparison
The Challenge
The previous interface forced users to view trims one full page at a time, making direct feature and cost comparisons nearly impossible.
The Solution
Redesigned the trim selection tier into an at-a-glance comparison matrix, allowing buyers to evaluate specs, starting MSRP, and key differentiators side-by-side before committing.
Step 2
Decoupled Color & Interior Pairing
The Challenge
Grouping interior and exterior colors together inside mobile carousels created an awkward, high-friction customization loop.
The Solution
Separated exterior paint selection into a single visual grid view while dynamically filtering compatible interior materials and colorways that pair seamlessly with the chosen exterior.
Steps 3 & 4
In-Context Accordion Expansion
The Challenge
Exploring package details previously forced full page loads, confusing users when attempting to navigate back via browser controls.
The Solution
Replaced page redirects with inline, expandable accordion drawers that reveal package breakdowns, option specs, and high-res imagery without disrupting the user’s vertical position on the page.
Sticky Dynamic Pricing Engine
& Non-Linear Navigation
The Challenge
Users had difficulty tracking how individual add-ons impacted final vehicle cost and had to restart entire steps to undo previous selections.
The Solution
Engineered a sticky estimated price widget that dynamically updates in real-time as users add or remove features. Introduced inline item removal, allowing users to modify selections from earlier steps instantly without leaving their current view.
Performance Optimization & Mobile Governance
| UX Challenge | Operational Optimization | Technical Handoff Protocol |
| Bandwidth & Load Friction |
Heavy 360° visualizers and high-res asset dumps bogged down mobile performance. |
Implemented on-demand asset fetching, loading 360° spins only upon explicit user trigger. |
| Asset Overhead |
Deep package options bloated initial page payloads. |
Enforced lazy-loading protocols for package and accessory graphics upon drawer expansion. |
| Complex State Management |
Multi-step build configurations created state loss during back-navigation. |
Standardized persistent UI state tracking, keeping dynamic price updates and selected options unified across all steps. |
Impact & Deliverables
Industry Recognition
Garnered highly positive evaluations from J.D. Power for significant UX/UI consumer experience enhancements.
High-Converting eLead Architecture
Streamlined the multi-step sales funnel to eliminate drop-off points, optimizing path-to-purchase for mobile shoppers.
Seamless Engineering Handoff
Delivered fully comped, production-ready responsive systems directly adopted by Kia Motors America’s core web development team.
