Design Systems – Wendell Fernandes

Advocate to Design Systems

A set of standards intended to manage design at scale using reusable components and patterns

Mission

Help teams work at scale contributing to a design system’s patterns and components that are reusable and functional.

Project Role

Lead designer and contributor to design systems framework.

Team Structure

Senior Product Manager
Design System Manager
Senior Engineers

Project Examples

Below is a set of visual templates of my contribution to a design system framework as well as patterns and components I’ve had the pleasure to design, helping teams I’ve worked with over the years.

To start, it’s always a good idea to understand the project in its entirety. This begins for me with what I call “The 360 Alignment Wheel“. I designed this with one purpose – to bring cross functional teams together to facilitate communication and better understand the full picture of any project.

In other words, WHAT, WHEN, WHERE, WHY, WHO, DATA are key points to find answers to. This also includes the participation of the Design System’s team and its counterparts. We are ready to start designing when this is properly addressed.

Initial Creation Process

Also, I believe it’s good idea to understand a component’s and pattern’s creation process. It’s the first “brick” in this full process, no matter how large or small the project is. It serves as the foundation for scalability. This is my process when creating components and reusable patterns.

Component Variables

Whenever we are creating specific banners for a set of interactions such as toast messages or notifications, we want to try to accommodate to all possible cases. Having a set of components ready will help both designers and engineers when it comes time to maintain this library.

Below is another example how to vary the component with both large and small characteristics.

Scale Your Work

Whenever we are creating reusable components, it’s crucial to keep them super organized. We need to keep in mind that not only designers will have access to these files but also engineers creating “tokens”, which then facilitates the use of this library across different teams.

Benefits of Using a Design System

I’m sure there are many benefits to advocating for the use of a good design system. Here are 12 benefits I find for designers, developers and teams in general:

1) Scalability
2) Maintainability
3) Productivity
4) Consistency
5) Improved code and design quality
6) Better knowledge sharing
7) Avoiding siloed knowledge
8) Closing the brand-product gap
9) Promoting the company’s design philosophy and principles
10) Better brand and guideline adoption through shared ownership
11) Promoting equality
12) Focus on team growth

Conclusion

Using a design system will drastically speed up the design process and workflow, not only that, but it will also make it much easier to scale projects in the long run. Keep in mind, one of the most important factors about advocating for a consistent library of components and patterns is communication.