PoliDS
- Jan 6
- 2 min read
Design system by Polibras software
2023 Digital e-commerce Brazil
Summary
Standardization of the visual identity of Polibras company products, ensuring consistency between them and allowing users to recognize the brand regardless of the product they are using.
To facilitate the development of new products and features through clear and centralized documentation of the visual elements used by the company, avoiding rework and the random creation of components.
I do
Mapping the components used in the systems and identifying visual inconsistencies.
Defining the grid pattern based on the products and the business proposition.
Workshops to define priorities in the creation of components with the other members of the development team.
Mapping existing materials that could serve as a basis or support for the creation of the Design System (DS).
Definition of the DS documentation platform.
Documentation of the component definitions and standards, including their applicability and non-applicability.
Problems
We faced many problems due to the lack of a design standards guide.
One of the most critical issues, which had the greatest impact on the team, was the absence of a library of reusable components.
In each product screen creation process, it was common for components to be created manually, without the possibility of reuse within each product, and without documentation.
This often resulted in inconsistencies, with identical colors having different shades used on similar components, as well as variations in fonts, elements, and colors.
Solution
Creation of a design guide, initially focused on meeting the most critical product demands, including buttons, inputs, text, colors, grids, shadow effects, and borders.
Making the design guide available to everyone in the company, along with articles highlighting its advantages.
Development of a token library, made available via npm, for use in projects.
Results after the work
Reduced maintenance time for code, new features, or products.
Visual consistency across products. Reduction in the amount of third-party libraries used in products.
Thank you for visiting.
