Unifying notifications across products at Tesla
I was a product design intern on the Design Systems team at Tesla, setting standards across all software products, including the website, enterprise tools, mobile app, and in-vehicle interface.
Role
Product Design Intern
(Design System Team & Enterprise Resources Team)
Collaborators
Design System Lead
Director of Design
Development Team
Duration
4 weeks (part of 4 month internship)
Overview
Designing a notification system for Tesla
.gif)
Notification dropdowns are used across all Tesla products, including the website, mobile app, and in-vehicle interface.
Tesla users often missed important notifications due to inconsistent notification dropdown design across different platforms.
I delivered a notification system that included all notifications across products.
Goals
Create a unified notification experience that provides timely and relevant information to users, while ensuring ease of access and minimal disruption.
- Ensure users receive timely and relevant notifications.
- Provide a consistent user experience across all Tesla products.
- Allow users to manage and customize their notifications easily.
Definition |
Notifications are timely messages to call user attention to important information, updates, or call to action.
Before jumping into visual design, it’s essential to define the purpose and function of a notification dropdown in this design system
Notification Dropdown is one type of notification which provides an overview of both system and user initiated notifications.
It is important that they are brought to attention at the appropriate time and place. Incessant or irrelevant notifications can be disruptive for users.
The dropdown should only show medium to high critical notification messaging. These messages included cannot be missed by the user, as they will affect their workflow.
Unlike toasts, banners, and status messages, they should not involve recurring tasks like daily tasks/todos.
Unlike toasts, banners, and status messages, they should not involve recurring tasks like daily tasks/todos.
Notification Dropdown is one type of notification which provides an overview of both system and user initiated notifications.
Audit
Looking into internal use cases and external patterns
I conducted an internal audit of all of our notification dropdown use cases within Tesla
To understand the patterns our users might already be familiar with, I also looked into external patterns and notification behavior
Strategy
Creating a readable dashboard
The goal was to design a notification system that offers both contextual insights when a user is focused on a specific tool and a broader view across products when needed.
Global notifications provide a comprehensive overview across products, while contextual notifications are specific to the user’s current task or tool.
To ensure users can effectively navigate between contextual and global notifications:
- View Selection: A simple dropdown allows users to shift from the contextual view to the "All" view.
- Consistency in Design: While the content may change between contextual and global views, the visual design of the dropdown remains consistent, ensuring a familiar user experience.
Users appreciated the ability to stay within a tool and receive relevant updates without distraction, while also having the option to review all notifications across products when needed.
Proposal
Documentation for Design System
Usage
Used to call user attention to important information, updates, or call to action.
- Provides an overview and entry points to medium to high critical notification messaging
- Can include both system and user initiated notifications
Anatomy
Variants
Slots
Slots allow users to swap an icon or asset for each message
Additional Filters
Additional Filters gives controls to narrow down notification messages
Mark As Read
Mark As Read allows the user to mark all or individual messages as read
Behavior
Interaction
Clicking on a message navigates to a page that allows for action or further details. Once clicked, the message is considered read, and unread dot is removed
Responsive
Usage Guidelines
