https://www.figma.com/file/laEvr7QwHpR6zXQdSycIyt/WeDance-Design-System-2.7?type=design&node-id=1%3A1180&t=j9JikLyIF1NE6kDR-1
We had a MVP ready and live. We were now looking to add more features.
WeDance was using the Tailwind UI kit, but it wasn’t suitable with out brand style as we progressed further in building and expanding WeDance platform.
We started our design sprints and we realised that it was important to have our design system first to maintain the design consistency across all the teams working on different sprints for various features.
The Problem: No design system defined.
The Solution: Create a atomic design sytem to define the brand guidelines, typography, colour styles and compenents.
The Process:
Step 1: During one of our planning meetings, we voted on which design process to work on. The Atomic design system received the most votes, as we could still use the Tailwind UI kit and adjust it to our brand styles. We conducted an audit of the website to determine what needed to be done and what could be re-worked.
Step 2: To further elaborate our approach, we initially deconstructed the website into smaller and more manageable components, which we categorized into three levels of complexity: atoms, molecules, and organisms. This methodology allowed us to have a more granular view of the website, which in turn enabled us to better understand how each component interacts with one another.
Few exaples of what I did here in this step is below:
Subsequently, we methodically listed each of these components in a Google spreadsheet, complete with their corresponding paths. This enabled us to have a comprehensive and organized view of the website, which we then used as a foundation for further analysis and optimization.
Defining color palette & color styles
Step 3: We re-created the components, this time following the WeDance style.