Nectar Design System
Kandji makes managing a fleet of Apple devices simple and efficient. These powerful tools lacked a coherent visual and interaction language, and product teams were creating redundant and inconsistent UI patterns.
I led a small team of designers and engineers to craft and implement Kandji's first design system to accelerate product teams and create a more coherent and consistent experience for our customers.
OVERVIEW
Objectives
I defined several objectives to hit throughout our journey:
• Create and document common patterns and workflows that were currently lacking
• Eliminate redundant and duplicate components
• Streamline the fragmented tooling for designers and developers
• Accelerate design and developer velocity and productivity
• Collaborate across product to create a unified and coherent user experience
My Role
As the lead staff designer and manager for design systems, I managed another senior designer and two engineers.
I was responsible for the planning and delivery roadmap of the design system, as well as leading the strategic adoption and implementation plan across our product.
I was also the lead designer for the design system itself, creating the foundational visual and interaction elements, components, patterns, and layouts.
In addition, I set up the initial documentation repository and collaborated with another designer to write content guidelines.
I was engaged with both executive leadership and partner designers and teams to communicate progress, gather feedback, and guide implementation.
Lastly, I was the primary designer that redesigned all of our core interfaces across product in collaboration with the many designers on our team.
Initial Investigations
Audit and Roadmap
Identifying the surfaces and current features for components, workflows, and patterns.
Brand Collaboration
Collaborating with brand and design team on foundational elements of color, type. We selected a new product typeface in this process that better reflected our brand and had improved readability and type features. In particular we chose a typeface that performed well when used in high density data - a common pattern in our interfaces.
Creating Foundations
Color, Type, Tokens
I created the foundations of our design system to resonate with our brand identity. I crafted the base foundations through grid, spacing, typography, color, and layout. These existed as tokens in code, and variables in Figma. Base colors (such as our selected blue) would be linked to a semantic token (such as primary-button-background)
Layouts and Containers
I also defined layouts and containers through which our interfaces are structured and expressed as organizational modules.
These foundations combined with defined layouts and containers provide a strong structural ground for designers to build cohesive and consistent interfaces.
Component Design
Care and Craft
Components were designed such that designers and developers can identify their use cases, and manipulate the component properties available to fit their needs. Figma properties and coded component properties were built with a 1:1 relationship - design handoff to developers were more seamless than ever.
As a principle, components were designed with flexibility in mind - a robust range of properties, variants, and corresponding usage guidelines allowed designers to easily adapt the design system without feeling constrained or limited. Through the design process, these components were tested together through rounds of stress testing against existing and conceptual features.
Accessibility
Considerations for color, type, and layout accessibility applied throughout the design process. Key functionality such as keyboard controls were defined throughout the system.
SUPPORTING DOCUMENTATION AND PROCESSES
Documentation
Using Figma, Zeroheight, and Storybook, our entire design system was thoroughly documented. Usage guidelines, code examples, available props, and design rationale were made available as a shared resource for design and engineering.
Governance and Contribution
Early involvement from design and front end engineers had multiple benefits. I wanted the team to have full buy in from the beginning through their input, contributions, and feedback. A regular cadence where design and engineering could discuss, contribute, and share knowledge allowed early adopter feedback and continued contribution.
I also set up processes that allowed teams to propose, modify, or improve on elements of the design system.
Implementation
Advocacy, Education, and Strategy
From day one, I knew that the greatest challenge is the adoption and experience for designers and engineers - in many ways Nectar was a product in itself, where our customer was our own teams.
I created a flexible implementation strategy objective was to provide multiple methods of how to adopt the design system that provided flexibility and adaptability to fit a team's roadmap, resources, and goals.
Not everyone was familiar with the concept of a design system, so I further created supplemental resources and reached out to familiarize and collaborate.
A featured interface completely revamped with components, patterns, and design principles from the design system.
Outcomes
While we steadily delivered incremental value throughout our design system process, in 9 months we felt comfortable with the 1.0 release:
• A Figma component library complete with color styles, typography, semantic tokens, complex components, and motion design
• Parallel code that mirrored the designs
• Documentation of component design and usage, patterns and layouts, best practices, and guidelines
• An organizational culture and excitement for learning, adopting, and contributing
• Roadmap for continued development and iteration
• Flexible implementation plan
• Contribution and governance model
• A front end guild setting best practices and quality control across design and code
• A measurable increase in design and code process efficiency
• Improved ergonomics and designer/developer experience
• Qualitative improvement in perceived quality and user experience
• Vastly improved design and code consistency across the product
Ⓒ 2024 ROBIN FU 付如斌