
SLB - Global Design Language System (DLS)
Building a multi-brand design system from the ground up to connect global teams on a common design language foundation within SLB's brand portfolio.
Visual Designer
UX Researcher
UX Designer
SLB needed a design system, a framework that combines the set of reusable components, standards and documentation prodivind consistency in the products, streamlining design and development, and improving productivity. In short, SLB needed a standard that served as a bridge between various teams.
It's simple, SLB needed 1 design language so everyone is on the same page. Through 2019, Schlumberger (SLB) lacked any formalized design system. Brands existed on the web as separate identities with individual teams creating their own source of standards for UI elements, components, or modules–in both internal or outside agencies.
What we found:
-
Conflicting guidelines and direction.
-
Duplication of common components.
-
Inconsistencies across market websites and microsites.
-
Pressure for agile solutions without discovery and research.
-
Siloed teams working with disjointed communication.
Critical to the success of the system was the alignment of all our teams on the foundational elements for each brand. Pulse is structured to be scaled for each brand, meaning that our foundational system needed to account for every potential UI element. Our foundations supported our brand logos, grid systems, spacing scale, typography scales, color systems, and interactive language.
Foundations

Colors


We started with creating 3 different color palettes for light and dark theme.
-
Neutral Palette
-
Theme Palette
-
Semantic Palette.
Each palette performing specific functions.
-
Neutral Palette:
The neutral palette consists of the black, white, and grays that ground an interface. These colors are used on surfaces, text, and layout elements. When used in components, they often connote a change in state.
Visual Hierarchy: Use lighter neutrals on surfaces to highlight areas of primary focus and create a sense of hierarchy. This ensures a person’s eye is drawn to the areas of an interface that need the most attention or that will be most useful to them.
-
Theme colors:
Shared colors allow for quick mental recognition of components and functions across products. Using theme colors sparingly for identity, accent and highlight important areas of an interface.
In dark mode, the colors of the shared palette shift in saturation and brightness to reduce eye strain and accommodate visual accessibility needs.
-
Semantic Colors:
Select colors in the shared palette are specifically used to communicate feedback, status, or urgency. These are known as semantic colors and they should always convey important information.
Semantic colors communicate at-a-glance information by building on real world associations, like red for danger, yellow for caution, and green for positive feedback. Using them consistently and pairing them with other indicators help reinforce these contexts and decrease cognitive load.
Color Contrast
We focused on pressure testing all of our brands color systems, ensuring that we had sufficient contrast across buttons, input elements, headers, and themes overall.
Typography
SLB Sans
SLB Sans
Friendly, Modern, Versatile. It emphasizes readability and personality at different sizes.



Component Library




Throughout the design system we reference different component types such as global, structural, content, data, and utility. It was critical to define the differences between component classes so that design decisions are efficient and accurate based on the context of the page.
Using Figma we were able to create variations on each component multiple breakpoints but also layout variations such as image left, content right or vice versa.
Each component received stepped interaction examples so that expected interactive states are clearly communicated. These are paired with detailed specifications around tab stops, keyboard control requirements, spacing, atom and molecular elements.

Patterns
Patterns are used to show reusable combinations of components that address common user objectives with sequences and flows. These were developed in consideration of our global market rollout approach. While not every possible pattern was developed, this documentation served as the basis for our customers most common needs.

Governance and Documentation
The UX team knew that documentation and governance around brand implementation into our design language was going to be the key to the success and sustainability of the system.
Working closely with our design, content author, and development partners–the UX team created and maintained documentation resources in a Confluence space, ensuring that we included our design principles, quick start guides, accessibility standards and best practices for designing and testing, as well as brand governance documents unique to each brand.




Reflections
What was accomplished in the time the UX team had together was no small feat. We effectively built a white-label design system from the ground up, implemented 6 platforms into their own related systems, educated and led teams across the organization on web accessibility and the value of a common design language.
Looking back, we learned some valuable lessons:
-
Design systems are evergreen. They are living systems that require a dedicated team actively involed in their growth and maintenance. Facilitating adoption and cross-team buy-in is a challenge worth undertaking that ensures we all are presenting a common design language, that is familiar and consistent for any person interacting with it.
For Privacy reasons, I have only displayed an overview of the design system. Please reach out for the rest of the design system which includes Iconography, page templates, form controls, fonts, components, buttons & indicators, navigational elements, layouts etc.