From design principles to design system
PicPay wants to change the way people deal with money and through their app is possible to send and receive money to any user, for free and instantly, with a credit card or transferring money from a bank account. Besides that, users can pay for products or services in more than 1M partner establishments around Brazil. The only thing you need is a smartphone.
The Context
Picpay is one of the biggest startups growing fast-paced in Brazil. In less than one year the company has jumped from 180 employees to 1200+. In the meantime, the design team and product were also growing so fast that we needed a moment to settle down some things, so all designers could converge the product in the same direction.
First steps: Setting up design principles
Our first step as a team was to set up our foundation, the core source of truth that should lead designers through their daily activities.
To accomplish that, one of the designers (Eric, the facilitator of the discussion) asked for all designers to do a little research for other company’s design principles. In the second moment, he set up a meeting to discuss and define the design principles.
In this meeting, all the designers had 1 minute to write in sticky notes how they feel about the design team, another minute to how they feel about the company, and another one to how they see the company in the future. Designers could write as many feelings as they were able in different sticky notes during that time.
After that, we put all the sticky notes into the wall and then we combined the ones that were similar and then every designer could vote in 2 principles. This way we ended up with 7 principles and now we needed to evaluate them by relevance, so we used Maslow,s Hierarchy pyramid methodology.
We had a pyramid drawn on board with 7 levels and every designer should put one principle in which level, where the base was our foundation/core and the top was our delight principles. There were some conflicts of understanding but after talking through all designers agreed that the principles that repeated mostly in which level were the owner of it. So from bottom to up, we had now principles defined by relevance:
1. Contextualized
2. Empathic
3. Simple
4. Flexible
5. Enchanting
6. Synced
7. Audacious
As homework, all designers should write a few lines about each principle and then our content editor/copywriter would interpret combine them into our final principles. Looks like a lot of work, but doing it is really good to align designers ideas and bounding
Design system
The improvements of the design system started when the initial design team at PicPay decided to switch the working tool from Sketch to Figma.
In the beginning, the designers were creating a library of components for each one of them, so the team decided to solve this problem by giving focus on creating a Design System.
To start we mapped out the components and separated them based on categories and how often they were repeating in the app, so we could decide which assets exclude/stop using.
In this process, we had to limit the amount of fonts styles, color variations, icon types, navigations and etc. We took this moment to clean the house and put everything in order.
After that, we created components based on the Atomic Design methodology. We started with tokens (atoms), molecules (simples components), organisms (complex components) and cells (templates/complete features).
This definition can be done by the team or someone in the team responsible. Every product is different and there is not a recipe for everyone, the team needs to find what works better for them. The main goal is to keep your design structure aligned with your design principal. This will keep everyone in the team focused on the design principles.
Tip: The best moment to involve developers is after the Tokens part is done because they will have a lot to document and the design team will be able to work on the next components in the meantime.
Unfortunately, I was not able to finish this work because I got a job offer at Monese. This is the outcome of it by the time I left:
Structure
Components details
