Slavko Poltoratskyi

Home

Work

About

Resume

Slavko Poltoratskyi

Slavko Poltoratskyi

Design system

At vcita, we prioritize creating a consistent user experience across our product suite. I led the effort to develop a unified design system for all our platforms.

Tools

Figma, Storybook, Zerohight

Role

UX/UI Design

Problem

The primary issue was the absence of a standardized design system across vcita’s platform, leading to inconsistent user experiences and inefficiencies in development due to varying interpretations of design files by different teams.

Research and Discovery

To address these issues, I embarked on a thorough analysis of existing brand guidelines and design files. This phase helped in identifying the core problems and laid the groundwork for the design system’s development.

Research and Discovery

To address these issues, I embarked on a thorough analysis of existing brand guidelines and design files. This phase helped in identifying the core problems and laid the groundwork for the design system’s development.

Research and Discovery

To address these issues, I embarked on a thorough analysis of existing brand guidelines and design files. This phase helped in identifying the core problems and laid the groundwork for the design system’s development.

Research and Discovery

To address these issues, I embarked on a thorough analysis of existing brand guidelines and design files. This phase helped in identifying the core problems and laid the groundwork for the design system’s development.

Analyzing platform

Reviewing the existing implementations across platforms to identify common elements and discrepancies.

Interviewing stakeholders

Gathering insights from designers, developers, and product managers to understand their pain points and expectations.

Some Challenges

The integration of a new design system across multiple frameworks presented unique challenges:

Some Challenges

The integration of a new design system across multiple frameworks presented unique challenges:

Some Challenges

The integration of a new design system across multiple frameworks presented unique challenges:

Some Challenges

The integration of a new design system across multiple frameworks presented unique challenges:

Limited engineering resources

With finite developer availability, prioritizing tasks and managing workload was critical.

New brand position

Aligning new brand guidelines with existing platforms without disrupting ongoing operations.

Framework compatibility

Ensuring that the design system was adaptable and functional across Angular, Vue, and Ruby without favoring one over the other.

Problems to solve

Based on the initial research and identified challenges, several key problems needed resolution:

Problems to solve

Based on the initial research and identified challenges, several key problems needed resolution:

Problems to solve

Based on the initial research and identified challenges, several key problems needed resolution:

Problems to solve

Based on the initial research and identified challenges, several key problems needed resolution:

How might we...

structure and organize the design system so that users can easily find the correct components to use?

apply interaction in the design system to help better visualize the real product in prototype and user testing?

deliver a clear guideline to developers to avoid misalignment between design and development phases?

create a design system that is scalable across all viewports?

Establishing core guidelines for design system

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Establishing core guidelines for design system

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Establishing core guidelines for design system

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Establishing core guidelines for design system

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Create reusable components

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Create reusable components

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Create reusable components

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Create reusable components

The validated components were compiled into a comprehensive component library in Figma, becoming the single source of truth for designers and developers. The library supports ease of use and comprehensive access to design assets. Creating reusable components can save time and effort in the long run, fostering a more efficient workflow and maintaining a uniform design language across all products and pages

Coordinated planning for design system enhancements

We focused on planning the creation and integration of design components aligned with our product roadmap. The process involved reviewing upcoming features or projects with the design team to determine necessary additions to the design system. Based on this, we developed a plan with an estimated timeline, which aided product management in resource allocation and in setting clear expectations for the forthcoming phases and the projected results within the designated timeframe.

Coordinated planning for design system enhancements

We focused on planning the creation and integration of design components aligned with our product roadmap. The process involved reviewing upcoming features or projects with the design team to determine necessary additions to the design system. Based on this, we developed a plan with an estimated timeline, which aided product management in resource allocation and in setting clear expectations for the forthcoming phases and the projected results within the designated timeframe.

Coordinated planning for design system enhancements

We focused on planning the creation and integration of design components aligned with our product roadmap. The process involved reviewing upcoming features or projects with the design team to determine necessary additions to the design system. Based on this, we developed a plan with an estimated timeline, which aided product management in resource allocation and in setting clear expectations for the forthcoming phases and the projected results within the designated timeframe.

Coordinated planning for design system enhancements

We focused on planning the creation and integration of design components aligned with our product roadmap. The process involved reviewing upcoming features or projects with the design team to determine necessary additions to the design system. Based on this, we developed a plan with an estimated timeline, which aided product management in resource allocation and in setting clear expectations for the forthcoming phases and the projected results within the designated timeframe.

Crafting scalable components for multi-screen

A key feature of the design system was its scalability. The system was meticulously engineered to ensure that components could adjust seamlessly across different screen sizes—from mobile devices to ultra-wide monitors. This scalability was achieved through the use of responsive design principles and an auto-layout feature in Figma, which allowed components to adapt dynamically to various viewports without manual adjustment.

Crafting scalable components for multi-screen

A key feature of the design system was its scalability. The system was meticulously engineered to ensure that components could adjust seamlessly across different screen sizes—from mobile devices to ultra-wide monitors. This scalability was achieved through the use of responsive design principles and an auto-layout feature in Figma, which allowed components to adapt dynamically to various viewports without manual adjustment.

Crafting scalable components for multi-screen

A key feature of the design system was its scalability. The system was meticulously engineered to ensure that components could adjust seamlessly across different screen sizes—from mobile devices to ultra-wide monitors. This scalability was achieved through the use of responsive design principles and an auto-layout feature in Figma, which allowed components to adapt dynamically to various viewports without manual adjustment.

Crafting scalable components for multi-screen

A key feature of the design system was its scalability. The system was meticulously engineered to ensure that components could adjust seamlessly across different screen sizes—from mobile devices to ultra-wide monitors. This scalability was achieved through the use of responsive design principles and an auto-layout feature in Figma, which allowed components to adapt dynamically to various viewports without manual adjustment.

Viewports - 768px (Desktop)

Viewports - 320px (Mobile)

Design system structure

The structure of the design system followed the principles of atomic design. We organized the Figma master library to start with the most basic elements (atoms), building up to more complex components (molecules and organisms), and finally comprehensive templates and page designs. This hierarchical structure facilitated easy navigation and understanding of the design system.

Design system structure

The structure of the design system followed the principles of atomic design. We organized the Figma master library to start with the most basic elements (atoms), building up to more complex components (molecules and organisms), and finally comprehensive templates and page designs. This hierarchical structure facilitated easy navigation and understanding of the design system.

Design system structure

The structure of the design system followed the principles of atomic design. We organized the Figma master library to start with the most basic elements (atoms), building up to more complex components (molecules and organisms), and finally comprehensive templates and page designs. This hierarchical structure facilitated easy navigation and understanding of the design system.

Design system structure

The structure of the design system followed the principles of atomic design. We organized the Figma master library to start with the most basic elements (atoms), building up to more complex components (molecules and organisms), and finally comprehensive templates and page designs. This hierarchical structure facilitated easy navigation and understanding of the design system.

Accessible

Ensuring accessibility was a paramount concern throughout the development of the design system. We adhered to WCAG guidelines to make sure that our components were accessible to all users, including those with disabilities.

Accessible

Ensuring accessibility was a paramount concern throughout the development of the design system. We adhered to WCAG guidelines to make sure that our components were accessible to all users, including those with disabilities.

Accessible

Ensuring accessibility was a paramount concern throughout the development of the design system. We adhered to WCAG guidelines to make sure that our components were accessible to all users, including those with disabilities.

Accessible

Ensuring accessibility was a paramount concern throughout the development of the design system. We adhered to WCAG guidelines to make sure that our components were accessible to all users, including those with disabilities.

Keyboard accessibility

Allowing navigation through all interactive elements using a keyboard alone.

Alt text

Allowing description of an image that can be read by assistive technologies

Color contrast checks

Ensuring that all text and interactive elements had sufficient contrast.

Development process

The development of the design system was highly iterative, involving continuous collaboration between designers and developers. We started by building a robust foundation with core components, then gradually expanded to include more complex and specific elements. Regular review sessions and agile methodology ensured that the system evolved in alignment with user needs and business goals.

Development process

The development of the design system was highly iterative, involving continuous collaboration between designers and developers. We started by building a robust foundation with core components, then gradually expanded to include more complex and specific elements. Regular review sessions and agile methodology ensured that the system evolved in alignment with user needs and business goals.

Development process

The development of the design system was highly iterative, involving continuous collaboration between designers and developers. We started by building a robust foundation with core components, then gradually expanded to include more complex and specific elements. Regular review sessions and agile methodology ensured that the system evolved in alignment with user needs and business goals.

Development process

The development of the design system was highly iterative, involving continuous collaboration between designers and developers. We started by building a robust foundation with core components, then gradually expanded to include more complex and specific elements. Regular review sessions and agile methodology ensured that the system evolved in alignment with user needs and business goals.

Guides for every design component

Comprehensive documentation accompanied every component and design pattern in the system. This documentation included detailed usage guidelines, code snippets for developers, and best practices. By providing clear and detailed instructions, we ensured that the design system could be easily adopted and correctly implemented by teams across the company.

Guides for every design component

Comprehensive documentation accompanied every component and design pattern in the system. This documentation included detailed usage guidelines, code snippets for developers, and best practices. By providing clear and detailed instructions, we ensured that the design system could be easily adopted and correctly implemented by teams across the company.

Guides for every design component

Comprehensive documentation accompanied every component and design pattern in the system. This documentation included detailed usage guidelines, code snippets for developers, and best practices. By providing clear and detailed instructions, we ensured that the design system could be easily adopted and correctly implemented by teams across the company.

Guides for every design component

Comprehensive documentation accompanied every component and design pattern in the system. This documentation included detailed usage guidelines, code snippets for developers, and best practices. By providing clear and detailed instructions, we ensured that the design system could be easily adopted and correctly implemented by teams across the company.

Results

This project underscored the importance of a unified design system in a multi-framework environment. It highlighted the need for meticulous planning and comprehensive guidelines aligning with the company’s vision and user expectations. Integrating the system across platforms provided insights into the adaptability required for organizational and technological challenges.

Learned

Effective communication between designers and developers is crucial for resolving issues and ensuring a shared understanding of project goals. Robust documentation supports the use of the design system, while integrating accessibility from the start enhances user experience. Scalability planning ensures the design system remains relevant, and an iterative approach allows for ongoing improvements based on user feedback and changing business needs.

OneDome

Digital conveyancing

OneDome

Digital conveyancing

OneDome

Digital conveyancing

OneDome

Digital conveyancing

OneDome

Digital conveyancing

HodlCredit

Crypto lending

HodlCredit

Crypto lending

HodlCredit

Crypto lending

HodlCredit

Crypto lending

HodlCredit

Crypto lending

CryptoPNL

Trading platform

CryptoPNL

Trading platform

CryptoPNL

Trading platform

CryptoPNL

Trading platform

Get in touch

Looking for a product designer to help grow your product?

Get in touch

Looking for a product designer to help grow your product?

Get in touch

Looking for a product designer to help grow your product?

Get in touch

Looking for a product designer to help grow your product?

Get in touch

Looking for a product designer to help grow your product?