Design system & Documentation

UI Design | DesignOps
European startup with a SaaS product, available in 3 languages, focused on property management of worldwide property portfolios (B2B).
As the only and first designer on the team, I had the challenge to start building the design system and bring more visual consistency to the product.
Proprli
Product Designer
Jan 2022 — Jul 2022
Approach: Because I still had my daily deliveries, I had to prioritize what to do first.
I mapped the most used components in the platform and build it on Figma so I could have a base and fix any inconsistencies while delivering the next features.
I divided the components using two main criteria:
How often the component is used in projects.
How much it costs to develop.
I managed to build the “basic” components (buttons, colors, texts fonts, inputs…) usually located on P1 area of the prioritization matrix.
Handoff: Since the developers weren't used to this new process from Figma, I decided to build a Figma cover system to help the developers find the files faster and it also helps to track the updated versions of the delivered features.
Along with it, labeled and colored arrows to make it clearer the correlation between screens.
Documentation: When I left I also built the first onboarding design guide (on confluence) to the next designer(s).

After a month, I received a positive feedback from the CTO of what the next designer though of it :
Sigalei was a 5 years old startup located in São Paulo (Brazil) that gathers open data related to the Brazilian government actions (bills, laws, executive decrees, parliamentary speeches) in federal, state and city levels and displays them on a digital platform (SaaS-B2B) along with information-crossing and insights that help the Public Affairs teams in organizations identify opportunities and risks related to their businesses.
Sigalei
UX UI Designer Jr
Dec 2020 — Dec 2021
The problem: During the past 5 years Sigalei had many different designers that worked solo building the features. That led to many design inconsistencies, usability problems and cost on customer support, huge component library, and slow product deliveries.

Approach: To educate the importance of building and evolving a design system through time, me (as junior) and my colleague (mid-level designer) did a presentation on how and why follow it.
The process:
1. Design research on design systems.
2. Research results were presented to the whole startup in order to get everyone onboard the process.
3. Definition of OKRs for the design system, based on the company's and product team's OKRs for the semester.
4. Mapping of the products interface and user flows.
5. Workshop with the whole team to establish Sigalei's principles.
6. Design from smallest elements to create scalable rules.
7. Using new products releases to test and learn about new components.
The outcomes:
- High costumer approval on the interface changes and better user experience.
- Decrease in time spent helping users to navigate in new features.

Since it was our first experience in establishing a design system, we based our new components on Material Design's guidelines.

Learnings:
- It's a continuous process and requires strategy, goals and key results, just like any other digital product.
- It requires the involvement of not only the design team, but also product, development, marketing, sales, management, and customer success.
Next project ➦