Tara Wilkinson UX/UI Portfolio

Project Overview 

UConnect 5 is Stellantis’ next-generation in-vehicle infotainment system, designed for use across multiple Stellantis brands, including Maserati, Jeep, Fiat, and others. 
As part of the Harman UX/UI design team, I collaborated with designers, engineers, and vendors to deliver brand-specific themes, multilingual experiences, and production-ready visual assets for a vast ecosystem of screen sizes and vehicle categories. 

The Challenge 

Stellantis needed a unified infotainment platform that could scale across: 

• Multiple brands with distinct identities 

• Dozens of vehicle models 

• Different screen shapes and sizes 

• Global markets requiring multilingual support 

The system had to be visually cohesive, brand-authentic, and technically implementable across varied hardware environments. 

Core Challenges Included: 

• Creating unique themes for luxury, performance, and mainstream brands 

• Ensuring visual quality across large, ultra-wide, and small displays 

• Designing animations and icons ready for automotive-grade deployment 

• Balancing artistic vision with strict hardware and performance constraints 

Users & Context 

UConnect 5 serves millions of drivers across diverse regions. 
Primary user needs included: 

• Clear visual hierarchy for glanceability while driving 

• Brand expression that enhances the emotional experience of the vehicle 

• Intuitive interaction for navigation, media, climate, and vehicle settings 

• Legibility under a range of lighting conditions 

The design system had to feel premium, responsive, and intuitive across all vehicle classes: from entry-level Fiats to high-performance Maseratis. 

Design Tools 

• Adobe Photoshop — High-resolution backgrounds, textures, and visual treatments 

• Adobe Illustrator — Iconography and vector assets 

• Adobe After Effects — Motion design for loading animations 

• InVision — Interactive prototypes and cross-team reviews 

Design Process 

1. Brand Immersion & Requirements Gathering 

Our team collaborated with Stellantis (formerly FCA) to understand the brand identities across their portfolio. 
We analyzed each brand’s: 

• Visual language 

• Color palettes 

• Material finishes 

• Interior design cues 

• User expectations 

This research guided our approach to iconography, layouts, and animations across the system. 

2. Multi-Brand Theme Development 

Each vehicle line required its own distinct UI theme, while maintaining the underlying UConnect system structure. 
This included: 

• Color palettes 

• Icon styles 

• Background artwork 

• Motion patterns 

• Typeface integration 

Because the themes would appear on multiple screen formats, we ensured that assets scaled seamlessly across: 

• Portrait and landscape displays 

• Large and small screens 

• Instrument cluster displays 

3. Asset Production & UX/UI Collaboration 

As part of the design team, I partnered with other designers to create production-ready UI artifacts, including: 

• Custom iconography in Illustrator 

• Startup loading animations in After Effects 

• Branded background images in Photoshop 

I also ensured that all assets were optimized for automotive performance (e.g., file size reductions, simplified vector paths, simplified animations). 

4. Multilingual Support 

We collaborated with a translation vendor to support a global audience. 

To ensure a seamless experience for all regions, we: 

• Adjusted layouts to accommodate long language strings 

• Tested alignment and truncation behaviors 

• Verified legibility across character sets (Latin, Cyrillic, etc.) 

• Ensured that icons conveyed meaning independent of language 

5. Engineering Collaboration 

Close collaboration with developers was critical to ensure feasibility. 

I worked directly with engineering partners to: 

• Validate that icons rendered correctly in the infotainment environment 

• Confirm that animations met performance constraints 

• Adjust color profiles for display accuracy 

• Revise assets based on real hardware tests 

This iterative process ensured the final UI maintained visual integrity across all vehicles. 

Brand Examples 

Maserati — High-End Luxury Theme 

For Maserati, we developed a premium black and gold palette that aligned with the brand’s luxury positioning. 
Key features included: 

• Accented gold highlights 

• Deep black backgrounds for contrast 

• Elegant, minimalistic iconography 

• A custom typeface created by a type foundry exclusively for Maserati’s infotainment system 

Jeep Grand Wagoneer — Passenger-Side Experience 

For the Jeep Grand Wagoneer, we designed a unique UI extension for the passenger-side screen, adding a second display that allowed passengers to: 

• Assist with navigation 

• Manage media 

• Control certain vehicle features 

This required a layout system that felt cohesive with the main screen but adapted to a distinct passenger use case. 

Alternate Color for Dodge Theme:

Fiat — Playful, Accessible Theme 

Fiat’s UI drew inspiration from the Maserati theme structure but used a distinct color palette aligned with Fiat’s bright, friendly brand personality. 
We focused on: 

• Lighter backgrounds 

• Soft shadow treatments 

• Simplified iconography for a more approachable feel 

This demonstrated how a single design system could flex across very different brand identities. 

Final Output 

Across the UConnect 5 ecosystem, we delivered: 

• Hundreds of UI assets (icons, artwork, animations) 

• Brand-specific visual themes 

• Responsive designs for multiple screen formats 

• A cohesive motion and visual design language 

• A globally localized system ready for mass production 

The result was a polished, highly scalable infotainment platform that brought unique brand storytelling into every vehicle. 

Outcome & Impact 

• Successful rollout across Stellantis brands including Maserati, Jeep, Fiat, and more 

• Fully localized global experience supporting multiple languages 

• High-fidelity assets ready for automotive-grade production 

• Cross-functional workflow between designers, developers, and type foundries 

• A unified infotainment system capable of scaling for years of future models 

Key Takeaways 

• Designing for automotive requires balancing brand identity with safety, usability, and government regulations 

• Collaboration between external vendors (e.g., type foundries, translators) adds richness and global usability 

• Real hardware testing is essential for validating color, motion, and rendering behavior 

• A modular design system ensures long-term scalability across brands and vehicles