A little background
JOTA is a startup based in São Paulo and Brasília, Brazil. It main focus is journalism and technology, publishing news about Brazil's three branches of government in its website and a suite of services, tools and solutions called JOTA PRO, exclusive for medium/big sized companies and law firms. I was a employee there from march 2019 to may 2024 and this Design System is one of the projects I've created and worked on there with my team.
Our pains and needs
With a variety of products, tools, and mediums at our disposal (and thinking about what would come ahead), we were somewhat lacking in consistency and unity, which was weakening our brand. Additionally, we required something scalable and easy to work with, as we needed to produce with speed.
The principles
When planning our Design System, it was imperative to consider the design principles that would be our foundation, as to ensure coherence, efficiency, aesthetic appeal and brand identity. Here are the principles that we chose to work with:
Scalability
Our Design System must be accessible, easy to work with and adaptable to future changes
Consistency
Throughout color, typography and layout, we must ensure our Design System is robust
Unity
Our components have to be cohesive apart and together, to strengthen the brand
My pitch
With the plan in hands, I pitched the Design System to the whole team. Everyone agreed that this would be the right course of action. With the development team, we them started to think what technology we would use. Since our future projects would be in NextJS, the developers decided to work with something that would be appropriate.
Styles, patterns, rules
Before the components, we needed to establish the basics. Colors, typography, spacing, grid...
Components
Starting with the basics: the Button. And then growing exponentially. Below are some examples and variations of the components I've created. Soon you'll be able to see all of them in use, as I work on updating my portfolio with the projects involving this Design System.
The handoff
To ensure everything would work as intended, I went to a extensive process of specification of each and every detail of the components, and how would they behave in ”the real world”. I've put below some examples of how I documented the handoff for the Dev team.
Figma file
To check the Design System in all its glory, I've made available on Figma. Click on the title on the bottom (the one that says "Design System JOTA - Public") to view all the pages
Next steps
As our Design System evolved, we took the next steps to refine and expand its components to meet the needs of our stakeholders and future products. We began to focus on documentation to ensure that the team has a clear understanding of how to use and contribute to the Deign System effectively. Simultaneously, we prioritized the development of new features and enhancements outlined in our roadmap to support the creation of products aligned with the company's goals.
The team
- Lead Designer, Product Designer and DesignOps - Juliana Moreira (me)
- Product Designer - Stephany Tenório
- Director of Product - Paty Gomes
- Associate Product Manager - Brenda Farfoglia
- Developers - Isabela Previate, Sérgio Cardoso and Jéssica Ferreira
There where more people involved throughout the years, I'd like to thank everyone that helped put this project to life.
Tools: Figma and Storybook
Product cycle: 2021-now