Jusbrasil

Democratizing access to legal information through technology.

The client

I joined Jusbrasil as their second senior product designer of design systems, to design on top of the work that was initially being planned to design by Caio, the lead designer of my team. My initial mission was to create a better design foundation for the design system to scale to the product itself, building a brand new redesign for the platform.

The challenge

The biggest problems found was the lack of alignment between what was developed and what was designed and the lack of scalability of the current design system they were using. Joining this with the fact the we wanted to redesign the platform to a new modern design more aligned with our brand that was recently redesigned, we started to create a brand new design system for the company.

The solution

We started the creation of the new design system (not only new components but also the entire foundations such as new palette of color, spacings) and the redesign of the platform.

2 big takeaways

01. Overhauling the website with the new design system
02. A design system for all kinds of people

Headquarters

BA, Brazil

Industry

Legaltech, Lawtech

Company size

201 — 500

Deliverables

User Interface
User Experience
Design System
Design Operations

Credits

Lead Designer: Caio Ávila
Designer: Luis Fernando Lima
Design Ops: Ana Assumpção
Designer: Ivan Motta
Accessibility Designer: Malu Dini
Accessibility Designer: Joyce Rocha
UX Writer: Matheus Galvão
Engineering Manager: Anderson de Oliveira
Software Engineer: Raphael Andrade
Software Engineer: Rafael Melo
Brand Designer: Maria Carolina Barbosa

Resources

Inter by Rasmus Andersson
Illustrations by MAREACAROL, Larissa Monteiro & Maryana Santos

01. Overhauling the website with the new design system

As a first step in the design system team, I did research on what Jusbrasil was and what it could become in terms of consistency and visual relevance, and based on that we created several concepts for specific pages on the site using new components. that we were testing together with developers and the branding team.

Concept

We took the opportunity to connect the new landing page with marketing content, attracting users to other stages of connection with the platform, talking about other products and other points of contact, such as our API and our Newsletter.

Product marketing

02. A design system for all kinds of people

Together with other designers, I was in charge of creating Farol, the newest Jusbrasil's design system. Multiples steps were taken, I had to audit the entire website, mapping all styles, spacings, treatments and components we were using, so we could recreate everything we had in production, but easier, modern, compelling and with our new brand being reflected.

Brand new design system

In order to make sure the new design system would work for every stakeholder, we tested the new handoff sheet with developers, asking them to code a component based on what we had. The results were amazing, we saw 34% more efficiency while using our new handoff and design tokens to build a new component.

Consistency at scale

By including best practices for accessibility into design components, we ensure our design system and all our products are inclusive. Solutions are defined once, and repeated throughout brand and development.

Integrated accessibility

For us, a design system is only successful if it is used globally by our entire team. That's why we understood that 75% of our future work would consist of talking to people to transform them into defenders of the design system. From then on, we devised strategies to achieve our goals, and one of them was to give spotlight to our team.