The first design system I worked on started like many others: due to the collective need for standardization and centralization of assets. At first, there wasn’t a dedicated team, just a great desire to build something functional, centralized, and organized, in addition to a fierce determination to convince the client of this need.
Screenshot of a Sketch file showing all the states of a file uploader component
I worked at Sapient AG2 from the Publicis Group, and the client was none other than the second largest private in Brazil, Bradesco: a giant and traditional bank that wasn’t born digital, where design thinking is certainly still in process.
At the time, it took a great effort for everyone to convince themselves of the need to invest hours in creating a design system.
Screenshot of a set of icons developed in-house for the various banking services
After much negotiation, a compromise was reached. There wouldn’t be a design or development team dedicated to the design system. Still, it would be possible to allocate collaborators while they were idle since it would be in favor of everyone’s productivity.
So we listed the tokens and components we used the most and studied how we could manage a library where everyone could contribute. It’s crazy to imagine this today, but before then, every designer would get a local copy of the parent library, work locally on their Sketch, and upload the file to a cloud. It seems like I’m talking about the stone age, but it happened in 2019!
Screenshot of a table component containing four columns and four rows, displaying one column with a selected checkbox and an accordion in every row. There are indicators of the distance in pixels from the inner table to the margins of the outer table
There was a lot of testing and a lot of rework until we were able to establish the processes for this design system. Our documentation was done in Confluence, the components in Sketch, and we used Abstract to manage the file cloud.
Screenshot of four sections of the very complex documentation of the table component
A couple of years later, we migrated everything to Adobe XD, and the design system started being managed by the bank inside team. I personally helped in this transition, helping the new team understand how we built every single token and component back then and teaching the basics of component hierarchy and structure.
Team structure
6 product designers + unknown engineers
Sketch + Adobe XD library
50+ components
8 tokens
10 products