Carbon Design System is an open source design system for all IBM digital products and experiences. On April 2, Carbon V10 is released, a complete redesign of all elements and components with the new IBM Design Language as its foundation. The system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

↳ Go to: Carbon Design System

Motion design

I was fortunate to be a part of the Design Language team before joining Carbon, specializing on defining the motion guidelines. After transition from the Design Language team to Design System team, I assisted with implementing the new guidelines throughout the elements and components that Carbon delivers. This include craft UI motion guidelines, implementing motion in Carbon components, and work with developers to create the code package that facilitates adoption.

Data visualization

In addition to motion, I was tasked with redesigning the data visualization section of the system. While Carbon as a system aims to be highly accessible (meeting and exceeding WCAG recommendations), the standard for accessibility around data visualization is less well defined. I reworked the color palette to improve overall accessibility, and stylized the chart designs to better express the philosophy of the new design language.

This work is still in progress, but some of the latest explorations are included as stills below.

Stills

The VR platform concept is designed for monitoring, trouble shooting, and managing system architecture and resources of Cloud applications. A service manager can enter the VR experience to do root cause investigation of a reported issue, and drill down to a specific virtual machine or router on a large network topology.

This is an explorative project and aimed to identify if VR held potential business value for IBM. Cloud management is selected as a use case after research across company's offerings.

VR demo

The project evolved from an spatial mapping of the objects throughout the stack and their relationships, to a simple 3D scatter plot with a world of resources hidden inside each data point. This prototype uses data from Dec 2016. The hope is to pipe in live data to enable real time network monitoring capabilities.

Concept & design

I designed the nodes to express their data via shape, light and motion. This makes data "glancible" and intuitive while avoiding explicit numbers and graphs, which work well on a screen, but in VR are difficult to interactive with, and easily overwhelm users. These nodes may denote an app, a server, or a bare metal machine.

My original vision of the project is best explained in above TiltBrush sketch. Picturing healthy, running services and aplications floating in the air, while databases and containers sit on the ground. All layers in the stack are connected. By monitoring the health of objects and their relationships in the system, maintainance workers can quickly diagnose the root cause and search for a solution.

Stills

Created as a late addition to the original IBM Design Language V1, the guidelines consolidate learnings from multiple AR and VR projects big and small across IBM, 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.

↳ Go to: IBM AR/VR Design Guidelines

I initiated the project in 2016 and wore many different hats in this production. I was the project manager, writer and editor, illustrator, and front end developer to varying extends. Unlike the rest of the design language, the AR/VR chapter is a grassroot effort, and consists of a lot of contribution from volunteers in different parts of IBM.

Read the full story of the Making of AR/VR design guidelines on Medium.

Stills