Fisker Design System - Icon Part

Refreshing Icon System for Fisker.
Duration
July 2022 - October 2022
Team
Digital Product Experience Team

Goal

To create consistent Fisker icons.

Ensure that every design team uses the same icon consistently throughout the project.

Outcome Overview

Improved the adoption rate and integration of the new icons.

By streamlining the design process and providing clear guidelines, we tried to facilitated more efficient and consistent icon design, ultimately contributing to a cohesive and memorable user experience.

Testimonial

The iconography work has been diligent, meticulous, and of high caliber. We could not have achieved this level of progress on the iconography project without you on the team.

Martin Linde, Design Director at DPS Team

Background

It was challenging to maintain a consistent brand identity.

Fisker has multiple design teams that focus on unique but related products. However, each team uses its own method for developing icon language. This has made it challenging to maintain a consistent brand identity across platforms.

Challenges

- Ensuring consistency in icon design

- Ensuring clarity and readability of icons across different platforms

- Determining the success of the icon design

While building a new icon system, I identified three key challenges.

CHALLENGE 1

How to ensure consistency in icon design?

Audit and User Research

Collected icons across platforms.

I collected icons and held design workshops to gather feedback, involving stakeholders and team members early on to identify potential issues and ensure alignment on icon design direction.

Research Findings

Icon weight revision required.

The weight of our icons needs to be revisited to ensure consistency with our brand identity. As typography plays a vital role in our visual identity, it is essential to reassess the weight of our icons and redraw them with thicker strokes, aligning them seamlessly with our typographic style.

Enhancing expression of our brand identity.

While our current set of icons is well-crafted, we aspire to create icons that not only convey concepts effectively but also embody our unique personality, allowing them to serve as true ambassadors of our brand.

Improving icon readability.

Readability of our icons is a concern, particularly when they are placed on diverse backgrounds. It is imperative to enhance their legibility, ensuring they remain clear and distinguishable in various visual contexts.

Preserving regulatory icons.

In the automotive industry, certain icons are subject to government regulations and must not be redesigned to avoid confusion. We should ensure these regulated icons remain unaltered while focusing our efforts on enhancing the rest of our iconography.

Streamlining the
Icon Design Process

Introducing the Icon Intake Form.

To enhance the efficiency of our icon design process, we need to implement a refined approach that optimizes workflow. Instead of relying on extensive discussions with PMs and designers, I have developed an Icon Intake Form that allows team members to submit essential requirements directly.

Icon Guideline Creation

Boldness, minimalism, simplicity.

Fisker’s icon design guideline emphasis on boldness, minimalism, and simplicity, ensuring that icons are stripped of any unnecessary details.

By adhering to this guideline, we can achieve a consistent and visually cohesive icon system that aligns with Fisker's brand identity.

CHALLENGE 2

How to make icons clear and readable across different platforms?

Icon Creation
Consistency

Use Figma to create vector-based icons.

In our previous icon design workflow, designers utilized various platforms such as Sketch, Adobe Illustrator, or Figma, leading to challenges in unifying these designs into a consistent vector-based format. To address this, we streamlined our process by adopting Figma exclusively for creating vector-based icons. This approach not only ensured uniformity but also allowed us to maintain scalability in our iconography.

Icon Creation
Consistency

Pen-tool usage guideline.

To ensure alignment, I have also created a concise guideline outlining pen-tool usage and the process of creating icons in Figma. This resource serves as a reference for all team members, fostering a shared understanding and facilitating consistent icon creation in the future.

Icon Size Consistency

4 icon size variations.

Recognizing the need for platform-specific icon variations, we developed a comprehensive set of four different sizes within our design system. This approach ensures that our icons are optimized for various platforms, allowing for seamless integration and consistent user experiences across different devices and interfaces.

Icon States

Considering different icon states.

Some icons in our project were required to represent different states to aptly convey various situations and scenarios. To address this, I developed multiple icon states, enabling a seamless transition between these states as needed.

CHALLENGE 3

What criteria are used to evaluate the success of an icon design?

Refining the Process

Established criteria for evaluating Icons.

When initially creating the icon guidelines, I found the internal icon review process challenging because everyone seemed to have their own opinion about what makes a good icon. After going through it several times, I realized it's crucial to establish criteria for evaluating icons.

Implementation

Icon alignment workshop.

The success of an icon system depends on everyone on the team buying into it. To ensure accessibility of icon guidelines to all designers in the team, a workshop was held among all design teams.

Key Results

+45%
Icon Recognition Rate Test

Users can easily identified the icons.

Before the implementation of the new icon design system, user recognition of the icons was at a modest 40%. However, after the redesign, the recognition rate skyrocketed to an impressive 95%. Users quickly and easily identified the icons, indicating a significant improvement in the clarity, intuitiveness, and visual distinctiveness of the new icons.

+59%
Icon Adoption Rate

Team adopted the new icons.

Prior to the introduction of the new icon design system, the adoption rate of the icons within the design and development team was relatively low at 40%. With the implementation of the redesigned icons, the adoption rate among the team members surged to an impressive 99%. This increase indicates a successful integration and acceptance of the new icons into the team's workflow and design practices.

My Learnings

Design System Expertise.

Being part of the team that conceptualized and built an entire icon system from the ground up was an incredibly rewarding experience. It not only expanded my knowledge of design system principles but also taught me valuable lessons in effective cross-team collaboration and clear communication.

Effective Feedback Management.

While designing icons, I received feedback from various stakeholders. Choosing which feedback to use was challenging. To solve this, I started carefully recording my decisions and their reasons. This kept me organized, helped in future discussions, and made the design process more transparent.

Arrow Up