B2B Plataform
Design System Evolution
Company: Worten
Product: B2B plataform, Design System
Timeline: 2023
Team
Product Manager, Engineers, Data Analyst, Designer
Goal:
Evolve the design system, create a trading and documentation platform.
Introduction
Worten is one of the largest consumer electronics retailers in Portugal and Spain, operating both physical stores and a large-scale e-commerce platform. As the company expanded its internal digital products, the need for a consistent, scalable, and accessible design system became critical.
This project involved two connected workstreams: contributing to the redesign and expansion of Worten's Design System, and applying that system directly to a new internal B2B platform — a negotiation tool built for Worten's technical teams and their suppliers.
The Challenge
Worten's existing Design System had grown organically and needed significant renovation. As new internal products were being built, the DS lacked the components required to support more complex interfaces — particularly for data-heavy, task-oriented B2B contexts.
At the same time, a new internal platform was being developed to manage commercial negotiations between Worten's procurement team and external suppliers. A technician from a brand such as Samsung, for example, would receive credentials to access the platform and negotiate product orders directly with Worten's team.
The platform needed to handle complex workflows — negotiation history, product catalogues, documentation, and approval flows — all within a consistent and accessible interface.
The challenge was to build and expand the DS in parallel with the product, ensuring every new component was grounded in a real product need.
Approach
Rather than treating the Design System as a separate workstream, the approach was to use the product as the primary driver of DS evolution. By being actively involved in the negotiation platform project — understanding requirements, participating in discussions with the product team and developers — it was possible to anticipate component needs before they became blockers.
New components were created as product requirements emerged, following a consistent process: evaluate whether an existing component could be adapted, define the component's variants and states, apply accessibility guidelines from the start, and document usage rules for the development team.
This embedded approach ensured that every addition to the DS had a clear purpose and a real application — avoiding the common pitfall of building components in isolation that never get used.
Example of a table of registered products.
Design System Highlights
The renovation touched both foundational and complex layers of the system.
At the foundational level, color tokens, typography scales, spacing rules, and button variants were reviewed and updated to ensure consistency and WCAG compliance across all products.
At the component level, more complex UI patterns were built to support the specific demands of the negotiation platform — including data tables, filtering systems, negotiation panels, modals, and form structures capable of handling dense information in a clear and scannable way.
Accessibility
Accessibility was treated as a non-negotiable requirement throughout the DS renovation, not as a final checklist. Existing components were reviewed and updated against WCAG guidelines, addressing key areas such as color contrast ratios, typography legibility, interactive element sizing, and focus states for keyboard navigation.
This approach ensured that the updated DS could serve as a reliable foundation for future products — embedding accessibility at the component level so that teams building on top of the system would inherit compliant patterns by default, rather than having to address accessibility separately for each new product
Results
The renovated Design System provided Worten with a consistent, scalable, and accessible component library to support the development of new internal products. The negotiation platform — built in parallel with the DS evolution — successfully went live and entered full operation, serving both Worten's internal procurement teams and external supplier contacts.
Beyond the platform itself, the DS established a shared design language across teams, reducing inconsistencies between products and giving developers a reliable reference for implementation. The embedded approach — building DS components in direct response to real product needs — ensured that every addition had immediate practical application