Instana Design Language Migration

IBM likes to acquire other companies – but companies don’t always like to be acquired. Two years after IBM acquired Instana, it was time for them to start looking like one of the family and integrate fully with IBM digital properties.

I was tapped to lead the charge of a major initiative that involved dozens of IBM and Instana business stakeholders, engineers, designers, and even a PM or two. I stepped up to the challenge, leading what was at first a skeleton crew and then ultimately a well-oiled machine of 15 engineers and five designers through the fray of Instana resistance and IBM insistence.

My role
Design Lead, Visual Design

My teammates
Corey Keller – Portfolio Lead
Colin Butler – UX Design
Holly King – Content Design
Santosh Narayan – Visual Design
Jacob Hernandez – User Research

Goodbye Stan, hello Carbon Stan

Carbon is IBM’s design system for all their products and digital experiences. Instana was built in their own design language which didn't have a mature library or meet IBM's strict accessibility requirements.

Stan is Instana’s mascot, much beloved by employees and end users. But Stan didn’t fit Carbon's brand guidelines. This was a real problem for Stan and me. But we stuck together through dozens of iterations that resulted in a Stan rebrand that everyone could get behind.

My process

I approached my leadership role as a collaborative ambassador, mediator, and coach. I hoped my cool head would prevail as I listened to all stakeholder needs, built trust and goodwill, and achieved compromises that kept the work moving forward on aggressive timelines. I was responsible for setting and meeting ongoing release milestones and creating strategic roadmaps – always thinking ahead to what’s next.

The scope of this project was immense and needed to be broken down into actionable chunks. We decided to use a phased approach, i.e. Phase 1: fonts, color tokens, app icon, Phase 2: UI icons, primary nav, form elements, Phase 3: Common components, grid, theme support, etc. After dev did a rough sizing of these phases, I broke each of them down into individual issues. My initial documentation and process was eventually adopted by a larger acquisition design effort and used by multiple product teams.

Instana pre-aquisition, left. Instana in Carbon, right.

So many audits

I performed extensive audits to identify every design element across Instana’s product, documentation, and marketing. Each component and pattern was then replaced with a Carbon equivalent, a hybrid, or custom element. This included:

UI components, patterns, and flows
UX improvements
Data visualizations
Color palette
Typography
Illustrations
Iconography
Microinteractions and motion

Business results

I led the team in re-branding Instana to IBM brand standards and accessibilty requiremtns on time and on budget, with very little fall-out among a feisty group of business folks and a strong UX design team in place for future acquisitions. End users benefited from a consistent, accessible user experience. Instana benefited from IBM brand recognition and market penetration. The product design team benefited from upskilling and new opportunities. As for Stan and me? We emerged far better for the experience.