AR/VR: The crowd sourced new chapter of IBM Design Language

Shixie
IBM Design
Published in
6 min readMar 9, 2019

At the end of 2016, I joined IBM and dived immediately into deep waters — a VR project for managing Cloud infrastructure. Having almost zero experience in both VR and Cloud, I had to climb a steep, steep learning curve. Unfortunately, that project never saw the light of day, but many unexpected things did because of it.

Last year December, we published the IBM AR/VR design guidelines, adding a new chapter to the original IBM Design Language.

The guidelines consolidate learnings from multiple AR and VR projects big and small across the company, completed with UX patterns packaged as problem specific solutions. The goal is to provide an easy entry point for people creating enterprise solutions with immersive technology.

Teleport Waypoint is a useful pattern for designing VR experiences. Thanks to the contribution of Kris Schultz, IBM iX.

From incubating the idea to finally releasing it to the world, this project took nearly two years. Unlike the rest of the design language content, all of the AR/VR chapter is created by volunteers or came as contributions from different parts of IBM. There isn’t an official team and no upper management oversaw our effort. To me, publishing the AR/VR guidelines is not an experience that fits the classic pattern of “learning from failure”, but instead a serendipitous journey of meeting the right people and a testament to the power of community support.

An HUD concept design by Ramiro Galan, IBM Watson Health

Content Sourcing and the THINK Reality Guild

I started pitching the idea of a design language for VR after Cloud Management VR project wrapped, hoping to salvage some valuable learning outcomes from the past few turbulent months. It was around the same time when creators of IBM Immersive Data, an AR application, Alfredo Ruiz and Benjamin Resnick were just thinking about the AR perspective of the same thing. We immediately agreed these guidelines and assets belong together and could deliver IBM’s take on immersive technology for enterprise applications.

A VR data visualization concept designed for Cloud Management. See on Dribbble.

Although we have a ton of learning concluded from doing own research and working on projects, our experiences are still limited. As a result, the content felt a bit thin and lacked rigor. This is when Ryan Anderson, the technology strategist from IBM CTO office, found me through the grape vine and offered to get us connected with the other people in the company working with immersive technology. In time, this encounter has proven to be a lifeline for the AR/VR design guidelines project.

In 2017 March, Ryan along with digital strategist, Jack Mason, gathered all the AR/VR experts and enthusiasts in IBM together for a two-day summit where we learned about each other’s projects and geeked out on all the newest gears and tools in the field. This is the beginning of THINK Reality Guild, a self-organized group of designers, developers and data scientists working on VR and AR projects across Watson, Cloud, Digital, Analytics, Research, Design, GBS and GTS.

THINK Reality’s first gathering in TJ Watson Research Center, Yorktown Heights, NY, 2017 March.

Apparently there are an abundant amount of immersive projects going on within IBM! Alfredo and I were the only designers there. Seeing the multitude of projects encouraged us as this confirmed our presumed need for a set of principles and guidelines to unify design, share reusable assets, and assist future AR/VR designers and developers.

We shared our idea of an AR/VR design guideline to the members. At the time, it was only a content outline and three draft principles, but received overwhelming positive feedback. The THINK Reality guild members became the main group of contributors to the design guidelines. Getting contributions and feedback from Aldis Sipolins, the expert in the field, was extremely valuable, and gave me the confidence that even if we make mistakes, this project is still in good hands.

More importantly, THINK Reality spread the word. During the two years I led this effort, there were countless moments where I secretly wished this project would just go away. But then every once a month or so, I would get a passionate message from some corner of the IBM universe that someone has heard of my effort from a member of THINK Reality, and wants me to know a guide like this is much needed, and even asks if it is already released yet. This is the power of community support. It assures me that this project has value. And when that is true, a project seems to fuel itself, surviving months of stagnation when life gets busy.

Visual Design and Communicating Immersion

A self-initiated production usually could afford more creative direction, but not in our case.

Crafting the guidelines did not happen in a vacuum. It was important for us that the content is hosted where the other types of design guidelines lived, the IBM Design Language. Not only is it for organization, it is also a way we hope to encourage traffic and adoption. In order to fit in, the new content must subscribe to the existing content’s look and feel. This placed some serious limitations to what the visual design could look like.

The immediate implication is adopting the color palette, and try to extract the identifying features of the existing illustrations. Luckily for us, at the time I was actually part of the IBM Design Language team and already familiar with the format and visual design of the content.

Illustrations comparing diegetic UI, spatial UI, and non-diegetic UI.

The original iteration of the design language is born from IBM’s jubilant, although a little naive, return to design after decades of neglect, and the visual design shows it. Throughout the site, from icons to illustrations, the drawings are plain and bold; stroke weight seems undecided. Vibrant colors in headers, matching pastel colors for backgrounds, and very rarely do different hues mix. Every page feels overwhelmingly bright and simplistic, punctuated with angular, awkward geometric shapes.

When designing for the AR/VR guidelines, we chose a heavier average stroke weight and simpler forms to carry forward a required amount of consistency, but we decided departed from the original Design Language styles when we introduced the consistent 3D perspective to specifically address the needs of immersive mediums, a subject unique to this chapter. I thought it was only fitting that the isometric illustration became our main vehicle of visual communication.

Next steps

Today we have had our long anticipated launch, and a less anticipated migration to V1 domain of the design language archive. A new version of the IBM Design Language was released last month, and we have to temporarily hide the AR/VR content on the new site because updating all the designs quickly is simply unrealistic for a part-time team. Still, a big, relentless momentum keeps us going.

Teleport Waypoint illustration redesigned with new IBM Design Language styling.

A redesign is underway at the pace of the community. The short lived appearance of our AR/VR chapter has already brought us unexpected rewards. We are seeing more designers volunteering and more original content owners reaching out to me hoping to join forces. After all, it is the nature of the Loop to iterate. Albeit we are currently playing catch up, be sure to check back later and I am confident you will be surprised by the improvements.

Shixie is a designer at IBM Design Systems, based in Austin, Texas. The above article is personal and does not represent IBM’s positions, strategies, or opinions.

--

--

Shixie
IBM Design

Crafting design systems and design language at IBM. ❤ Motion, color, data viz, AR/VR