One of my proudest accomplishments as a designer is the creation of Firefly, a design system that I built using the atomic design method by Brad Frost. This design system was created with the goal of improving the user experience across our products by providing a consistent and cohesive design language.
The creation of Firefly began with thorough research and analysis of the our needs and target audience. I then established a set of design principles and guidelines to ensure consistency and coherence in the system. The next step was to break down the interface into its smallest components and build them up into a structured system, incorporating user testing and feedback along the way.
The end result was a design system that not only improved the user experience for our products, but also streamlined the design process and enabled the product & tech teams to deliver consistent and high-quality designs in a shorter amount of time.
In this section of my portfolio, I will take you through the process of how I created Firefly, showcasing the research, design principles, and implementation of the design system. Thank you for visiting and I hope you enjoy exploring Firefly as much as I enjoyed creating it.
Overview of Firefly in Figma
Research
Before setting up the Firefly design system, I conducted extensive research into the best practices for setting up and managing design systems. I drew inspiration from leading companies in the industry such as Airbnb, Spotify, and Uber, who have successfully established and maintained large scale design systems.
During my research, I studied the design principles, guidelines, and methodologies that these companies used and how they evolved over time. I also looked into the tools and technologies that they used to manage and document their design systems.
This research helped me to understand the challenges and opportunities that come with establishing and managing a design system, and gave me the knowledge and confidence to create a design system that was tailored to our specific needs and our target audience.
Design System Research
Atomic Design Method
The research I conducted into setting up and managing design systems informed my decisions on how to create Firefly using the Atomic Design methodology by Brad Frost.
I chose to adopt the Atomic Design methodology by Brad Frost as the foundation for setting up our design system because of its modular and scalable approach to design. The Atomic Design principles provided a clear structure for creating consistent and scalable design components that could be easily reused across different projects.
By breaking down UI elements into atomic units like atoms, molecules, organisms, and templates, I ensured that our design system catered to our company's unique needs. To tailor the methodology to our specific requirements, I customised the naming conventions, design guidelines, and components to align with our brand identity and user experience goals. This approach not only streamlined our design and development processes but also facilitated collaboration between designers and developers, enabling us to create cohesive and user-friendly interfaces that resonate with our company's values and objectives.
Atomic Design Method in Figma
Although our company hasn't transitioned to React yet, we have a future plan to adopt it for our projects. In the meantime, to implement the design system effectively, I devised a practical solution by creating a live component library using Tailwind.
This library serves as a centralised hub where developers can access and utilise pre-designed components by simply clicking to copy code snippets. By offering this resource, we've significantly accelerated the development process and ensured consistent design implementation across all our products.
This approach not only bridges the gap between design and development but also sets the stage for a smooth transition to React when the time comes, enabling us to maintain a coherent and efficient design system throughout the evolution of our technology stack.
Examples from the component library built with Tailwind & some illustrations
