DSM Management
Use case
Figma
CRAFTING A UNIFIED LIBRARY
From Chaos to Cohesion:
Beinleumi’s bank design system journey
Embark on a journey transforming scattered files towards a unified design library for our studio's largest client. In this adventure, I introduce the process I initiated and led. This framework includes 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 manager
DSM Management
Use case
Figma
CRAFTING A UNIFIED LIBRARY
From Chaos to Cohesion:
Beinleumi’s bank design system journey
Embark on a journey transforming scattered files towards a unified design library for our studio's largest client. In this adventure, I introduce the process I initiated and led. This framework includes 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 manager
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 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.
Obstacles
The problems
Obstacles
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.
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.
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, resulting in duplicating graphic mistakes.
3
Waste of time & effort
Without a centralized component library designers often recreated existing components, resulting in duplicating graphic mistakes.
Quest
The hypothesis
Transitioning to a unified design system will address workflow inefficiencies, reduce inconsistencies, and enhance collaboration between UX/UI and dev teams
The Quest
The hypothesis
Transitioning to a unified design system will address workflow inefficiencies, reduce inconsistencies, and enhance collaboration between UX/UI and dev teams
Journey of discovery
Once we pinpointed our challenges, our next step involved thorough exploration. This phase encompassed analyzing the current state, envisioning the desired outcome, and strategically charting our course to achieve our objectives.
Journey of discovery
Once we pinpointed our challenges, our next step involved thorough exploration. This phase encompassed analyzing the current state, envisioning the desired outcome, and strategically charting our course to achieve our objectives.
System audit
The current situation
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 current situation
The current situation
We collected component sets from main project files. This systematic review helped us address issues like inconsistent UI, design drift, outdated information, and clutter.
Theory
Atomic design
I adopted the theory of atomic design, breaking down design systems into their smallest, reusable components. This approach aligns seamlessly with our UX/UI workflow challenges, offering solutions to inconsistent UI, component duplication, limited reusability, and style guide maintenance.
Theory
Atomic design
I adopted the theory of atomic design, breaking down design systems into their smallest, reusable components. This approach aligns seamlessly with our UX/UI workflow challenges, offering solutions to inconsistent UI, component duplication, limited reusability, and style guide maintenance.
Our new basic atoms (some of them)
Typography
(some) Colors
(some) Icons
Benchmark
Drawing inspiration from various sources enriched our system's foundation, fostering creativity and efficiency as we constructed a unified and harmonious design system.
The Benchmark
Drawing inspiration from various sources enriched our system's foundation, fostering creativity and efficiency as we constructed a unified and harmonious design system.
User behavior
How do people work here?
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 Quest
How do people work here?
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, I 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.
The enchanted outcome
As we conclude this phase of our journey, I 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.
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.
File structure - Organized according to the organization, platform & other internal needs
Pages
Layers
Components
Pic from dev-handoff workshop
Collaboration is key
Personal guidance
Personal guidance
Workshops
Workshops
Expectations & updates meetings
Expectations & updates meetings
Adjustments as needed
Adjustments as needed
Know your audience
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.
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
More
examples
Never ending story
Our journey continues, and I eagerly anticipate the evolution of the system. This ongoing adventure promises more efficient work processes and improved collaboration, ensuring that our story remains evergreen.
Never ending story
Our journey continues, and I eagerly anticipate the evolution of the system. This ongoing adventure promises more efficient work processes and improved collaboration, ensuring that our story remains evergreen.
Let’s talk
mayag86@gmail.com