Industry
Automobile
Company
Fisker Inc.
Creating Fisker’s Unified Icon System
Building a scalable and consistent icon library for Fisker.
Impact
We enhanced cross-platform consistency, streamlined workflows, and significantly improved user recognition and clarity.
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 Fisker
Problems
01
Lack of Consistency Across Design Teams
With multiple design teams working on different but related products, each team has developed its own approach to icon design. This has resulted in inconsistent icon styles, making it difficult to present a unified brand identity across various platforms.
Problems
02
Fragmented Icon Language
Each team using different methods for developing iconography has led to a fragmented icon language. Without a standardized system in place, the icons across Fisker’s digital platforms do not always align, making it challenging to ensure a cohesive user experience and maintain brand recognition.
Goals
To create a cohesive set of icons that ensure consistency across all platforms, are easy to use, and grow with the brand.
Challenge
How might we design icons that scale across different screen sizes and platforms without losing clarity?
Design Process
01
Creating an Icon Grid System for Scalability
To ensure our icons worked seamlessly across websites, mobile apps, and HMI interfaces, scalability was key. I began by designing each icon on a carefully crafted grid. This approach helped maintain alignment and proportion, making the icons adaptable across different platforms without compromising on consistency.
02
Making Vector-Based Icons Flexible
We used Figma to create vector-based icons, which not only ensured smooth scalability but also made collaboration effortless. Teams could easily tweak and refine designs as needed. To address platform-specific needs, we developed three sizes—small, medium, and large—ensuring the icons looked sharp and polished, whether they were displayed on a mobile device, website, or in-car system.
Challenge
How can we manage conflicting feedback from teams while keeping the design system consistent?
Design Process
01
Finding the Balance in Team Feedback
Designing icons is one of my favorite parts of the process, but it comes with challenges—like balancing conflicting feedback. A great example is the icon for Fisker’s exclusive California Mode, a feature that opens eight glass panels to transform the SUV into a convertible.
To create this icon, I needed to fully understand the feature, which includes dropping the windows, rear panels, and SolarSky roof simultaneously—a complex action to communicate visually in a simple, impactful way.
02
Aligning Diverse Perspectives
The challenge came from balancing differing priorities. The design team focused on capturing the experience true to Fisker’s brand, while product managers prioritized clarity so users could instantly understand the icon.
To address both, I facilitated discussions and created iterations that met aesthetic and functional goals, ensuring the icon aligned with the design system and satisfied all stakeholders.
Challenge
How might we use user testing to improve icons when designs don’t perform well?
Design Process
01
Understanding the User’s Perspective
Icon design isn’t just about creating visuals—it’s also about how users interact with them. One time, a product designer shared feedback from a user testing session where users were confused about the open tailgate icon. They couldn’t easily identify where or how to open the tailgate based on the current design, which pointed to a problem in clarity.
02
Iterating Through Feedback
I went back for another round of design explorations, using the feedback to rethink the icon. After several iterations, I simplified the design and adjusted the metaphor to make it more intuitive. The lesson learned was that incorporating real user feedback is crucial in making icons not only visually appealing but also functional and easy to understand. By using data from testing, we ensured the icon was more intuitive and better aligned with user expectations.
Design Process
03
Designing with Context in Mind
Another valuable insight from this experience was the importance of considering the icon’s context. For the “open tailgate” icon, it wasn’t just about designing an action—it was about understanding the different states the icon might represent, such as various statuses or situations. Moving forward, I refined how icons were presented by placing them in real-world contexts during reviews, helping stakeholders better understand their purpose and impact.
My Learnings
01
Design System Expertise
Being part of the team that built an entire icon system from scratch was an incredibly rewarding experience. It deepened my understanding of design system principles and taught me the importance of balancing consistency, scalability, and usability.
02
Effective Feedback Management
Throughout the process, I worked with diverse stakeholders and often faced the challenge of managing conflicting feedback. I learned the importance of documenting decisions and explaining the rationale behind them. This practice not only kept me organized but also ensured transparency and alignment across the team, making future discussions more productive.
03
Design Systems are Ever-Evolving
One of the biggest takeaways was that a design system is never “finished.” Like a building, it starts with a solid foundation, but it needs regular updates and communication to stay relevant. It requires constant collaboration between all teams—designers, engineers, and product managers—to ensure that the system grows and adapts to new challenges.
