Process

How a lone designer excited the world with the Tesla UI

4 min read
Christopher Gillespie
  •  Oct 5, 2017
Link copied to clipboard

Glasgow, Scotland is some 5,000 miles distant from the tech mecca of Silicon Valley. It’s better known for ship building than it is for sophisticated software. Yet in this cold, medieval burgh there exists a thriving digital design community and among them, one lone UX designer whose keen aesthetic sense ensnared the world’s attention.

To be fair, his timing could not have been better. When the world was at the height of anticipation in waiting for details on how Tesla’s Model 3’s controls worked, Andrew Goodlad, a self-described “gadgets guy” stepped in and showed them. What he produced was so stunning that it briefly catapulted him into the public eye and earned him a response from Tesla itself.

Andrew Goodlad

Designing the future

When asked what he loves about cars, Andrew answers “Everything.” He obsessed over them from an early age, recalling that “If my parents tucked a car in my stocking, I’d play with that and forget the rest.”

As he grew up he found that sleek styling enthralled him. He was utterly captivated by the elegant whisper of high-performance engines and basked in the freedom of the open road when his family went for drives. But when engines changed, his interest kicked into high gear.

“I love the sound of a good engine,” says Andrew, “But as soon as they became electrified, my interest was magnified. They’re quicker, they’re quieter. It’s the future.”

“UX hasn’t been a priority for car companies. But now it’s becoming one.”

Twitter Logo

A college advisor suggested that his best entry point into designing them himself might be graphic or web design and he seized on it.

Once in college, Andrew became fascinated with software interfaces and cars took a backseat, idling in wait. He devoured books on UX and UI and stayed up until the early morning hours dissecting tutorial videos on his own. After several years things got to the point where he could simply see a software interface and mock it up within minutes. Nothing was safe from his design scrutiny. But then, suddenly, Andrew’s dual passions collided when Tesla launched the Model 3.

Car companies have a long history of poor UI

Car enthusiasts like Andrew generally agree that car companies have long sucked at user interfaces. He’s quick to point out how long it took for USB ports, navigation interfaces, and voice controls to make appearances, and how far their whole experience lags behind consumer products like smartphones. For Andrew, there are 2 reasons for this: car companies don’t want to rock the boat and UX often isn’t a big priority. “They just accept how it is. They don’t want to push the boundaries. But now, they have to.”

The launch of Tesla’s Model 3, the first car with a fully digital control panel, has galvanized the world’s designers. Software interfaces can be updated after cars roll off the lot and car designers are no longer limited by long development cycles. A barrage of car companies are following Tesla’s lead and are creating massive 17-inch screens inside their cars. Only, with Tesla’s Model 3, the company was irksomely light on details. Car and technology publications began grumbling and hungering for more. That’s when Andrew made an appearance.

The spark that lit the fire

Andrew streamed Tesla’s reveal event—the handover of the first 30 Tesla Model 3s to their owners—at 4am, and felt a twinge of disappointment. “It felt like Tesla didn’t share a lot. Maybe they were trying not to hurt Model X and S sales,” says Andrew. At home, he watched videos of test drives from different journalists and Tesla-obsessed YouTubers like Bjørn Nyland. Most were blurry, but he got the itch. “Wouldn’t that be great to mock the UI up?” he mused. The only problem was that he’d have to do it from blurry stills.

“It’s all about contributing something of authentic value to your community.”

Twitter Logo

As Andrew rewound the videos and snapped screenshots, it occurred to him that fundamental pieces of the interface were missing. He didn’t see the interactions for even a fraction of the buttons and controls, but thought he could make do.

“It’s about discerning their design patterns and filling in the blanks,” says Andrew. He got the sense that they were heavily using layers—from years of intense study he could tell that the main user interactions like the map and the autopilot were all built over a single display.

From what he did have, Andrew identified 3 main sections of the screen. Controls were at the bottom and non-essential functions on the left. Everything else was layered on top of that. He isolated the 4 background states—charging, navigation, whether the car was parked, and whether the speed was increasing. From there, he built up every page and interactions on top of it using InVision.

Some elements he agonized over, like the speedometer. “If you keep pressing the speedometer on the mockup, it goes up to 135. I kept it in there, but I was mindful and a little worried that maybe Tesla didn’t want to see someone doing that in a 70-zone, even in a mock,” says Andrew.

One might imagine that this process would take a designer weeks to produce the 31 slides. It took Andrew 2 evenings. Once finished, he had an interactive design that looked strikingly like the UI from Tesla’s videos.

Going live

At first, Andrew considered tweeting his design out and tagging Tesla and a few publications like Electrek, an industry magazine, but he was unsure. Would Tesla appreciate this or be upset? “I just thought, what the hell,” said Andrew. He tweeted and then posted it on the Tesla Reddit channel.

 

Responses flooded in instantly. “Not all heroes wear capes,” wrote one Reddit user, and others marveled over the awesomely interactive mockup. An editor from Electrek magazine sent him an excited private message asking to publish his design and asked if he’d consider animating a few more interactions.

“When they first used it they expected absolutely everything to be clickable, so I added a few more pages,” says Andrew. Electrek published an article on his design and TechCrunch and Mashable reached out shortly after. Then, he got an email from Tesla.

All in the pursuit of passion

Tesla just said they really liked it,” says Andrew, who remained tight lipped about the interaction. What he did confess was that this whole thing took him fairly by surprise. “I sort of intended it for Model 3 reservation holders and I didn’t think there’d be interest from beyond the UX / UI designer community.”

Andrew concedes that had he been looking for a job, this would have been a nearly perfect strategy. His work briefly appeared on the front pages of 3 publications whose combined monthly web traffic tops 80 million, prompting Tesla itself to reach out and congratulate him. All this came as the result of pouring one passion into another.

Could designers have similar success showing off their skills? Of this, Andrew is certain, although, he does feel that they should be careful about it. In the fast moving digital space, it’s about more than just getting attention. It’s about contributing something of authentic value to your community. If your work is good enough to get them excited, they’re the ones who are going to help you excite the world.

Collaborate in real time on a digital whiteboard