A year @ Fisker Inc.
At the beginning of 2022 I joined the Human Experience team at Fisker as a Sr. Product Designer working on digital products. My role started as a design lead on experiential and emotional products on web and in the experience centers; but as our team experienced growing pains, gaps needed to be filled and I transitioned to lead the ongoing design of our mobile app.
I’ve documented the largest projects below; containing mountains of work, many hats, context switching, and lessons learned (some harder than others).
Brand Icon Set
Objective
Create a cohesive icon set based on our brand to be used across our product ecosystem. Document best practices and standards to follow when creating new icons to ensure consistency as we scale.
DESIGN SYSTEM
VISUAL DESIGN
Identifying the Problem Areas
It’s clear from viewing the collection of existing icons above that there are lots of inconsistencies in line thickness, fill state, style, and even depiction. We needed the wipe the slate clean and base our visual design on a single foundation.
Design Approach
Our Icons are designed to reflect the characteristics of our Fisker Plate typeface (designed by Playtype), including angles, geometry, and line weight. Icons and copy are most of the time used together, therefore it’s important that they feel like a family that was designed together.
Final Icon Set
Connected Car
Objective
Work with the embedded engineering team, the app team, and the back end team to design the connected car features for the Fisker App. Effectively communicate the state of the vehicle and allow users to send remote commands.
USER INTERFACE
USER EXPERIENCE
Lots of time was spent working with the engineering teams to determine the actual behavior of all these complex systems to ensure our UX covered all the edge-cases.
Profile and key management is one feature that is accessible from multiple platforms.
Navigation and Range Estimation is pulled from the vehicle via cloud to the mobile app making it an extension of the vehicle.
Design Toolkit 2.0
Objective
Create a new robust design system using Figma’s new variable and modes features. Merge desktop and mobile design systems together to reduce upkeep. Increase consistency in our designs by reducing the need to copy and paste design, and document the design clearly for web and app developers.
DESIGN SYSTEMS
DESIGN OPS
Variable Tokens Everywhere!
Converting all our color styles to variables and introducing space tokens into out system allowed us to control platform specific scaling of components and prebuilt color themes using modes.
Every Atom, Molecule, and Organism; Responsive.
Switching between platforms is almost a single click away making parity features that must be designed for multiple breakpoints much faster to create, and more consistent.
Documentation Up the Wazoo!
In order to onboard everyone onto our new system we needed to create documentation to help guide designers through this new way of building and designing in Figma.
Annual 2022 Review
“Not only has he [Eli] been able to use his strong multi-disciplinary skill set to great effect for content, motion, and 3D configurator concepts. But his ownership of the UX/UI of the connected app has been a standout contribution. His strong team work, cross-team contributions, and attention to detail, specifically under very ambiguous circumstances have been exemplary.”
Martin Linde
Design Director of Digital Product
@ Fisker