- 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
- Google Material Design
- Apple Human Interface Guidelines
- Twitter Bootstrap
- SAP Fiori
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.
- 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.
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.
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 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.