Design system
Role: lead designer
Situation
Atheneum lacked a design system, leading to visual inconsistency and inefficiencies across their products.
Task
My goal was to create a comprehensive design system that provided reusable components, ensuring consistency and saving time for both designers and developers.
Project success
🎯 Reusable components saving time for design and development.
🎯 Comprehensive documentation making it clearer as and when to use components.
🎯 Assessable components ensuring more inclusive products.
Actions
I began by establishing core elements like fonts, colors, and spacing, then moved on to components, collaborating with a cross-functional team to ensure technical feasibility and business alignment. I documented the process on Confluence and implemented the design system in Figma and Storybook for easy access.
Result
We launched a Figma library and Storybook repository with the initial components, enabling a consistent user experience and more efficient design and development processes. The system remains iterative, with future refinements planned.
Outcome
This is an iterative process and will continue as we refine and add further components to the design system.
We now have a Figma library with the components we need initially, and Story book where the code and documentation regarding components can be accessed.
Personal highlights
Getting to see the design system take shape, specially coming from a place where there was no existing style guide in place.
Working on the design system has greatly enhanced my understanding of bridging the gap between design and development through a shared language.
It's been a valuable reminder to step back and carefully assess the components we use, ensuring we define their purpose based on functionality rather than solely their visual aesthetics.
Note: this case study follows the STAR framework and is intentionally concise to provide a brief overview of the project. If you'd like to learn more, please feel free to reach out!