The Cybertruck Challenge

Monitoring and controlling a Tesla Cybertruck with elegance and delight.

Fabio Basile
Fortnight
Published in
3 min readJan 21, 2020

--

It’s challenging to remain unfazed by the recently announced Tesla Cybertruck, with its marmite design, the futuristic looks of this polygonal beast were created by using the same _cold rolled_ stainless steel alloy featured on the SpaceX Mars rocket. It’s not difficult to imagine driving this thing around a neon-lit futuristic city, and we are not the only ones, it’s very likely it’ll be available to drive in Night City, the central location of the upcoming CD Projekt’s Cyberpunk 2077.

After a bit of research (and creative freedom), we challenged ourselves to refresh the Tesla app for iPhone: the app is used to monitor and control Tesla’s vehicles directly from a mobile device.

The App

The app is used to monitor and control Tesla’s vehicles directly from a mobile device. Still, for this challenge, we decided to concentrate our efforts on the home screen, and the Smart Summon functionality. Smart Summoning a car is darn pretty futuristic on itself, imagine having the ability to Summon your Cybertruck and see it drive around obstacles until it reaches its destination. The designs of the app need to match such futuristic functionalities.

Many apps let you connect to your beloved Tesla, all but one are unofficial. So we decided to stick to the core functionalities like climate control, charging information and geolocation as these are all standard features available on every model.

As a design & development studio, we couldn’t stop thinking what the final software for the dashboard and the companion mobile app would look like.

Fonts & Icons

We’ve kept the core features in our redesign but took the freedom of adding new icons and a new cool font to match that cyberpunk-esque design: we wanted the app to feel right at home in the futuristic settings of a Cybertruck. The font used (Stiff Staff by Bulgarian designer Borislav Petrov) is a decorative typeface, its unique sharp edges go hand in hand with the Cybertruck’s angular design.

The font’s unique design can decrease its readability, so it was essential for us to use it sparingly while still allowing for the app to look futuristic but most importantly, usable.

Animations Delight

The micro animations should delight the user but shouldn’t be overwhelming, they should tell a story in a few milliseconds and must be asynchronous, a user shouldn’t be blocked from accessing sections of the app by the animation.
On our mockup, the incoming Cybertruck animation on the first screen would get pretty tiring if it were to happen every time the app got launched and especially if it blocked users from accessing vital car functionality.

It’s easy to go overboard with unnecessary animations. We design experiences around the principle that apps shouldn’t be a Disney movie.

--

--