IBM Design Core Practices

Core Practices Team

Timeframe

July 2014 to March 2016

Projects

  • IBM Design Thinking
  • IBM Design Language
  • Research for the Chairman
A compliation of work done at IBM, featuring process around the lemniscate logo for IBM Design Thinking and the touch guideline illustrations from IBM Design Language.

Role

I worked on the Core Practices Team at IBM, creating and delivering tools and resources to help diverse teams work better together, and further a user-centered design culture. My work focused on furthering the craft, practice and scalability of design across IBM’s business units.

I led the design of a flexible type and spacing system for IBM Design Thinking site and future ibm.com/design properties. I conducted research, wireframed experiences for an app at the request of the chairman, and contributed to content development and final production for the IBM Design Language.

IBM Design Thinking

IBM Design Thinking provides scaffolding for teams across IBM, whether product or client facing to tackle problems together, at any scale. While it shares some similarities with other design thinking methods, it has a few modifications: including sponsor users, playbacks and hills to increase scalability, speed and alignment. The intention of this update was to increase access to the material, widen its reach and adaptability.

Final System

The final deliverable for this project was two-fold. The IBM Design Thinking site was initially launched in January of 2016, and the second a collection of sass files. These sass and handlebar yaml files allowed my team to mock up content locally and see it in their browser, add images, etc. This increased our productivity, giving us access to up to date contentand and simplified sharing across our team. I also played a contribution role in the visual design.

I worked in conjunction with content creators and developers to create a customizable type and grid system that puts content first, to decrease the time and effort needed to release new educational material, tools and other resources to the greater IBM.

A preview of the IBM Design Thinking website, specifically the Sponsor User page.

Type Customization

The Practices team plays a large role in the creation and maintenance of educational content and advocacy for design across IBM. Therefore, it was essential that this content and all of our properties be easy to read, easy to scan, and in turn, easy to apply to different situations. I worked with my developer to implement type and leading customizations. Referred to informally as the sandwich rule, this code allows content to be sequenced in multiple fashions. Content can be clustered, or sandwiched, or content can be consistently spaced, depending on the ratios entered into the sass and yaml files. This customization allows content creators to choose and customize the reading experience through not only spacing, but also type scale, weight, color and other factors.

Research + Testing

I analyzed past content, noting what was successful and unsuccessful, including the IBM Design Language site, headers/type scale, etc. Mock ups were made to test past ui patterns such as carousel, drop downs, tab navigators, and resource sections. Using invision and working with my researcher, we created and tested interactive prototypes to assess the usability and value of each pattern. Working in tandem with content development, the desired experience was outlined, and the requirements for the type and grid system followed.

IBM Design Language

The IBM Design Language is an educational tool for IBM and the public, to think about, produce and implement designs that are on-brand, user-centered and ultimately great experiences.

A preview of the IBM Design Language website, specifically the Experience page.

I played a supportive role on this project, aiding in content development, and in the conception and production of illustrations and assets. Specifically, I contributed to the Visual Design, Interaction Design, Motion Design and Experience frameworks.

Line illustrations from the Motion Guidelines of the IBM Design Language. Illustrations describe the process of motion design, from initial sketches, to mockups and final implementation.

IBM Design Language | Touch Guidelines

Research for the Chairman

I worked on a small team to conduct design research to reimagine internal communications. User interviews, affinity diagramming, wireframing/prototyping, and testing were done to identify the root causes and provide recommendations for the app and experience. Due to confidentiality, artifacts and detail cannot be shared at this time.

A photograph of the more than 20 ft affinity diagram created for the app.

Affinity Diagram for Chairman Research

Retrospective

Working on the Practices team gave me a number of diverse opportunities. I learned a great deal about best practices and production, project management and development from delivering both IBM Design Language and Design Thinking. I got experience working with both large and small teams, and with people from a range of backgrounds, including engineering, marketing and administrative professionals and executives.

I have shared the work and information that is publicly available. If you are interested in learning more about any projects above or other work I completed at IBM, please let me know.