Home

Cemex DLS (2017 - 2021)

The development of a design language system for CEMEX represents one of the longest projects that I have been invested on due to the complexity of its nature and the characteristic of being a living entity that renews itself constantly.

Project Justification

  • Unify all Cemex software under a unique visual identity.
  • Speed up the turnout of design compositions.
  • Provide a robust front end development framework.
  • Have control over the Presentational layer of applications.
  • Define scalable design processes.
  • Diminish app development budget.

Team and Responsibilities

Benchmark

  • Google Material Design
  • Apple Human Interface Guidelines
  • Twitter Bootstrap
  • SAP Fiori
  • Ionic

Main project stages

  • Creation of the visual style guide.
  • Generation of a symbol library for Sketch.
  • Creation of the DLS website to distribute the information and resources.
  • Creation of code samples to achieve desired look and feel.
  • Creation of a cross-framework web component library to eradicate inconsistencies.

The style guide

A first step to get our designers aligned in terms of branding, visual aspect and content guidelines. It was romantically ideated and distributed as a PDF file.

Styleguide takeaways

  • Updates were difficult due to the "editorial" characteristic.
  • Multiple versions were circulating around the deparments.
  • Consistency within projects wasn't optimal due to diverse interpretations.

Consistency as a goal

With the aim of achieving complete consistency in our deliverables we had to evolve from the PDF styleguide to a proper compositional tool. The goals were the following:

  • Integrate the library directly in our design software (Sketch)
  • Centralize the resource in the cloud so it could receive updates automatically.
  • Build symbols around atomic design to ease the updates and standardization.
  • Define a mobile version for every desktop component and viceversa.

A centralized symbol library

The desktop / mobile symbols

Informing our user base

Distributing modern design systems for digital applications cannot solely be an editorial effort to ship a PDF. The web has so much depth in terms of interactivity that represents the main way to consume this type of resource. I went on the effort to create the website to serve our audience.

The DSL Website

It's about finesse

It's common knowledge that most developers do not have the visual awareness that designers have. This translates to unproper execution of design compositions and we certainly were experiencing it first hand.

Aligning the conversation

It was our main priority to eradicate the disconnect between the designers and developers. This was causing major problems in the time of development and quality of the tools. The reason was simple, developers could not, or did not want to follow our code samples.

This was our solution:

  • Create a web components library.
  • Make use of the Shadow DOM so that CSS could not be overwritten.
  • Mirror the design library so that all components had a software counterpart.
  • Create wrappers for Angular, React, Vue, NEXT, etc.
  • Document the library well so that it's cristal clear to develop with.

The components Library

The loop is now closed

The CEMEX DLS is now a complete system in constant evolution.

Having applied technology to design operations, has allowed us to close the gap between our designers and developers.

We have standardized the way project teams communicate around UI.

The benefits can be measured in the quality of the deliveries and the millions of dollars saved in development costs.

DLS Applications

...Eppur si muove

Interaction - Olivia Chatbot (Cause why not?!)
Interaction - Login Screen
Interaction - overlays
Interaction - Tabs (desktop)
Interaction - Stepper (Mobile)

Further Reading