Diego
Cobelo

Design System Lead at ExxonMobil

Diego Cobelo is the design system lead at ExxonMobil. He is passionate about design, especially UI, where he combines design and technology for engaging experiences. He comes from Buenos Aires, Argentina. His expertise spans branding, marketing, communications, and web development. He holds a Bachelor's degree in Graphic Design and IT.

Can you walk us through the current state of the design system you're involved with?

Today, the Standard Design System is widely employed across internal ExxonMobil websites, encompassing over 3000 web projects. Our toolkit comprises comprehensive guidelines, UI components in code, and a UI kit in Figma and XD for seamless design and prototyping.

The next milestone for Standard involves its integration into ExxonMobil's public websites, necessitating its evolution into a multi-brand platform. To accomplish this, we are diligently working on implementing design tokens.

Standard's journey commenced in 2016 through an internal collaboration with Big Medium, the agency spearheaded by Brad Frost, Dan Mall, and Josh Clark. It wasn't until 2020, when I assumed the role of Design System Lead that we established a dedicated design system team. This year, we achieved a significant milestone with the launch of a major release. This release involved modernizing our platform, redesigning key components, and enhancing accessibility.

This article delves deeper into this transformative journey:

What tools do you use to build and maintain your design system?

Standard currently utilizes Storybook for components and documentation, and Figma serves as our UI kit for components. Additionally, we have an Adobe XD UI kit, although it is being deprecated.

OUR TOOLS:

Figma

Storybook

How do you balance the need for consistency with the desire for creative freedom among your designers?

That’s a really good question; in my opinion, design systems should solve the boring and repetitive stuff designers do, leaving them more time to learn about the problem and to create innovative solutions.

In some cases and for particular projects, we understand the need for uniqueness. However, we should always follow the brand principles and guidelines.

How do you stay true to your vision for the design system, even when faced with external pressures or trends (criticism or pushback against your design system)?

We defined four principles that guide our design system: integrity, practicality, clarity, and simplicity, so we evaluate new features, requests, and updates using them.

Integrity

Standard embraces a tightly knit and relentlessly consistent visual logic. It achieves this coherence using atomic design principles, constructing larger components out of related smaller ones. It is predictable and no-nonsense, with a discipline that suggests stability and confidence. Integrity also underlies Standard’s dedication to “do the right thing” following best practices for accessibility, security, and responsible performance.


Practicality

Standard values efficient interactions that reduce user effort. Its interface controls are visually restrained so that content and data are always the focus. It relies on familiar, readily understood design patterns wherever possible. It departs from established practices when it can improve upon them, but never just to be different.

Clarity

The text is legible, and the data presentation is precise and insightful. Contrast, size, and spacing are sometimes exaggerated to create a noticeable hierarchy. Ornamentation is limited and intentional, always underscoring meaning, not just simple decoration. Standard’s design sensibility is simple, plainspoken, and direct. It is approachable but not showy, with a solid and durable manner. The style is minimal without becoming cold or harsh.


Simplicity

Standard works simply and efficiently. The interface is subtle, focusing on the content. It is fast, with as little friction as possible. It is predictable and consistent, with limited styles and animations. It favors familiar design patterns that users know.

We defined four principles that guide our design system: integrity, practicality, clarity, and simplicity, so we evaluate new features, requests, and updates using them.

We defined four principles that guide our design system: integrity, practicality, clarity, and simplicity, so we evaluate new features, requests, and updates using them.

How does your team collaborate on the design system? How do you ensure that your design system evolves with the changing needs of your users and stakeholders?

To align our design system with our business needs, we've established a governance team comprising senior designers and developers representing various teams within our company. This team provides direction and promotes adoption across different organizations.

Are you tracking your design system? If you had to choose one metric to measure the success of your design system, what would it be and why?

Currently, we track internal usage through web analytics, monitoring various metrics such as the number of different users, sessions (indicating returning visitors), design system package downloads, and hits per page (each page in Storybook represents a different component).

For the UI kit, we rely on weekly summary emails sent by Figma, providing us with the number of views and downloads. Design system analytics are not included in our current plan.

Our plans involve tracking projects using the design system by querying GitHub, monitoring Figma usage per component, and tracking the number of external-facing websites utilizing our components.

If you could go back and change one decision you made in your design system journey, what would it be and why? How would that affect your design system journey?

We should have formed a dedicated internal design system team to maintain and evolve our design system just after its initial release, which helped us stay updated with the industry.

Do you use any kind of automation or AI tools? 

We only use some AI prompts to help us when writing documentation, but I think AI will be a crucial player in design systems in the near future.

Where do you see design systems heading in the next few years?

I am not sure about the industry, but at ExxonMobil, having a company-wide repository of reusable UI components will help maintain consistency for our brands and create better user experiences for external clients. That's the journey we are on.

Laurent Thiebault

Sabrina Virgil

Zakaria Sahmane

Marie Delattre

Thibault Mahé

Simon Leclercq

Manon Polle

Jeffrey Macko

Design System Team

I wish more people understood the value a design system can provide.

I wish more people understood the value a design system can provide.

What's one thing you wish more people understood about design systems?

I wish more people understood the value a design system can provide. Having to demonstrate and quantify the benefits every single time can be exhausting. 

If you could have a coffee chat with any person from the design (system) space, who would it be and why?

I would like to have coffee and discuss this with Dan Mall and Brad Frost. I am curious about their vision for the future. If I can expand the scope beyond web design, I would love to meet Jony Ive and Dieter Rams. A table with all of them together discussing could be genuinely fascinating.

Dan Mall, Brad Frost, Jony Ive, Dieter Rams

What's one piece of advice that you would like people to remember from this interview?

Design systems are dynamic entities that evolve in response to business needs and are driven by a shared vision for their potential.

What's your favorite thing to do when you are not in design systems?

⚽️

⚽️

⚽️

Football. I am a River Plate and Argentina fan, and I don’t miss a match.

Diego Cobelo

Diego Cobelo

Diego Cobelo

The Design System Guide Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2024 The Design System Guide by Romina Kavcic

The Design System Guide Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2024 The Design System Guide by Romina Kavcic

The Design System Guide Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2024 The Design System Guide by Romina Kavcic