IDL 2.0

The Context

There were 16 organically created design systems within IBM, each interpreting and expressing the existing IBM Design Language v1 in their own way, which created fragmentation in how we present ourselves to our customers.

The Work

The team was divided into multiple workstreams such as type, grid, icons, components, performance, and motion. Each workstream made weekly playbacks of their researches and explorations for alignment and cohesion. At the core was the ethos workstream led by Todd Simmons, the VP of Brand Experience and Design, which laid out the conceptual foundation on which all workstreams would design and build.

We also worked with strategic partner teams from Cloud and Watson to test the new designs and constructs in real-life situations.

Motion: Delightful Function

My Role: Workstream Lead

Motion is not an afterthought or decoration anymore. Good motion is good business in the digital world.

As the workstream lead for the motion design team within Duo, I worked with the team to look at motion and motion design from the most fundamental aspects to the final deliverables to guidelines and tools.

Maker pain points

We conducted maker interviews to understand their pain points. Some of the main learnings included: the high cost of motion design, the lack of understanding of the importance of motion design in the modern digital market, and the lack of standardized and easy-to-follow guidelines and tools.

Collaborators

Shixie Trofimov, Inhee Bae, Akira Sudoh

A foundation that lasts

Based on user pain points and other researches, we created a set of goals, which included a comprehensive motion guide, clearly defined specs, and tools to allow easier adoption for both designers and developers.

We understood that there wasn’t any truly fundamentally solid motion design. We wanted to make something that will continue to express our values and philosophies while still delighting our users and helping them.

With this ambitious goal, we set out the following focus areas:

• The anatomy of motion (types, spatial and temporal, motion curves, and the science)
• Competitive analysis (5 design systems)
• Motion studies (expressions and perceptions)
• Conceptual constructs to express the Duo principles
• Choreography

The new constructs of IBM Motion

Through extensive studies and explorations, the following motion principles and the two core design constructs were proposed:

• Be essential
• Be efficient
• Progressive

Two motion modes

Realizing the need for different motions based on the user’s experience moments, we created two distinctive motion modes—the expressive mode for key moments in the user’s experience, the productive mode for the normal usage.

Dynamic duration

Recognizing that the duration of motion is crucial in defining the look and feel and that the distance or the amount of change needed to impact the overall duration to maintain a consistent expression of the brand, the team created a new concept of dynamic duration, which pushes the available web technologies even further.

Motion at Scale

Designing something is half the game. We developed a comprehensive suite of documents and tools to support designers and developers.

Motion specs & guidelines

Detailed and precise motino specs and guidelines based on the constructs were created and published on the IBM Design Language site, with over 100k visits since release in 2018.

Motion package

A fully coded NPM package along with predefined CSS classes and utility functions were created and distributed with over 136k downloads so far.

Motion generator/calculator

Addressing one of the core conceerns and pain points around the difficulty of using motion, this tool was also designed and released through the IBM Design Language site.

Foundations for Good Design

My Role: Sr. Designer

In order to establish greater consistency across the very large footprint of IBM through multiple channels and practices, including digital, print, broadcasting, installation, I worked with a fellow designer Chiu Ping Chiu to explore the actual applications of the new IDL elements in real life—how we express our values while creating designs that are efective and functional to our customers.

The outcome of this work have been published and/or shared to many adopter teams as guidelines and reference materials.

Collaborators

Mike Abbink (creative director), Chiu Ping Chiu (lead)

Enabling innovation

The new 2x Grid was created based on the concept and philosophy of Duo, which expresses the brand values while also creating a parameter around design for greater consistency across all things design at IBM.

One challenge for adopters was translating the old generic grid systems, as this new grid system was fundamentally different in that it was created to be opinionated and personal, as opposed to generic and versatile, like the 12 column grid system. I created guidelines and recommended grid uses through extensive studies in collaboration with other designers, including Chiu Ping Chiu and Cameron Calder.

How to tell a story

With the foundations, our next stop was, naturally, providing design guidelines. This was particularly important because, through the initial research, we learned that there was a large number of non-designers designing and creating pages.

With this target audience in mind, we went on to author and publish design guidelines with heavy focus on the foundations of design such as layout, user behavior, etc.

Carbon Components: Meticulously Easy

My Role: Sr. Designer

In addition to motion design, I also worked closely with other designers to create new components that utilize the new typeface, colors, and icons, and express the Duo philosophies and principles.

Recognizing some of the major pain points of the makers regarding components and the difficulty of creating harmonious designs, we started with the idea of components as Lego-like, systemically, and meticulously designed building blocks that fit together naturally and that allow designers to create consistent, coherent designs easily.

Collaborators

Mike Abbink (creative director), Chiu Ping Chiu, Shixie Trofimov, Erica Raymond, Denise Shaw

Design, test, iterate. Together.

Armed with the elements and components, we worked with some of the sponsor adopter teams such as Watson Assistant, Cloud, and Security to test our new design language and components, and iteratively improved to make sure that what we design can actually be used successfully in real-life situations and serve our customers.

Show, Don’t Tell. IDL 2.0 Illustration

My Role: Sr. Designer

Illustration can be an effective and powerful storytelling tool. When the IBM Design Language Illustration team was created in 2019, I started working with other members from different BUs to study, explore, and create new illustrations. These studies and findings were published successfully on the IBM Design Language site in 2020.

I conducted studies around the systemic aspect of illustration, particularly focusing on the isometric style—the system of the style as well as the more technical side of potentially building a library of reusable assets.

• Isometric style dimensions and angle
• Fidelity levels
• Mixed styles (isometric and 3d)
• True 3d style color and lighting studies
• Illustration asset library explorations

Collaborators

Mike Abbink (creative director), Chiu Ping Chiu, Shixie Trofimov, Erica Raymond, Denise Shaw