Role: UX, Interaction, Design Integration
Tools: Illustrator, Expression Blend, Visual Studio
McLaren Automotive is world renowned for F1 racing and luxury sports cars, worthy of any track. Being on the team to work on the McLaren MP4-12C IRIS project was absolutely thrilling. From traveling to England, to playing with my designs on the road, to learning more than I ever expected about embedded SoC platforms, it was an honor to work on the project.
We designed and developed a complete in-car infotainment system which included a handful of app experiences: Media player, Phone, Contacts, Navigation and Settings.
Project approach
Our creative director kicked off the design process by working directly with product leadership at McLaren to establish the overall design direction and minimal vehicle inspired aesthetic. My role on the project was broad, though most of my efforts were focused on execution: creating layouts in design markup, maintaining documentation and the code version of our design system, overseeing technical production and integration of the design in to code, and helping with QA test efforts.
The field research for this project was quite enjoyable, looking at where the bar is set at the consumer level with BMW iDrive, and other offerings. I spent quite a lot of time seeking out existing research in the areas of automotive telematics and experiences. Driver distraction was a major topic, and there were some studies done that tracked eye movement in different scenarios in an effort to determine how much cognitive load is acceptable while driving, whether reading text or interacting with a voice driven system. We were also able to refer to some of the ANSI standards on touch screens and automotive systems.
Defining IRIS
As the project developed we continued to evolve and iterate on the design system which took direct cues from the McLaren brand guidelines. The IRIS system utilized a ruggedized, resistive touch screen display which could be operated easily while the car is running, even with gloves on. Our design system relied on a few key gestures, and part of making those work gracefully was achieved by working with the dev team to tune the touch driver for our specific display type and scenarios.
Solving performance issues
We ran into a variety of interesting software engineering and design issues over the course of the project. Many of them had to do with the nature of our platform, how new it was and that it relied on proprietary design markup and application code. We had serious trouble with both displaying and interesting with lists. Part of the solution was to virtualize the list, the other was to assemble the list item UI at run time using data templates. The templating part worked nicely with the evolution of system controls and helped insure consistency across the system. Another problem we had was with animation in the lower tray UI, the changes there ended up being to remove blur/transparency and to fine tune the animation key frames with an acceleration and a tidy stop.
App experiences
Phone, Media and Navigation were our hero scenarios for the IRIS project. As we defined these experiences, it really helped us stress test and build out the full design system needed to express the spectrum of scenarios we desired.
The Media player experience was designed with a direct connection in mind, supporting both a connected Phone or USB drive with Browsing and playlist support. Iteration on list interactions and item styles in Media was key to representing hierarchy and depth through out the product, especially in Navigation and Contacts. To help validate our early design approaches we leveraged driver feedback, paper prototyping and research in the areas of telematics and automotive infotainment systems.
Determining the approach for the GPS navigation experience in the MP4-12C entailed evaluating 3rd party solutions, and partnering to create an integrated experience, consistent with the rest of the IRIS system. I was the primary design point of contact, helping file and follow up on bugs, provide assets and specifications for adapting the user experience. An interesting insight from the project related to maps, was that the commercial aspects like licensing can directly influence the experience for end users, such as how detailed or current the map data is.
Localization was another big challenge we faced with this project. Our company worked with a local Linguist firm to have native speakers come in to evaluate our shipping languages, and give recommendations on UI text. Arabic presented the most nuance and learning opportunities for us. At one point we started building right-to-left layouts but were able to use the app platforms flow direction property to elegantly handle the scenario. Font mapping was also a bit interesting, we had to use a special version of Arial that is nearly universal.
After nearly 2 years of design and development we shipped in 7 languages across Europe, Japan, UAE, and US markets. The collaboration and coordination across continents was crucial to the project's launch, support from software and hardware suppliers around the globe, and remote development teams.
Over the source of the project we ran into some interesting technical challenges related to: hardware, software platform and application. I learned about driver development, embedded computer systems and using OS building tools. I used XAML markup in our app framework to define reusable UI elements and styles into a consolidated resource library. As the project progressed we were able to achieve performance gains by making styling more modular and utilizing data templates.
Featured porjects
Windows 10 OOBECorporate
McLaren IRISCorporate
Timeline MobileCorporate
Microsoft Launcher IconCorporate Design
Gravitron EPPersonal
Mobile WallpapersExploration
3D ArtPersonal Projects