Component Library
Date
2020-2025
Role
Lead Designer
Tools
Figma
Jira
Problem
Lack of consistent, repetitive design work, poor collaboration, and slow development cycles.
Different designers and developers create variations of the same UI elements, causing a fragmented product user experience. Communication between design and development teams is challenging without a shared language and reference point, leading to misinterpretations. Time spent debating design details and recreating components significantly slows down the development process.
Solution
Design and build an enterprise design system to ensure UI consistency across all channels. Establish UI patterns to share with internal and external designers, front-end developers, and vendors.
Design in Figma
Code in Storybook
Build in WP
Process
Engaging cross-functional teams and involving multiple team members required a well-defined process to ensure satisfactory output.
UX defined process outlined above.
Design in Figma
Built with simplicity and flexibility in mind, FYBR contains 42 components, built from smaller UI patterns (organisms, molecules, and atoms according to atomic design). The fewer components, the better. Flexibility is built-in nested base elements.
SOLUTION 1
Components / Organisms : Alerts, Banners, Badges, Breadcrumbs, Charts, Colorblocks, Faqs, Form, Global Navigation, Heros, Imageblocks, Modals, Newsletter, Plan Cards, Rich Text, Textblock Cards, Testimonials, Titleblocks
Base Elements / Molecules: Button-groups, Forms, Lines, Lists, Tabs, Textblock, Titleblock, Prices
Foundations / Atoms: Body copy, Buttons, Headlines, Icons, Inputs, Logos, Tooltips, Typography, QR codes
Components
Designed with inherent flexibility by incorporating nested UI patterns. Additionally, each component has the expected functionality documented for development.
Code in Storybook
Front-end developers build the component into Storybook.
Storybook is an open-source tool for building, developing, and testing UI components in isolation. It provides a dedicated environment where designers and developers can create, preview, and document components without dealing with the complexities of integrating business logic or data.
Solution 2
Build in WordPress
Front-end developers build the component into Storybook. React? Isolating the code, as the single source of truth.
Solution 3
