Problem Statement
In 2020, the OPEN team, comprising over 20 designers and 30 frontend engineers, encountered several challenges. This happened because all these parts of the apps were designed at different times, by different designers having a different context. There was no unifying design philosophy or principles to guide them.
Responsibilities
As a Design Head, responsibilities include maintaining transparent communication with stakeholders regarding challenges, collaborating with individuals across diverse organisational roles, and making final decisions on discerning and incorporating relevant feedback. This ensures the construction of a design system that aligns seamlessly with the specific needs of the company.
Introducing
OPEN Design System
We established a library of nearly 250 reusable UI components for widespread application across the platform. This initiative significantly decreased the workload and time invested by both engineering and design teams.
Why new design system?
We used open source Design System, in the beginning, could be a good starting point but our application getting more diverse we had to create our on design system to maintain the brand characteristics, values and consistency.
Design methodology
Going through all of this I concluded that moving directly to pages to develop a UIKit was not probably the best idea. The answer lied in building both of them parallel and making changes to them simultaneously.
We used Atomic design methodology for creating design systems. This approach involves breaking down UI elements into smaller, reusable components (atoms), which are then combined to form more complex structures (molecules and organisms). Templates and pages represent higher-level compositions. The atomic design methodology promotes consistency, scalability, and efficiency in designing and maintaining user interfaces within a broader design system.
Not just a set of components
User research was integral to our Design System, incorporating prototype usability studies and discovery exercises. This approach influenced the development of the component library and interaction patterns. Additionally, our focus on designing with real data during low-fidelity wire-framing helped address real-world scenarios early, minimising potential roadblocks.
Results
In summary, a well-implemented design system contributes to faster development, improved collaboration, and a more consistent and user-friendly product, ultimately aiding in successful product shipping.
While we wanted to create extraordinary designs, we were mindful of cost constraints. After all, our mission was to make these cards accessible to as many business personalities as possible. A balance between uniqueness and cost-effectiveness waees the key, ensuring that these cards would become a prized possession for everyone.
- 34% increase in design productivity
- Improved the consistency across the platforms
- Reduces development time by providing pre-built, reusable components and design patterns.
- Ability to replicate designs quickly by utilising pre-made components and elements.
- Reducing the need to reinvent the wheel and eliminating inconsistency.
- Facilitates adaptability to market changes and trends by providing a flexible foundation.
There's more
There's a lot more, in case you are interested in taking a look at in-depth case studies from my previous projects.
