Xsolla Design System

The Xsolla Design System provides everything necessary to meet the requirements of various company products. Its high flexibility allows for easy customization of the system for new products or redesigning existing ones, ensuring consistency and coherence in visual style and user experience.

Design System Designer, Front-End Developer, Design System Manager.

As a designer, my work involved thorough project analysis, development of component libraries and guides, close collaboration with product teams, and a constant commitment to ensuring high quality and design consistency within the project.

In my role as a designer responsible for creating the design system, I performed the following tasks:

• Conducted research to fully understand the task, target audience, context of use, pains, and needs of future users
• Collaborated with the team to develop a color palette that became the foundation for all company products
• Created the architecture of the design system that met all necessary requirements and criteria
• Developed product themes, including a set of tokens for various parameters
• Defined the appearance, behavior, and structure of the core components of the design system, considering user needs and product requirements
• Established standards and guidelines for the application of design system components and elements to ensure a consistent and harmonious project visual identity
• Collaborated with the team through discussions and explanations of design decisions, idea exchange, and feedback
• Tested and iterated on developed components based on user feedback to achieve optimal results
• Created documentation and guides for using the design system to facilitate adoption by teams and ensure its consistent usage

As a design system manager, I was responsible for effectively managing, developing, and ensuring the consistency of the company’s design system. My work focused on establishing a strong foundation, developing new components and standards, and supporting teams in utilizing the design system. The following are the key tasks I performed in this role:

• Design System Management: developing a development plan, coordinating team work and processes
• Development and Improvement: analyzing user needs, developing new components and standards
• Consistency and Quality: establishing standards and guidelines, quality control
• Training and Support: providing training on using the design system, offering support and consultations
• Collaboration and Partnership: collaborating with other teams, participating in events and communities
• Implementation and Adoption: presenting and demonstrating the design system, implementing and supporting it in projects
• Growth and Learning: keeping up with trends and innovations, professional development
• Feedback and Improvement: collecting feedback and analyzing data, making changes and improving the design system

Previously, the company lacked a unified design standard and common rules, resulting in inconsistent solutions and a lack of a unified user experience. Different products could use different component libraries, styles, and rules, leading to increased development costs and longer time to market.

Recognizing the importance of addressing this issue, we initiated the creation of a design system. Our goal was to establish a unified standard and develop a set of resources that ensured consistency and optimization in product design.

Before embarking on the development of the design system, we conducted thorough research to fully understand the current state of our products and identify key issues and user needs. This involved analyzing existing layouts and designs, as well as actively engaging with our target audience. We conducted user research, conversations, and interviews to gather valuable feedback and understand what our users specifically expected from the design system.

As a result of this research, we identified the necessary criteria and parameters that our future design system should meet. We had a clear vision of how we could enhance the user experience and ensure more efficient utilization of our products. These findings served as the foundation for the development of our design system, aligning it with the needs and expectations of our users and establishing a solid groundwork for subsequent stages of product development and improvement.

During the development of the design system, we carefully crafted its architecture and defined the following key components and their purposes:

• Base Components: I created a universal set of components that serve as the foundation for all our products
• Product Component Libraries: In these libraries, we placed unique components specific to each individual product that cannot be reused in others
• Color Palette: We developed a comprehensive set of colors that serve as the basis for all our products. Defining the color palette ensures a consistent visual identity and brand recognition
• Color Themes: We created a set of color tokens that were semantically assigned to various design elements. This development stage was challenging but exciting. Our goal was to create a compact and comprehensive set of variables that every designer can easily work with
• Typography: I defined a set of fonts and their usage in different contexts. For example, we established primary variables for headings and determined fonts for various textual elements in our products. This approach ensures consistency and legibility of the text
• Graphic: We collaboratively designed a set of icons that can be used in various situations. They were specifically created with the expectations and preferences of our users in mind. Additionally, we developed a guide for using the icons to ensure their consistent application in our products

Creating product themes is a key stage in the development of a design system. A theme is a collection of tokens that describe various interface properties, including colors, typography, shadows, sizes, spacing, and more. Thanks to this theme, each component of the design system can quickly and easily adapt to the requirements of a specific product.

Creating a theme is a process that requires significant effort and time. We conducted an analysis of the base components, categorized them into semantic groups, and developed a set of variables that cover various usage scenarios and future needs.

We didn’t have a dedicated tester position in the team, however, we found an effective approach to ensuring the quality of the design system. We actively conducted internal testing of components, but we were aware that unforeseen issues could arise in new usage scenarios. Therefore, the main testing phase became the process of integrating the design system into products. We implemented the components into the product, gathered feedback from users and the team, carefully analyzed the data obtained, and made improvements to the components when necessary. This flexible approach allowed us to reduce the development costs of the design system, but it required careful resource planning and team coordination.

It was important to allocate sufficient time and resources to the integration stage to ensure high quality and consistency of the components within the products. Communication and feedback with the team and users played a crucial role in identifying issues and finding optimal solutions. This allowed us to continuously improve the design system, meeting the requirements and expectations of users.

We always placed special emphasis on the process of integrating the design system into our products. It was an active and crucial stage for which we allocated significant resources within our quarterly planning. Our team actively engaged in the integration, taking on associated tasks to ensure the continuity and successful implementation of the design system. We closely collaborated with the user and development teams, gathered feedback, and analyzed it, striving to constantly improve and evolve the system at each integration stage.

Thanks to our efforts and resource planning, the integration of the design system into the products went smoothly and efficiently. We took into account all aspects of the process and aimed to create a safe and reliable environment for successful implementation. Continuous information exchange, feedback, and ongoing improvement were our guiding principles to ensure the quality and compliance of our design system when integrated into products.

With the implementation of our design system, we have achieved significant results and accomplishments. Firstly, the development team’s productivity has noticeably improved. Consistent components and ready-made solutions from the design system have allowed developers to work more efficiently, reducing product development time and accelerating time-to-market.

The second important result is the enhancement of the user experience. A unified design language and cohesive interface elements have made our products more intuitive and user-friendly. They now have a consistent visual appearance, promoting recognition and strengthening our brand.

Furthermore, the implementation of the design system has enabled us to significantly reduce development costs. Ready-made components and themes from the design system prevent redundant development efforts and bring significant economic benefits. The quick creation and modification of interface elements using pre-existing solutions greatly save time and resources.

In summary, the use of the design system has led to increased productivity, reduced development time, and improved user experience. These achievements validate the value of the design system and contribute to our growth and success in the industry.

The design system development project has had a significant impact on my career and the success of the company. We have reduced development time, improved the user experience, and solidified our reputation in the eyes of our users.

I express sincere gratitude to the entire team who enthusiastically and devotedly brought the design system to life. Without their creative contributions and diligent work, we could not have achieved such significant results.

Our design system has become an example of success and will inspire us in future projects. I am proud of the accomplishments we have achieved and confident that they will serve as a foundation for further success and growth of the company.