Roberto Laschevoski

Senior Product Designer &

Design Systems Specialist

Home

About

Projects

Roberto
Laschevoski

Senior Product Designer &

Design Systems Specialist

Back to Projects

Library Evolution: Auditing and Redesigning Components

Component Chronicle: Reinventing the Library for an Audit-Inspired Design Transformation

Industry

Financial Services

Client

Allica Bank

Year

2023

Role

Design System Team Lead

Industry

Financial Services

Client

Allica Bank

Year

2023

Role

Design System Team Lead

In the dynamic world of FinTech banking, the integrity and effectiveness of a design system are paramount. As a senior/lead product designer, I spearheaded a comprehensive audit of our bank's design system. This case study narrates this journey, highlighting the critical role of design systems in creating coherent, user-friendly digital financial services. The audit aimed to assess, refine, and enhance the system, ensuring it met current standards and was poised for future scalability and innovation. This story unfolds my experience and insights from this vital project, showcasing the intersection of design excellence and strategic leadership.

At the FinTech bank, where I led as a senior product designer, our design system was the linchpin of our digital interface strategy. However, with rapid growth and evolving market demands, it became increasingly clear that our system needed to be more robust under its own success.

Initial Challenges

Inconsistency and Scalability Issues: Despite its initial efficiency, the design system had grown organically, leading to inconsistencies across different products. The need for a unified approach hampered scalability, a critical factor in the fast-paced FinTech environment.
Outdated Components: Some design system components needed to be updated, as they did not align with the latest user experience trends and technological advancements.
Collaboration Gaps: As the team expanded, the absence of a standardized process for design contributions and updates led to communication and collaboration challenges.

These challenges underscored the need for a comprehensive audit — not just a cursory review but a deep dive into the very fabric of our design system, to revitalize it and align it with our ambitious vision for the future.

Audit Process

The audit process was a critical venture, demanding meticulous planning and execution, all under my leadership as the senior product designer.

Planning and Preparation:

Defining Objectives: I initiated the audit by setting clear objectives, focusing on identifying inconsistencies and outdated components and improving collaboration processes.
Team Collaboration: Engaging a cross-functional team, I fostered a collaborative environment for the audit, ensuring diverse inputs and comprehensive coverage.

Execution:

Methodologies: Employing a systematic approach, we audited each design system component. This included user interface elements, design patterns, and the underlying code.
Tool Utilization: Airtable was instrumental in this process. It allowed us to meticulously catalogue, review, and assess each design element, maintaining high organization and clarity.
My Contribution: My role was pivotal in guiding the team through the audit process, ensuring every aspect of the system was scrutinized for consistency, relevance, and efficiency.

Key Findings:

Component Redundancies: We discovered significant redundancies in design elements, leading to unnecessary complexity.
Outdated UX Patterns: Certain user experience patterns were identified as outdated not aligning with current user expectations.
Collaboration Bottlenecks: The need for a streamlined process for updating the design system was hindering effective collaboration and innovation.

These findings were critical in charting the course for the next phase of strategic improvements and implementation.

The audit process was a critical venture, demanding meticulous planning and execution, all under my leadership as the senior product designer.

Planning and Preparation:

Defining Objectives: I initiated the audit by setting clear objectives, focusing on identifying inconsistencies and outdated components and improving collaboration processes.
Team Collaboration: Engaging a cross-functional team, I fostered a collaborative environment for the audit, ensuring diverse inputs and comprehensive coverage.

Execution:

Methodologies: Employing a systematic approach, we audited each design system component. This included user interface elements, design patterns, and the underlying code.
Tool Utilization: Airtable was instrumental in this process. It allowed us to meticulously catalogue, review, and assess each design element, maintaining high organization and clarity.
My Contribution: My role was pivotal in guiding the team through the audit process, ensuring every aspect of the system was scrutinized for consistency, relevance, and efficiency.

Key Findings:

Component Redundancies: We discovered significant redundancies in design elements, leading to unnecessary complexity.
Outdated UX Patterns: Certain user experience patterns were identified as outdated not aligning with current user expectations.
Collaboration Bottlenecks: The need for a streamlined process for updating the design system was hindering effective collaboration and innovation.

These findings were critical in charting the course for the next phase of strategic improvements and implementation.

The audit process was a critical venture, demanding meticulous planning and execution, all under my leadership as the senior product designer.

Planning and Preparation:

Defining Objectives: I initiated the audit by setting clear objectives, focusing on identifying inconsistencies and outdated components and improving collaboration processes.
Team Collaboration: Engaging a cross-functional team, I fostered a collaborative environment for the audit, ensuring diverse inputs and comprehensive coverage.

Execution:

Methodologies: Employing a systematic approach, we audited each design system component. This included user interface elements, design patterns, and the underlying code.
Tool Utilization: Airtable was instrumental in this process. It allowed us to meticulously catalogue, review, and assess each design element, maintaining high organization and clarity.
My Contribution: My role was pivotal in guiding the team through the audit process, ensuring every aspect of the system was scrutinized for consistency, relevance, and efficiency.

Key Findings:

Component Redundancies: We discovered significant redundancies in design elements, leading to unnecessary complexity.
Outdated UX Patterns: Certain user experience patterns were identified as outdated not aligning with current user expectations.
Collaboration Bottlenecks: The need for a streamlined process for updating the design system was hindering effective collaboration and innovation.

These findings were critical in charting the course for the next phase of strategic improvements and implementation.

Strategic Improvements and Implementation

Following the audit, I spearheaded a series of strategic improvements to revamp our design system. These enhancements were critical in addressing the audit's findings, particularly focusing on the component architecture, colour management, typography, and collaboration processes.

Improvement Strategies

Component Architecture: We overhauled the architecture for better modularity and reusability. This involved decomposing complex components into simpler, more versatile elements, enhancing the system's flexibility and maintainability.
Colour Naming and Variables: To streamline colour usage, we introduced a more intuitive colour naming system and implemented colour variables and tokens. This approach enabled a more systematic and consistent application of the colour palette across all digital products.
Typography Workshop: I organized a workshop with designers to review and standardize our typography. This session allowed us to refine our typographic scale and ensure it aligned with our brand identity and readability standards.
Introduction of Design Patterns: We integrated standardized patterns for common UI elements like forms and error validations. These patterns provided a consistent user experience and reduced design ambiguity.
Addressing Collaboration Bottlenecks: I developed a clear process for contributing to and updating the design system to enhance collaboration. This included documentation, review protocols, and regular sync-up meetings to ensure alignment and continuous improvement.

Implementation Approach

Phased Rollout: The improvements were implemented in phases to allow testing and adjustment without disrupting ongoing projects.
Team Engagement: Regular training sessions and open forums were conducted to ensure the team was well-versed with the new system and to gather continuous feedback.
Leadership and Guidance: My role was crucial in guiding the team through this transition, addressing challenges, and focusing on our strategic goals.

These concerted efforts led to a more refined, efficient, and collaborative design system, setting a new standard in our FinTech bank's digital product development.

Results and Impact

The strategic improvements and their implementation, guided by my leadership as a senior product designer, culminated in notable enhancements in both the design system and the overall product development process.

Enhanced Design System Quality:
- The revamped component architecture led to a more cohesive and versatile design system. This streamlined the design process and elevated our products' overall aesthetic and functional quality.
- Introducing standardized colour variables and tokens brought a new level of consistency and ease of use, significantly reducing design inconsistencies.
Improved Efficiency and Collaboration:
- The typography workshop and standardized design patterns resulted in a more unified visual language, simplifying the design process and enhancing team efficiency.
- Addressing collaboration bottlenecks transformed the team dynamics. The new contribution process led to smoother workflows, faster decision-making, and a more inclusive and innovative design culture.
Quantitative and Qualitative Outcomes:
- Quantitatively, we observed a reduced design and development time by approximately 30% and a marked decrease in design-related inconsistencies and reworks.
- Qualitatively, feedback from both internal stakeholders and end-users highlighted the improved clarity, usability, and visual appeal of our digital banking platforms.
Cultural Shift:
- The most significant impact was the cultural shift within the organization. This initiative's success fostered a culture of continuous improvement, with a greater emphasis on collaboration and user-centric design.

These results affirmed the value of the design system audit and underscored my role in leading a transformative change in our FinTech bank's approach to product design.

Enhanced Design System Quality:
- The revamped component architecture led to a more cohesive and versatile design system. This streamlined the design process and elevated our products' overall aesthetic and functional quality.
- Introducing standardized colour variables and tokens brought a new level of consistency and ease of use, significantly reducing design inconsistencies.
Improved Efficiency and Collaboration:
- The typography workshop and standardized design patterns resulted in a more unified visual language, simplifying the design process and enhancing team efficiency.
- Addressing collaboration bottlenecks transformed the team dynamics. The new contribution process led to smoother workflows, faster decision-making, and a more inclusive and innovative design culture.
Quantitative and Qualitative Outcomes:
- Quantitatively, we observed a reduced design and development time by approximately 30% and a marked decrease in design-related inconsistencies and reworks.
- Qualitatively, feedback from both internal stakeholders and end-users highlighted the improved clarity, usability, and visual appeal of our digital banking platforms.
Cultural Shift:
- The most significant impact was the cultural shift within the organization. This initiative's success fostered a culture of continuous improvement, with a greater emphasis on collaboration and user-centric design.

These results affirmed the value of the design system audit and underscored my role in leading a transformative change in our FinTech bank's approach to product design.

Enhanced Design System Quality:
- The revamped component architecture led to a more cohesive and versatile design system. This streamlined the design process and elevated our products' overall aesthetic and functional quality.
- Introducing standardized colour variables and tokens brought a new level of consistency and ease of use, significantly reducing design inconsistencies.
Improved Efficiency and Collaboration:
- The typography workshop and standardized design patterns resulted in a more unified visual language, simplifying the design process and enhancing team efficiency.
- Addressing collaboration bottlenecks transformed the team dynamics. The new contribution process led to smoother workflows, faster decision-making, and a more inclusive and innovative design culture.
Quantitative and Qualitative Outcomes:
- Quantitatively, we observed a reduced design and development time by approximately 30% and a marked decrease in design-related inconsistencies and reworks.
- Qualitatively, feedback from both internal stakeholders and end-users highlighted the improved clarity, usability, and visual appeal of our digital banking platforms.
Cultural Shift:
- The most significant impact was the cultural shift within the organization. This initiative's success fostered a culture of continuous improvement, with a greater emphasis on collaboration and user-centric design.

These results affirmed the value of the design system audit and underscored my role in leading a transformative change in our FinTech bank's approach to product design.

Lessons Learned

Leading the design system audit at a FinTech bank offered profound insights and reinforced several key lessons in digital product design:

Adaptability in Design: The audit process taught me the importance of flexibility and adaptability in design. Keeping pace with technological advancements and user expectations requires a design system that can evolve continuously.
Collaboration Drives Innovation: The project highlighted how collaborative efforts can lead to more innovative solutions. Engaging various stakeholders in the audit and improvement process ensured diverse perspectives and richer outcomes.
The Importance of Leadership: As a senior product designer, I learned the significance of providing clear direction and inspiring confidence among team members during transition and change.

Conclusion

This case study encapsulates a pivotal chapter in my professional journey, where strategic vision, technical expertise, and leadership converged to revitalize a critical component of our FinTech bank's digital infrastructure. The audit was about fixing issues and reimagining how a design system can empower an organization to achieve excellence in its digital offerings. It underscored the necessity for regular audits and updates in a design system, ensuring it remains an enabler of innovation and efficiency in the ever-evolving FinTech landscape.