Automatic Pro: The connected car for the rest of us

Co-founder, Head of Design and Product (2016)

Automatic was my first startup, with the goal of unlocking the data stored in just about any car to make driving safer, more efficient, and fun. Our third product was a cellular car adapter that plugs into your car's diagnostic port and streams data to our servers, which gets presented in the Automatic app.


This was our most ambitious product to date, and it shipped on time to awesome customer ratings (4.5+ stars in the App Store) and glowing press reviews.

Where is it now?

Automatic was acquired by SiriusXM in April 2017 for $100M+. The Automatic Pro app was the foundation for all future projects until May 2020, when SiriusXM shut down the division.

The Wall Street Journal's review of Automatic Pro

Eric Horacek: Engineer, OpenAI (formerly at Automatic)
“The output of the design team led by Ljuba was always top-notch: fully fleshed out, systems-oriented, user-tested, and beautiful. This consistency was grounded in Ljuba's tireless advocacy for the user and strong adherence to the design principals he pioneered."

The Setup Process

We paid special attention to the setup process, which is on display in this YouTuber's walkthrough video.

Design Goals

  1. Create a single app for everything about your car. Internally, we called it the "operating system of your car".
  2. Accommodate first-party features like parking reminders, diagnostic monitoring, and crash detection.
  3. 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)
  4. 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.
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Arjun Mehta: Product Design Lead, LTSE (previously at Automatic)
"Ljuba led our team of designers and engineers to conceive of and build an immensely scalable product framework. His holistic, reasoned, and disciplined approach helped us find the solution that met every one of our company goals. This was some of the best work of our careers!"

Team Communication

For such a complex product, with dozens of designers, engineers, marketers, customer support and QA folks involved, we developed a set of written App Guidelines (a la Google's Material Design Guidelines and Apple's Human Interface Guidelines).
Our Guidelines explained the product and design philosophy of the app and gave everyone in the company a common language and context for the product to help them collaborate across departments.
The design team also built a single source of truth for UX specs and a Component Library so that any engineer, product manager, or customer support agent could always look up how exactly the app should behave at any given time.

Read More

Ljuba Youngblom


Copyright © 2024 Ljuba Youngblom