Style Guides and Design Systems. Aligning designers for enterprise design

This is a chapter of the evolution of the design team at CEMEX to serve the entire company and create digital products for both employees and customers by adhering to the user experience process.

A design office is of course constituted by designers mostly, in our case, there are at least 10 specializing in diverse branches such as User Experience, Visual Design, Interaction Design and UX Development. It's a mix of very creative people who got ideas of their own, preferences, taste and diverse backgrounds. This of course makes them unique at solving problems through design, which can represent a challenge when everybody needs to be on the same page for the sake of efficiency.

Efficiency essentially translates to saving time, and thus saving money . Solving problems through design, not only has to adhere to those concepts but also has to do it in an elegant way.

This is why it is a very good idea to create a set of rules and boundaries for everybody to work around and achieve the goals of the organization with that efficiency in mind.

A page of the NASA standards manual

It is not a secret that defining a standards manual is the pillar of that orchestration.

Most designers think of this standards manual as this bible like book. This of course is a romantic vision of it, as nowadays the delivery medium has drastically changed. If it’s true that the end goal for distributing design languages and frameworks is the web, most likely your first steps will also be an editorial effort with a PDF deliverable.

You can distribute this one in printed and digital fashion.

This is how we started our contract at CEMEX, and within this manual you could find all of the guidelines needed to create a visual software representation. There you can find things such as design principles, brand treatment, colors, units and measurements, content guidelines, recommendations on how to address the user, typography, iconography, and more details things like visual components and interaction patterns.

Of course, as most of the things we work on the design team are software applications, a static rendering of many things is not enough for the consumers of our deliverables to completely understand.

A PDF file does not do a good job at transmitting information such as motion, interactive patterns and all of the behaviors of elements in different stages. This is of course where the web comes handy, as it is a medium with massive availability and grants us all of the necessary characteristics to deliver all of this information.

The web allows your consumers to find information easily without having to browse big documents. It also has the advantage of showing interaction patterns accurately. This may be by showing the actual software component or at least an animated representation of it. There’s also the advantage of being able to distribute materials that can help other parties to make their work easier, such as resources and all of the necessary assets to start building something.

Remember that the essential task of a Design Language System for software applications is to correctly represent the designers intent so that other teams responsible in the execution of the products can obtain the complete message.

At the design team within CEMEX we sow a service oriented culture not only for our end users, but also for all of those that are involved with us in the creation of software products. This is why, being extra clear in our communication effort is so important for achieving our goals within the organization. The better we do it, the better for the entire company it is.

UI/UX/Web Architect