Blog: Hello Design System World 👋🏽

Manny Becerra as a child

May 2016

tl;dr Having an agreed-upon, yet flexible, common design language between teams is a three-thumbs-upper 👍🏽👍🏽👍🏽. But it's only going to be as good and useful as your team's individual and collective level of empathy toward your users' experiences.

Background

The last several years, I have had great opportunities to grow into leadership positions in the tech and people spheres. During this time, I remained (and remain) close to the work that my product, design and software engineering teammates experience day-in, day-out... within reason and intention.

Let's unpack that, starting with the latter part: I believe in building up teammates' level of responsibility and leadership opportunities, in other words, #PayingIfForward. This requires a hands-off approach from me in some respect while remaining available to provide both the vision- and tactical- level support as needed along the way. Plus, I still very much enjoy wrangling code and pixels.

“A mentor is someone who allows you to see the hope inside yourself.” — Oprah Winfrey

I remain close to the ground to stay near the problems that need solving, both, immediately and long-term. This doesn't mean I need to make the micro-level, minute-by-minute decisions, nor do I want to: this is why I build, mentor and trust my teammates' judgment (See prior paragraph ☝🏽). What this does mean, is that I carefully listen, observe, study and reflect on the problems I experience personally and reported on by my teammates on our processes and products, including feedback from our users. One important thing here though, is that we -- folk in the tech world building the products -- often overlook that we too are inherently customers of our own products, or should be. If we change our perspective to also include ourselves as customers of our own tools, and of our products and processes, than perhaps we can further, level-up the the quality and experience of such tools and products for both ourselves and our user base. #Empathy

Design System: A Common Language Between Teams

With this in mind, one area I have observed and experienced directly, time-and-time-again, in the design, product and software engineering world that would benefit greatly from some intentional (re)focus and curating on is the adoption of a common language between said teams; in other words, a design system. A design system is not entirely new, and they exist now by other names in other disciplines.

Projects can get messy; especially, in the ever-changing tech world. Learn about and leverage design systems to help bring order-to-chaos and assist with scaling your projects with quality, consistency and confidence.

For our purposes and context, we're focusing the scope and meaning of a design system to mean: a common visual language agreed to and used by cross-functional teams, typically but not limited to design, product and software engineering. Other teams can and often do include marketing and sales, but with varying degrees on how they use the design system for their respective goals. This common visual language can then be used for creating robust, extensible and consistent UI pattern libraries, for example, that are used by said cross-functional teams for developing consistent, high-qaulity products and features. More specifically, when there is a common set of goals and patterns within a visual language, cross-functional teams can not only work more efficiently, but can do so in a more confident manner, knowing that their independent and collaborative work is conistent with the product's brand with the added potential of more easily scaling the work and implementing iterative changes on varying product concepts with high-quality. And, with that, the main users, or our customers, of the product become the ultimate beneficiaries of a high-quality, consistent brand and user-friendly product. It's a win-win. 🙌🏽

Okay.

So, I'm excited to be formally supporting my colleagues' work in assembling a design system for the digital work we do on tesla.com and internally throughout the company. It's exciting to see this effort be taken from an internal grassroots level (something we've been researching and building out on our own in-between the high-volume of work we put out on any given day) to a more formalized project with support by other leaders. I'm excited to contribute to this work not just from a leader role, ensuring the team has what they need to focus on this project and make progress on it, but sharing ideas and thoughts directly on reusable patterns and designs along with helping setup the internal infastastructure (e.g private npm registry) and facilitating the company-wide adoption of our in-house design system. ✨


Manny


I have a passion and successful track-record for creating usable, online, experiences with a focus on and deep appreciation for web standards, modularity, education, accessibility, and inclusion. I build and lead happy, productive and empathetic cross-functional teams within a continuous learning culture. I am a speaker, advisor, community builder and advocate. Learn more.