Superdigital
Design System Management
Superdigital, a leading Latin American bank, serves over 70 million users with a diverse range of banking products. A team of 15 designers and 100+ developers worked tirelessly to expand offerings, but the rapid pace of innovation left the Design System struggling to keep up.
Reviving Superdigital’s Design System for the Future
Superdigital is a Latin American Bank that offers a broad range of features and banking products to more than 70 million users. A team of 15 Designers and more than 100 developers were constantly upgrading and creating new products, in a pace that made the Design System almost obsolete.
With such a big technical debt, how could we get the Design System up-to-date?
High-Level Goals
Create a new Standard for component documentation that met the needs of Designers and Developers;
Document all components created between December of 2020 and June of 2021;
Re-document components according to the new Standard and find a solution to bridge the gap between Developers and Designers;
15 Product Designers, 0 UI Designers
Superdigital, a Latin American bank with 70 million users, relied on a Design System created in 2020 that hadn’t been updated, leading to technical debt and delivery challenges. In May 2021, I worked closely with UX Managers and Development Leaders, conducting interviews with designers and developers to identify key issues.
The solution involved creating a Notion-based progress tracker and redefining documentation standards, including a new "Behavior" section to clarify component usage. This streamlined the Design System, improving accessibility and alignment between teams.
Documentation was the key
After creating the component in Figma, the next step was to integrate it into Zeroheight to meet the developer accessibility goal. The Zeroheight documentation, which could be considered a standalone project in my portfolio, featured a comprehensive guide on documenting components and Design Tokens.
This guide was developed based on research into leading users of Zeroheight as their primary documentation tool. The result was the replication of this standard in over 125 components across 45 pages.
The enhanced documentation significantly improved communication between Design and Developers. However, a major issue persisted: not all components were documented in the Design System due to the rapid pace of new product development between November 2020 and June 2021. In October, I collaborated with an intern, David Santos, to meticulously review every product and evaluate the components used in each. This effort expanded our Notion tracker from around 60 lines to 125. Each new component was documented in both Figma and Zeroheight, utilizing advanced Auto-Layout and Figma variants.
The final piece of this work revolved around an issue that become the number one priority in the company: the Design System wasn't being coded properly, there wasn't a tracking method for deliveries by the development team, neither a Design Review stablished that allowed me to inspect if the components were correct, in terms of Design Tokens and Interaction States.The solution was an extensive Airtable spreadsheet that replicated the Notion tracking mentioned above. This spreadsheet however had 4 different states, all related to Developer delivery:
Em Desenvolvimento (In Development)— the component is being developed;
Entrega em "Date" (Delivered at "Date") — the component was developed but not tested, at a specific date;
Code Review — the component has been developed and tested;
Falta em "Product” (Missing at "Product") — indicates the flow that the component is in and has not started to be developed.Of all those states, the most important one is Missing at "Product". This solved the key problem of not having components ready for a specific product before it was engaged by the Business teams and Stakeholders, resulting in a clear view of development priority for Superdigital.To ensure that this work would last.
To ensure that this work would last, I designed a Unified Workflow for both Design and Development teams, that was praised by the Superdigital's CTO and quickly enforced as a new standard.
Here are some of my favorite redesigned screens using the components of the Super Digital Design System.
Major Achievements
A new record set at Try: Over 1000 components in 6 months, spread between new components, variants and documentation specific necessities demanded by Zeroheight;
Control and methodologies: Tracking systems and processes that ensure that componentization had quality, and would only need to be made once;
Most importantly: The Design System was up-to-date and running.