Fisker Design System

Establishing, creating, and documenting a design system for an electronic automobile company.
Duration
July 2022 - Mar 2023

Team
Fisker Digital Product Experience Team

What was the problem?

Each team was using their own design components.

Fisker has multiple design teams that focus on unique but related products. For example, we have the in-car interface design, digital app and web design. As Fisker expands and introduces new products, features, and platforms, it became increasingly difficult to maintain a consistent brand identity and design language.

Goal

Implement a design system.

We realized that there is a need to develop a design system for our projects to ensure the consistency of Fisker interfaces and provide drivers with a simplified and consistent experience.

Outcome

- Establishing and documenting digital brand guidelines, a design system, and extensive product audits.

- Every component has detailed designs, examples, code and redlines that underwent many iterations and stakeholder review prior to release.

- Each item, including each icon, has its own competitive benchmarking, concept, design iterations review and refinement process.

My Work

Redesign components.

Redesign components to better align with team needs.

Documentation.

Walk through the uses cases of different components, build documentations and educate design teams.

Push for a11y from the design sides.

Create documentation for specifications related to accessibility.

Icon Design.

During my tenure at Fisker, I took charge of consolidating the Icon Design Library and creating an icon guideline to meet the needs of future teams.

CHALLENGE 1

How to rebuild the design system while designing the product?

Market Research.

Analyzing competitors like Tesla, Rivian, Lucid Motors, and Polestar involves studying how they use design components and patterns to solve common challenges.

-How they used the visual and interaction design language to communicate brand identity and user experience.

-The strengths and weaknesses of their design system, and how Fisker’s design system can improve upon them.

User Research.

Designers are indeed the everyday users of design systems. So we started with an internal kick off meeting to ask everyone about their experience using the system, what they liked and didn't like, and what could be improved.

Findings

Existing documentation was fragmented.

There was a lack of documentation parity between what was provided in design libraries and in documentation of the built components.

Incomplete system was hindering progress.

Not every component was built, and there was a lot of wasted time between engineers and designers trying to juggle what they could and couldn't use.

Difficulty scaling.

Currently there is no way to ensure that everyone is using the design system consistently and effectively.

Lack of accessibility standards.

Current designs lack of the specifications about accessibility.

Process Optimization

Embed design system workflows more deeply into engineering processes and structure.

Instituting our project tracking systems in JIRA helped us align and keep track of parallel progress with components in development.

Design
Documentation

Work with developers to create more dev-oriented design documentation.

It’s quite important to have components rules to articulate each how should each components be used in different scenarios. We decided to include info and guides for each component in Figma. Different components require different types of documentation.

Consider Different Use Cases

Take button design as an example.

While revamping our design library,  I had a hands-on role in reworking various components like the button set, task blade, toast, decision modal, and stepper, among others. In my approach to button design, I identified the potential statuses in which buttons might be used. The goal with the docs is to make it clear what each button is for and how to use them.

CHALLENGE 2

How can we create a cohesive and consistent system?

Gather Materials

Audit.

Our design team used the first week to audit different platforms and UI libraries used by Fisker products; and gathered hundreds of product screenshots. We audited and consolidated into themes that were then prioritized by importance and impact.

Process

Create Style Guide.

Based on Fisker’s branding guide, we created a style guide including typography, color, and grid.

Baseline

Pushing for a11y from the design side.

We signaled that a11y was a non-negotiable consideration when building components. Things are covered in documentation: voiceover choreography, large screen viewers, dynamic text scaling, color contrast checks.

Design Tokens

Always in the process of learning.

As Figma's features continue to evolve, we are actively updating our design system. Currently, we are implementing design tokens for the Fisker design system using variables and modes, allowing seamless and dynamic switching between different contexts, such as light and dark themes.

My Learnings

Design system is not something static.

- Being a member of the team that designed and built a design system from the ground up was a fantastic experience. Working on this project taught me a lot about component design.

- Design system needs updating and constantly communicating to each other. It is all about the team front-to-back working together.

Arrow Up
Arrow Up