A Design System for the Walulel product ecoystem to enhance consistency and create better developer and designer collaboration
A Design System for the Walulel product ecoystem to enhance consistency and create better developer and designer collaboration
The end goal was to have a design language and components which would help to assist designers and developers and create product consistency across the Walulel product ecosystem
When I joined Walulel, we were in a process of revamping our products with a new design language and style. We had four different products targeting different personas and the products needed to be more cohesive if users were switching from one product to another.
At the time, there was a huge lack of cohesiveness between the products. Bringing in a design system would help with fixing the issue of UI consistency and it would also save time when scaling our products in the future by enabling us to easily reuse components and styles when working with four products across our ecosystem.
Starting off, there was no system in place as far as design strategies or design files. So the first process was to take inventory of current products and everything associated with it. This inventory process included all the four products across the Walulel ecosystem including WaArtisan, WaInsight, WaCommunicate and WaPatron.
It was not an easy task. We would have to screenshot the different products, review all the existing user flows and business documentations and review them to make improvements and enhancements.
After inventory, the process of auditing could start. It meant taking stock of everything gathered, seeing what would be added to the system, what needed to be redone including fonts, icons, buttons etc and improving user flow.
This is my first major project of putting together a design system so I looked for inspiration from popular design systems including Airbnb, Atlassian and even the US Gov web design system.
As we rebuilt and redesigned our products, we would be creating our design system alongside, updating the style guide and adding in our components.
Because a design system is like a living "project", it was absolutely necessary to document everything in the design system. For this, I used a resource called "Zeroheight", which made documenting everything much easier.
I documented the components, the iconography and even the user research process. This document will be updated if we added a new component or added on a new feature with new icons or content.
The key takeaways from creating the Walulel Design system are a lot. There is the importance of documentation of the design system as it helps both designers and developers when working on the product ecosystem.
When new team members are added, they would have no problem going over the documentation for the design system and understanding how to start work on designing or developing.
The design system becomes a great recipe or handbook on where to start, what components are available to build up one of the products in the Walulel ecosystem.
