DSM Management
Use case
Figma
CRAFTING A UNIFIED LIBRARY
From Chaos to Cohesion:
Beinleumi’s bank design system journey
Enter the realm of growth unveiling the journey of guiding scattered files towards a unified design library. In this adventure, we introduce components, guidelines, and common design language crafted to enhance collaboration & productivity.
The project was done as part of my work at UXpert as overall library management
THE TALE BEGINS
After years of navigating a design landscape without a unified system, we made a brave decision to reimagine our approach. Harnessing Figma's features, we entered this journey to streamline our workflow and unlock new efficiencies.
The problems
1
Keeping up with everything
Different files led to inconsistencies in the user interface, making it a challenge to maintain a cohesive and polished look and feel.
2
Development errors
Identifying the latest design components or assets became a struggle for designers and developers, resulting in errors.
3
Waste of time & effort
Without a centralized component library, designers often recreated existing components, inadvertently duplicating graphic mistakes.
The Quest The Hypothesis
Transitioning to a unified design system will address workflow inefficiencies, reduce inconsistencies, and enhance collaboration between UX/UI and development teams
Journey of discovery
Once we pinpointed our challenges, our next step involved a thorough exploration. This encompassed analyzing the current state, envisioning the desired outcome, and strategically charting our course to achieve our objectives.
The current situation System audit
We collected component sets from main project files. This systematic review helped us address issues like inconsistent UI, design drift, outdated information, and clutter.
The theory Atomic design
We adopted the theory of atomic design, breaking down design systems into their smallest, reusable components, similar to atoms. This approach aligns seamlessly with our UX/UI workflow challenges, offering solutions to inconsistent UI, component duplication, limited reusability, and style guide maintenance.
From the "Colors" page in the DSM file - Organized according to the organizational structure, platforms & other internal needs
The Benchmark Inspirations
Drawing inspiration from various sources enriched our system's foundation, fostering creativity and efficiency as we constructed a unified and harmonious design system.
Search results for “Design system” in Figma community
The People Users
Throughout our journey, we carefully considered the diverse users of the design system library. From stakeholders to development teams. We delved into their unique perspectives and requirements, acknowledging that they interact with the library in distinct ways at various project stages, same for the Figma platform.
Our discoveries guided us in refining the library, enhancing its structure and optimizing component display to better serve each user's distinct needs.
The enchanted outcome
As we conclude this phase of our journey, we proudly present the first version of our design system. This transformative adventure allowed us to conquer the challenges of inconsistent UI, component duplication, and limited reusability. Our design system now serves as a guiding light towards a more harmonious and efficient workflow.
Library structure
Our library structure consists of Pages, Sections, and Sets, enriched with explanations, examples, different naming options, indexes, and more. These additions help users find what they need and understand how to the components.
אולי להחליף לצילום מסך של מבנה הדפים, השכבות בתוך העמוד ודוגמה לסקשן
From the "Screen layouts" page in the DSM file - Selected screens from different flows. Also includes instructions for use, implementation highlights and what to avoid
How we use it
Navigating through our library is becoming a breeze, from searching and browsing in the "Assets" panel to accessing the main component in the actual library file. Users can explore, review other sources of the same type, and even leave comments for improvements.
More examples from the DSM file
Never ending story
Our journey continues, and we eagerly anticipate the evolution of our design system. This ongoing adventure promises more efficient work processes and improved collaboration, ensuring that our story remains evergreen.
Let’s talk
(+972) 52-362-1518
mayag86@gmail.com