The challenge

Create a physical & digital experience for demonstrating vehicle cellular connectivity.

My role

Lead the design of the vehicle user interface and design oversight on the device fabrication.

Credits

Tekna (Device Fabrication), AT&T (Brand)

Project Date

2013

Project Summary

AT&T wanted to tap into the auto industry as their next target to expand their services. Their leadership had identified the unique potential that auto manufacturers could provide to buyers if their vehicles were "connected" via cellular data.

To demonstrate this, they wanted to take all the tools and apps people had come to rely on — cell phone, navigation, calendars, streaming music, voice recognition, live weather, etc., and bring them into a car’s center console.

My duties on this project were to serve as the project's Lead Designer. I worked with a cross functional team, as well as two outside teams to bring this project to life.

Our mission was to create a prototype of this imagined car console ... and they wanted it in two months. We were tackling a new, high value concept on a tight timeline.

The idea was to create a world-class connected car demo visualizing how the modern consumer will interact with a car powered by AT&T cellular data services.


Official highlight reel by Universal Mind

Process

The team and I were able to start with a completely blank slate, and I was tasked with leading the design of the digital experience and the physical center console simultaneously.

Within the two month timeframe, our crew at Universal Mind delivered a working prototype of the “connected car”, with the development team pulling in services like TomTom, ParkMe, Spotify, The Weather Channel, Google Calendar, and existing AT&T services such as their Connected Home framework, which allowed users to turn off lights at home or even control their tv.

AT&T’s Emerging Devices Group was able to take their sales demonstration on the road to the car manufacturing industry, fully realizing the vision of the connected car experience.

Starting the project with a blank slate was a bonus, allowing me to design the user experience and the physical user interface at the same time. Given the tight two-month deadline, rough initial sketches progressed quickly to wire framing, design, development and deployment.

I worked closely with the team at AT&T to integrate their Connected Home framework features, which allows users to turn off lights, control their television and more with their mobile devices. The idea was that everything in your life is connected, and you should be able to take it with you wherever you go.

An emphasis was placed on safety from the very beginning. The belief was that even though a user’s phone should be out of their hands while driving, they don’t have to disconnect completely to stay safe. The screen in the front console shifts to a simpler mode with larger icons while the vehicle is in motion, for example, and video and other entertainment options are available only on the screen in the back seat.


Designing a physical product

This was one of the coolest things I have done. Designing a physical product is an awesome experience. Seeing the final artifact in person was impressive. I worked closely with a modeler at Tekna to prototype and define the physical features of the unit. There were several requirements for the center console. Some of the requirements:

  • Had to be entirely self contained.
  • TSA Portable, carry-on for salesman to travel with.
  • From concept to delivery in less than 2 months time.
  • Dedicated router, onboard power solution.
  • Mask that it’s an iOS device (No iPad chrome showing)

Designing the software user experience

When I started this project I had no idea how to design for vehicles. It was 2013, and most of the in-vehicle dashboard interfaces by major manufacturers were completely missing the mark when it came to connectivity and modern features.

The Tesla Roadster S (2008) was the first vehicle to really explore the concept of touchscreens in the vehicle on a mass production scale – displaying things like real-time data, estimated range, and power regeneration.

For this project, I had to become a student of vehicular human interface guidelines. I dug up every Google Scholar article I could on the topic and did tear-downs of the very few vehicular display experiences that were available. It was a new frontier at that time, and it was an exciting (and sometimes overwhelming) undertaking.

Final visual interface designs are showcased below.

As part of the design system, I identified key components to the success of the high fidelity user interface.

TYPOGRAPHY

The design language for this project relied on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid. Successful deployment of these tools was essential to help users quickly understand a screen of information from driving distance.

To support such use of typography, I selected Clearview ATT (AT&T’s emerging devices typeface) as it was more suited specifically for the requirements of UI and high-resolution screens. The family supported light, regular, bold, italic, and bold italic weights by default.

COLOR

The use color was primarily for emphasis.

Due to the unique nature of the project, certain considerations were made in order to execute the visual design in adherence with those who are visually impaired, or may be dealing with screen glare in the vehicle. Note that red and green may be indistinguishable to color-blind users. We tweaked the colors to be compliant at the primary driver’s viewing angles and light availability.

ICONOGRAPHY

We quickly established that we’d need a number of icons unique to the project. It was my job to define and design these, working with branding to get the approved.

Hero icons were the primary visual metaphors representing features such as “navigation” and “radio.” Each one employed a simple metaphor representing a single concept that most people could grasp at a glance.

Heroes were: radio, navigation, phone, home control, system settings, email, calendar, vehicle statistics, and all the different weather variations!

Action & Status icons were graphic buttons that represented the most important actions or status indications people would see on screen.

These included: Home, Back, Dismiss / Close, Collapse, Radio Controls: Play/Pause/Repeat/Shuffle/Forward/Back, Temperature, Locked, Video Feed and many others.


Collaborating with a Branding™ Team

Any project with a major brand requires a high level of diligence to ensure you’re meeting guidelines and helping to expand the brand footprint in an appropriate way.

During this project, my task was to take the existing AT&T branding guidelines and expand them to an entirely new product frontier in the vehicle experience. There was not a lot of work done at this time for even touch devices, so a lot of my work was outlining new human factors guidelines, mentoring and advising the internal team on best practices, and driving adoption and agreement on brand critical decisions during this tight timeline.

Working with an existing brand can be tough sometimes, however, I managed to find a truly pleasing balance when it came to the final output.


Results

The mock dashboard was delivered on-time and received with overwhelming enthusiasm.

The prototypes our team designed and built were placed into the hands of AT&T sales representatives to take to vehicle manufacturers and showcase possibilities.

AT&T would go on to found the AT&T Drive Studio in January 2014, and is now the market leader in connected car experiences.

Legacy:

Q3 2018 Numbers: Nearly 27 Million Connected Vehicles; 29 Global Brands; 1 million-plus Wi-Fi hotspot subscriptions