Screen Shot 2019-06-12 at 10.33.14 AM.png
 

CREATING A BRAND ETHOS FOR IBM’S DESIGN LANGUAGE SYSTEM

Ethos
the characteristic spirit of a culture, era, or community as manifested in its beliefs and expression.

Screen Shot 2019-06-12 at 10.08.39 AM.png

For over a hundred years, the people, technology, and problems at IBM have changed, but the company’s values stayed the same. In 2014, IBM Design shared the first version of our design language publicly. Three years into its existence, with the addition of more guidelines and resources, it was time reflect and research the adoption of the design language—by talking to teams and observing their ways of working.

One major theme kept repeating in our research. Teams received conflicting design directions from product, brand, and marketing. Not only were teams confused, so were customers. The experience of attending an IBM conference, going to IBM.com, and using an IBM product felt drastically different. We needed to connect the dots across every step.

 

Users
All IBM product teams, business partners

Employer
IBM

Location
Global

Role
Design lead, team of 20+ creators,

Main accomplishment: Aligned three corporate business functions and created enduring relationships between executive leaders in product, brand, and marketing as we invented a holistic, company-wide design philosophy and system. This included the unification of over a dozen sub-systems across IBM built in a variety of frameworks including React, Vue, and Angular.

Team
Mike Abbink (ECD), Todd Simmons (VP), Daniel Kuehn, Chiu Ping Chiu, Shixie Xi, Wonil Suh, Conrad Ennis, Erica Raymond, Denise Shaw, Sadek Bazarra (CD), James Rauhut, Trevor Wong, Pete Garvin, Cameron Calder, Doberman, Buck (contract)

Responsibilities
Concept development, creative direction, design strategy, design research, UX design, writing, design facilitation, leadership

Experience
Explore the site: IBM Design Language

 
Screen Shot 2019-06-12 at 10.19.50 AM.png

Our goal was simple: give one definitive design direction, guided by a shared ethos. Make the brand instantly identifiable to customers. Then, scale the direction across the end-to-end experience of everything made by IBM.

 

PROCESS

Screen Shot 2019-06-12 at 8.19.32 AM.png
Screen Shot 2019-06-12 at 8.20.21 AM.png
Screen Shot 2019-06-12 at 8.19.43 AM.png

In order to accomplish our mission, the brand, marketing, and product teams decided to collaborate as one. First, we let go of past work and evolved towards one direction together. It was equally important to have a shared backlog of goals and tasks we decided on as a group. We hosted cross-disciplinary feedback sessions and retrospectives. While it took time to develop a sense of team across multiple geographies and time zones, in return the investment gave us stakeholder alignment and a clear vision. We started shaping our shared philosophy by identifying the unique value IBM brings to the world: helping humanity embrace technology, dedication to education and research, and a commitment to partnership and progress with our clients.

 

Big, simple, true: the ethos


Once the team started grooving, we built concepts off of a metaphor we originally coined, “duo.” Duo is an idea and an ideal, or aspiration, for IBM. It represents the tried-and-tested, trust-forming, give-and-take of human and machine relationships. Duo is a word and a number; it’s where language and art meet math and science. Born from duo, came our ethos: If IBM’s responsibility is to think, then the role of design is to guide. We used this belief to measure success and rationalize every element we designed in our system.

Screen Shot 2019-06-12 at 10.20.41 AM.png
 
Screen Shot 2019-06-12 at 8.10.12 AM.png
Screen Shot 2019-06-12 at 7.57.08 AM.png
Screen Shot 2019-06-12 at 8.17.20 AM.png
Screen Shot 2019-06-12 at 8.10.55 AM.png
 

Human meets machine typeface

The first element created with our ethos in mind long before it had been put to pen and paper was the typeface. Executive Creative Director Mike Abbink invented the type and drew the letterforms, and from there, our team took inspiration from the shapes, geometries, and architecture. For example, the machined, right angle of the letterform’s interior paired perfectly with the softer, humanist exterior. We applied the decisions behind these kinds of details to IBM’s icon system.

As a designer, my role in this work was to develop a typeface proposal and call for typographers who we could commission to do this work. I provided input on the name for the typeface. I also put together a business case to pitch for making this typeface open source. With one of the largest language sets in the world, IBM Plex is now available to the world on Google Fonts and is also used by students for educational purposes.

Explore the story behind IBM Plex.

 
 
 

Instantly identifiable iconography

Once the typeface was created, the team refreshed our icon system to bring balance and harmony across the elements. Four key shapes were used in developing the icon metaphors. In addition to providing day-to-day creative direction, I was responsible for icon testing for global audiences in digital and physical environments. Because IBM customers live and work in over 144 countries around the world, it is essential that the icon metaphors work across cultures and are also easy to recognize for people with low vision.

Screen Shot 2019-06-12 at 7.57.29 AM.png
 
 

Big blue color palette

In the 1970’s, Eliot Noyes hired Paul Rand and a host of other now famous designers to create the first corporate brand. Since then, the name IBM has become synonymous with its primary brand color, “Big Blue.” In the design system, we sought to bring blue into the digital era, giving it an electric energy while ensuring accessible color contrast across values. Blue 60 is the primary action color for all product UI, making it easy for users to navigate and take their next step.

We limited the brand down to two palette types: cool colors and grayscale (including black and white). This duality gives users the ability more quickly perceive success, alert, error, and warning colors (green, yellow, red, orange) because they stand out from the cools and neutrals. Cooler colors work well on dark and light user interfaces, and reduce eye strain for multi-hour usage productivity software.

 
 
 

Multiples of two: grid and spacing system

In order to practice good typography and layout, it’s essential to have a strong grid. Taking a content first approach, we wanted the display of information to enhance, not hinder, the reading and productivity experience. In order to do this, we wanted to develop a 8 x 8 pixel grid system which could offer an elegant vertical and horizontal rhythm for the showcase of any content.

Spacing units play the support role to the underlying grid. We based spacing on multiples of 2 (4, 8, 16, 32, 64, 128, etc.). These “spacers” are the invisible areas between blocks of content which give it form and shape. We changed the grid from 12 to 8 columns to provide an easier decision making process for layout, and created the concept of mini-units to help pace content as it falls across margins.

 
 
 
Screen Shot 2019-06-12 at 7.57.51 AM.png

Productive and expressive motion

Motion is the body language of a product. Inspired by duo, we developed two easing curves which produce very different feelings within the user interface. The majority of components employ the productive easing curve, which provides a faster ease out and creates the illusion of speed. The intent of this curve is to help users feel momentum, stay in a flow state, and sense progress because the component does the job and then quickly exits the stage.

Expressive motion is intended to be used in components which ask for attention, like a notification with an alert or a modal which celebrates success. The expressive curve is used sparingly so it is more obvious when it occurs. In tandem, the productive and expressive movements create a rich layer of feedback and help reinforce the tone of the user experience.

 
 

Illumination: light model

Light is the medium of software. It illuminates our screens, incites emotion, and responds to user behavior with sensitivity. When people interact with our system, components illuminate in hover states, press states, etc. which increases the user perception that the system is aware of them and helping to guide their next moves. Like a light table, illumination comes from behind and as the person uses the software, components get lighter upon interaction. The contrast of light and dark is used to create foreground and background relationships and suggest depth, as opposed to traditional drop shadows.

Screen Shot 2019-06-12 at 7.59.15 AM.png
 

OUTCOMES

Screen Shot 2019-06-12 at 10.44.24 AM.png
 

Designing documentation

With a handful of system elements, we wanted to provide educational guidelines. empowering teams to apply the new language across every physical and digital design. On the site, the left menu gives teams topic-level guidance while the global menu icon on the right enables teams to switch between marketing, product, and brand contexts. These architectural decisions aimed to address the original challenge teams had with receiving conflicting guidance across businesses. Now, all the documentation provides consistent direction and behaves, look, works, and sounds the same.

The website was created by IBM with support from Doberman and Buck creative agency. My role involved co-creating the information architecture, leading creative workshops for concept development, conducting user testing across teams, and writing and editing copy for the site.

Screen Shot 2019-06-12 at 11.02.18 AM.png
 
Screen Shot 2019-06-12 at 8.31.48 AM.png
Screen Shot 2019-06-12 at 11.05.08 AM.png
 

End-to-end experience

With different goals than the first version of the IBM Design Language, the IBM Design Language System brought unification to every touchpoint a person might interact with when they engage with IBM.

We rallied around our brand values, and then decided upon the relationships across each element. Philosophy first, system second. Every Friday, we hosted an open, three hour critique to debate designs. Putting our ethos before our product created an outcome which reflects the belief we have in the role of design as a guide for the human and machine relationship. With the launch of a new visual language, interactive components, and robust tools, we not only refreshed the aesthetic but reinvented how we define design.

This project (much larger in scope than what’s shown, including development) took close to three years, and is ever-evolving. Dozens of product, brand, and marketing teams co-created and rigorously tested the new system. Without surfacing their wants, needs, pains, and contributions, the system team simply could not have provided impactful, soul-stirring solutions.