Design System - Wiser

Heyy Guys, 

I had the opportunity to work on building and implementing a Design System from scratch, from tokens to the first components at Wiser educação, and I am delighted to share it with you all!

The company

 Wiser educação it’s a holding ed-tech company that has more than 10 products focused on online education and 1 as a CRM intern platform. Because of that, we have +300.000 users.

The challenge

 Wiser has many products, and each of them has its particular branding with different proposals. Because of that, the Design System has to be agnostic and generalist so could be applied to all products and futures ones, which was the biggest challenge, because our scenario was a lot of files, different components, organizations, and no pattern between them, causing a big inconsistency.

 

 Main goal

 Our main goal was to launch and test the first version of the design system. Through this first version, we would have the consolidated base to continue the growth of the tokens, components and apply for other brands until all the products start to consume our Designs system.

 

 The Solution

 The solution was creating our roadmap, and we decided that the agile method was the best option. So, we started our research and started to stabilize all the steps that we would follow to launch the design system. We decided to create the first version and applied at checkout for 3 different products, so we could test the design/development and see how it works in the real scenario and after that, grow the implementation inside the company. The first step was to create the hierarchy of our files and documentation, second create the global and brand tokens, third the core components, and then the team components.

 

 Impact and results

 Through our design system, we bring so much value to the company, employees, and our users. First of all, we reduce the time of designs/developing new components which means our processes are faster and effectiveness resulting in profits for the company and productivity for employees. Besides that, now we have more consistency in our layouts which improves the experience for our users while using any products. And now we have a pattern of documentation and a stabilized process for creating new components and increasing our design system.

There's a lot of room for improvement, your feedback and appreciation are always welcome 😍

For work inquiry, send a massage to: mafematos20@gmail.com

Pleasure to meet you :)

More by Maria Fernanda

View profile