Design at scale: a new design language for IBM
Creating a unified brand experience experience across an enterprise company with a vast product portfolio is a hearty challenge. But the value in doing so has a lasting impact on the productivity of its design teams and on the experiences of those who use its products and services.
Such was the case with IBM, whose software and services portfolio spans hundreds of offerings that serve an incredibly diverse community. In 2013, we partnered with the company to create the IBM Design Language. Our goal? To drive unity across their offerings portfolio while also providing enough flexibility for product teams to tailor designs to the specific needs of the people who use their products.
Unity, not uniformity
Over the course of a year and a half, we worked closely with IBM to design, validate, and engage their design community with the new IBM Design Language, which encompassed front-end development as well as visual, interaction, and user experience design. In addition to the asset library, the language provides a set of guidelines that product teams can use to tailor experiences for specific customer needs.
First things first: defining the IBM identity
Having been led by legendary design minds like Paul Rand, Eliot Noyes, and Charles and Ray Eames, we couldn’t ignore IBM’s impressive legacy. We paid tribute to this history by ensuring the soul of IBM was expressed within its assets—from icon design to component libraries. Our main challenge was creating a living design system that could adapt and expand while still preserving the brand’s defining characteristics and attributes.
As with any comprehensive system, we needed to start with something simple and scalable, so we began by establishing IBM’s icon and illustration guidelines. We drew inspiration from IBM’s design archives to ensure our designs aligned with their personality—straightforward, precise, and timeless, a blend of precision and artistry. These guidelines served as the foundation for the rest of our work, and played a key role in the library’s cohesiveness.
We expanded the design language through signature motion design by drawing inspiration from the company’s industrial design and iconic hardware heritage. We immersed ourselves in vintage footage of original IBM products in motion. By paying close attention to machine motions in relation to functions, we defined a new animation style that incorporated a familiar aesthetic that was reminiscent of the company’s roots, but functional in our digital age.
But, we also wanted to educate and highlight the importance of motion as a design element within an engaging user experience, so we also developed guides that outlined how to design and implement consistent motion design.
Form & function
The unique moving elements of IBM’s equipment were incorporated into a library of intuitive animations and components that capture the feeling and movement of their products.
For easy use and access, we standardized front-end code across IBM products and platforms, and created a GitHub repository to store the code. Product teams are now able to refer to the repository for reusable and customizable assets and easily implement rapid, responsive animations.
An open design resource
Three years since it was first launched, the IBM Design Language is a living framework that continues to evolve to better serve developers and designers, while creating more engaging experiences for customers. Since its introduction, hundreds of IBM software and service offerings have been refreshed—and the language is being used and continuously expanded by thousands of IBM employees—equipping users with effective tools that guide them to produce and enjoy consistently delightful user experiences.
You can explore the IBM Design Language, too - complete with visual components, guidelines, and extensions.