Identity DS Design System

In January 2020, I was called up in Brasília by a top-skilled UX/UI team to help them build a scalable and modular Design System for Caixa Seguradora — an insurance company, subsidiary of Caixa Econômica Federal, the second largest public bank in Brazil. This System, which we later named "Identity DS", would be the foundation to the company's website. Some groundwork was done before my arrival, like benchmark research, basic component definitions and tokenization rules, but the lack of direction from management was delaying my colleagues' work.

The managers were having difficulty understanding the modularity concept of our proposed Design System, and how it would work in practice. This led to indecision about what should be developed first. Sales strategists wanted to tailor parts of the design to make offers according to holidays, special occasions and the needs of each persona they mapped. Behavioral data collected by my team highlighted the importance of the "top requests first" approach: information that most users looked for should be in the home, in the main menu or in links above the page fold.

In this context, I proposed to build the main modules and make a prototype ASAP demonstrating their use in a decisive meeting, hoping that this would serve as material means of clarification so that managers could decide on the next steps. In addition, my team asked me to support them in challenging the aesthetic viewpoints of stakeholders in order to create a visual identity that, while similar to the one adopted by Caixa Econômica Bank, would have its own personality.

As my team was using Brad Frost's Atomic Design philosophy to create the Design System, I took all the atoms and molecules they prepared in Figma to build organisms — the modules — in which information could be interchangeable. Thus, a home hero banner could have button grids, CTAs and promotional images; cards could have buttons, icons or simple text; banners could display product suggestions according to user's age, earnings and marital status; The Black Friday period would reveal a special banner and so on.

Based on the benchmark research and after asking a couple of random users in a hallway testing what they would expect from a good Caixa Seguradora homepage, bearing in my mind the "top requests first" request, I built in just a day a prototype to present to the management, the business director and the engineering leader. My team and I agreed not to use design jargon in the meeting and to focus on the functionalities and how the modules could be modified.

The meeting raised new questions from the client's side, but they expressed much less the feeling "what are these things?", going instead in the direction of "how can you help developers deploy this?". As I expected, materializing our thoughts in a prototype, demonstrating how modules should work, gave to managers and engineers the much needed impulse to decide what to build. Choosing high-fidelity, rather than wireframes, made it easier to demonstrate the merit of our aesthetic choices to them. Thus, Caixa Seguradora had its solid Design System with changing modules crafted to its own particular needs, with a visual personality that would keep it in the same trusting atmosphere of the Caixa Econômica Bank.

Living on the technical realm of concepts, specifications and models is a temptation for any professional and UX is not an exception. But in our case, we must know very well how to translate abstractions into demonstrations in the most simple (but not simple-minded) way, so untrained stakeholders and C-Level staff can understand, comment, choose and act decisively with us. I was very happy for the opportunity to bring to my excellent UX team a "hands on" mindset, bridging the gap in materialization and further elevating the standard of delivery — especially in light of the complex demands of Caixa Seguradora and its users spread across the entire country.