Falcon Design System

Design systems are ever-evolving sets of reusable components, principles, and guidelines that give designers and engineers a shared language for consistent product and web design.

Good design systems help designers understand what to make and how to make it, but they also provide the rationale and motivation behind the design.

The design team faced challenges with component management and standardization. Without a unified approach, designers created components individually, either within project files or scattered across separate files. This fragmented system made it difficult for designers to collaborate effectively or take over each other's work, as each designer maintained their own unique component library.

The lack of clear documentation and guidelines around component states, behaviors, interactions, and use cases also created a disconnect between design and production teams.

I conducted in-depth interviews across three design teams who create digital products for wealth management. These conversations with both designers and front-end developers provided essential insights into their workflows and challenges.

Atomic Design

Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems. Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

• Alert
• Avatar
• Badge
• Button
• Card
• Dropdown
• Text input
• Text area
• Checkbox
• Radio
• Toggle
• Select
• Link
• Accordions
• Modal
• Progress bar
• Loading spinner
• Tab
• Tag
• Tooltip

Even though a design system is supposed to have a lot of components, which it did, our system of libraries won't have every component needed.

And that's where I came in. My job was to create these components, but also to watch out for new components designers come up with, and how we can graduate them into our library system or use them in isolation.

I always go for an organized look when creating a design system. This helps the designers locate components faster and allows for smooth collaboration between them and the developers.

The best way to make sure design systems are implemented perfectly is to document extensively. I also try to provide examples of how the components' source code should look.

This gives developers an idea of how it's going to be implemented.

• The design system is always a work in progress, and it is constantly being updated.
• Designers should be encouraged to override freely but with caution. Sometimes redesigning a component can lead to the growth of that component, so we need to override master components with caution.
• Creating multiple variants helps designers infuse content faster instead of creating from scratch.
• New hires adapt faster to the design style of the company.

1. Less time spent on coding
2. Better communication and implementation between developers and designers
3. Product development process was faster
4. New hires adapt faster to the design style of the company