Genesis Cloud inherited a beautiful brand guide crafted by the renowned Pentagram studio. While this provided a strong foundation for visual identity, translating those guidelines into a cohesive user experience across the product proved challenging.
Genesis Cloud
Design System
2022-2024
Figma, Confluence, Chakra UI library
Stepping in as the sole designer at Genesis Cloud, I identified a critical gap – the designs weren't seamlessly translating into code, hindering development speed and consistency. To bridge this divide and create a unified user experience, I championed the creation of a comprehensive design system leveraging the Chakra UI library.
I conducted workshops with the development team to understand the challenges they faced in translating the brand guide into code. This revealed inconsistencies in interpretation and a lack of readily usable UI components.
I meticulously reviewed the brand guide and existing codebase to identify all potential UI components. I also analyzed design systems of leading competitors like Google Material Design and Atlassian Design Language. This resulted in a comprehensive library of elements like buttons, forms, and navigation bars.
Recognizing the need for a robust and efficient foundation, we chose using the Chakra UI library. Chakra UI's extensive pre-built components aligned perfectly with our core UI needs and offered seamless integration with the development team's preferred tech stack.
We defined core design principles based on research and industry best practices. The style guide documented typography, color palette, spacing, and other visual elements to ensure consistent brand identity.
We built a robust component library in Figma, utilizing Atomic Design principles. Each component was documented with detailed specifications, code snippets (for developers), and usage guidelines.
Comprehensive documentation was created for both designers and developers. This included a Figma library, in-depth component specifications, and best-practice guidelines.
Creating a Content System in conjunction with our Design System involves a variety of skills. Although I wish I could personally write all the guidance, it's not feasible. Instead, I've collaborated with the design and engineering teams to enhance the writing process by sharing tools and implementing a content system.
We review existing documents, identify key components, and provide guidelines for each. This not only saves time by ensuring consistent content standards but also, in conjunction with our definition dictionary, fosters cohesion in marketing and product messaging by creating a structured framework for all written content.
These are standardized snippets of text that can be employed in various contexts. In our templates, we incorporate headings, calls to action (CTAs), and other reusable text elements. This not only expedites the writing process but also maintains consistency across content.
The design system, built with Chakra UI, bridged the gap between design and development. Developers now have access to a library of pre-built, well-documented components, significantly reducing development time and ensuring consistent implementation.
The design system enforces brand consistency across all product features and interactions, leading to a unified and cohesive user experience.
The system allows for easy expansion as new features are developed, ensuring design and development remain efficient in the long run.
