The Setup Process
We paid special attention to the setup process, which is on display in this YouTuber's walkthrough video.
Design Goals
- Create a single app for everything about your car. Internally, we called it the "operating system of your car".
- Accommodate first-party features like parking reminders, diagnostic monitoring, and crash detection.
- Create a design system that could speed up development of future first-party features (e.g. battery health monitoring) as well as third-party apps built with the Automatic API (e.g. pay-as-you-drive insurance products)
- Make the app feel simple to users, despite being extremely complicated under the hood.
Design Process
It was clear early on that such a complex product would need to be built using a scalable design system of components and UX patterns, held together by a simple metaphor.
Inspired by the Pixar movie Inside Out, in which characters represent a young girls' five core emotions, we conceived of the car as a cast or characters, each responsible for its particular job, like fuel level or parked location.
Over time, we refined the system and features to include no more components and interaction patterns than were absolutely necessary for a great user experience.
Draft designs of the parked location screen. Left: a design done in isolation. Right: A design created using an in-progress design system.
The final product was an app with dozens of features (characters), each with its own screen and the ability to post updates to the car's activity timeline (their way of speaking to the user).
Final designs of the car activity timeline (left), check engine light screen (middle), and Crash Alert screen (right).
Design Principles
We developed 5 essential product principles to help our design team move confidently through this massively complex project without having to revisit decisions we had already made.
- Support multiple paths to the same content
There is no single way to organize the app’s content that will make sense in all situations and for all users, so the app should support multiple contextual paths to the same content. This is especially important since the app contains so much varied content. - Context dictates content
Display whatever content is relevant on any given screen; users shouldn’t have to retain memory across screens. The same content may be relevant in multiple places. Redundancy is ok. - Adhere to established mobile design patterns
Express the app’s content and function with as few unique components and navigation rules as possible. This app is already very complex so the user interface should be as familiar as possible. Save your cleverness for one off elements of individual features, not the design system itself. - Modularize everything
Content appears in more than one place so it should be defined as self-contained and reusable modules. This applies to UI components, text lockups, and interaction patterns. - Follow the rules
A design system only works if the rules it is based on are followed. Avoid making exceptions (really!) even if it would improve the user experience. Instead, consider the design system as a whole and make improvements there so the whole app benefits.
These principles were a key to shipping this app quickly by shortening periods of exploration we didn't really need and keep us focused on what really mattered for the product to be successful.
For more about how we chose these principles and why they helped, check out this
blog post I wrote.
