Digital IBM

Hero Journey Project

This project was a chance for the multidisciplinary joint project between the Customer Experience and Growth team and the IBM Design Program Office to envision a brand new IBM.com experience for the SaaS era with the notion of IBM.com as a place to get jobs done as the driving concept.

I joined this project as a Cretive Director and worked with researchers, content strategists, UX and visual designers, and engineers.

IBM.com as a platform


Based on the new Journey System and the accompanying customer experience researches and combining with the Cloud OS concept created by Charlie Hill, VP of Platform Experience, and his team, we started looking at a particular journey of building a chatbot. Some of the core UX concepts included:

• Experience journey for a multidisciplinary team
• A unified platform experience that spans all stages of marketing, dashboard, and product use experiences
• The digital expression of IBMer

Always progressing the user

This seamless continuous experience starts with a tutorial, driven by the actual product, embedded on a marketing page. After finishing the guided, easy-to-use tutorial, the user will have an actual working product that connects to a free trial.

Opportunities to minimize friction for the user

As the user seamlessly transitions to the actual product experience from the embedded tutorial, the differences between the two experiences need to be addressed in order to make the transition as painless as possible—our idea was to use a contextual onboarding experience that understands what the user had done during the tutorial.

IBMers are the greatest invention of IBM.


IBM comes with the expertise that only a company with a long history of serving enterprises can have. And IBMers have been one of the main channels our customers experienced this. But we wondered what this means in the digital era where human contact is minimized.

Our idea was to implement a unified and personalized toolbar driven by Watson that makes recommendations for resources and product add-ons, while also acting as an always-on support point.

Carbon for IBM.com

As Carbon is positioned as the one design system for all of IBM’s digital experiences, we, the Digital Design System team, formerly Northstar, started the long, exciting, and at times challenging journey of adopting Carbon.

Optimizing Carbon

Reading is one of the major activities that take place on IBM.com as it is a place where our users come to read, learn, compare, and make a decision. The first task was looking at Carbon and making sure that it was adopted in the right way. Through various generative and secondary researches as well as visual audit and studies of the components, the team decided to create a version of Carbon that is optimized for IBM.com experiences.

Working with the team, I led the various audits and design updates necessary for the new component sizes, which were later introduced as the expressive theme components, to be released in late 2020.

Building for IBM.com makers

Carbon was designed as a context agnostic design system for all adopters. IBM.com is one such context, albeit a very large and complex one. What makes IBM.com unique is that there are many makers who are practically a secondary adopters of the design system.

We conducted an audit of the Carbon components against the existing Northstar counterparts identified 15 components that were unique to IBM.com experiences in order to serve the makers of IBM.com. Some notable components include:

• Masthead naviation bar
• Footer
• Lightbox media viewer
• Locale selector

IBM.com Style Model

Guiding and coordinating makers of 40 million pages


One major paint point that the team needed to address was the lack of comprehensive, easy-to-follow guidelines and a way to coordinate the many globally distributed teams that are making IBM.com experiences. This has resulted in the current fragmented and sub-optimal experiences through the users’ journeys.

I initiated and led this project to address these two core issues around IBM.com.

How do you design a website

with 40 million delightful, consistent, and coherent pages

owned by various business units and teams across the globe?

Research

We started by capturing some of the core touchpoints that users go through as they traverse through IBM.com. As part of analysis, these pages were broken down into some of the more foundational design dimension such as grid, colors, layout, type scales, etc.

When we grouped these pages per the design intents, the purpose of the page, we started seeing patterns and convergences emerging—many pages that were doing similar things were designed similarly.

Intent driven design framework

Through the analysis of the page types, their intents, and their stylistic dimentions, we found a way to help a vast number of makers in a standardized and easy-to-understand way to start designing.

A new construct — style model

With this understanding, we established the new concept of a style model, which is based on the design intent and include both stylistic and UX dimensions such as grid usage, color themes, and screen regions.

Smaller stylistic footprint to drive consistency

TUsing the style model as a way to look at page designs, compare and consolidate, we were able to identify the following seven core design intents and corresponding style models as our hypothesis and starting point.

• Navigational
• Listing
• Reading
• Simple transactional
• Transactional
• Dashboard
• Conversational

Consistency & coherency to help our customers

The style models are in the early stage at the moment, but I’m working closely with Modern Commerce, My IBM, IBM.org, Knowledge Center, and IBM.com Reboot design team, to test, update, validate, and create new models when necessary.

So far, we were able to consolidate 10 style models within My IBM and Modern Commerce spaces into just two.

Designing the new IBM.com

Scaling good design

Since early 2018, armed with the new IBM Design Language and the various new concepts, guidelines, and tools, 
I have been working with various squads within the Digital Growth & Commerce team and partner BUs such as Watson Marketing, and Cloud, to layout the foundations for the next generation IBM.com.

Watson Marketing Collaboration

Through 2018 and early 2019, I worked closely with the Watson Marketing team to test and create new page templates based on the new design language and design system, Northstar v19a, which expresses some of the IDL elements such as colors, 2x Grid, type, and icons, and the new guidelines and various design artifacts that I worked on with my team.

Collaborators

Lila Title
AnnMarie Avila
Emma Sainz

Modern Commerce Collaboration

Modern Commerce squad within the Digital Growth and Commerce team designs and build one of the core platform features of IBM.com, the checkout process experience.

I worked with the Modern Commerce team as their creative director and guided the design team on the application of the new design system to design innovative new and modern experiences for their users.

I also worked closely with them to create a unique style model for their space, which eventually was used in another closely related squad, My IBM.

Collaborators

Charlie Douglas
Colleen Corkery
Tam Cai
Shenxun Wang

My IBM Collaboration

Modern Commerce squad within the Digital Growth and Commerce team designs and build one of the core platform features of IBM.com, the checkout process experience.

I worked with the Modern Commerce team as their creative director and guided the design team on the application of the new design system to design innovative new and modern experiences for their users.

I also worked closely with them to create a unique style model for their space, which eventually was used in another closely related squad, My IBM.

Collaborators

Charlie Douglas
Shixie Trofimov
Colleen Corkery
Shenxun Wang