Tam Cai, Beta v1.10A / Developer Mode:

  • Roles

  • UI
  • UX
  • Motion
  • Branding
  • User Research
  • Industry

  • Technology

During the early days of the 2020 pandemic lockdown, International Business Machines (IBM), like many technology consulting firms, faced a sharp decline in in-person business consultations due to social distancing measures.

So, how did the company adapt to engage new prospects while maintaining and strengthening existing client relationships?


Founded 1911

Headquartered in Armonk, New York, IBM is a global leader in computer hardware, middleware, software and also offers consulting services from mainframe computing to cutting-edge nanotechnology.

Design Philosophy

“Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people.”

— Thomas J. Watson, Jr.

Objective

The objective of the design project was to modernize and enhance the existing IBM CMAAS platform. The revamped “Contact Module as a Service” aimed to streamline remote client interactions with IBM sales and support through multiple touch points, including call / email / book a meeting / chat.

The project targeted a 37% to 62% increase in user engagement YTD leveraging IBM’s latest Carbon Design Kit Library and integrating WatsonX AI technology for a smarter, more intuitive user experience.


  • Parent


  • Child


  • Conversion

Scroll right


Team and Project Planning


Orchestrating the Team.

I began by leading a deep-dive session with key team members to understand the CMAAS initiative, its business value, and metrics. We identified user pain points and feature requests to ensure the design aligned with both user needs and business goals:

  • Stakeholder

  • Product Owner

  • Offering Manager

  • Information Architectures

  • Software Engineers

  • Data Analysts

  • Content Strategists

This approach aligned with IBM’s standardized product development processes, using the IBM Design Principles to ensure consistency, usability, and innovation throughout the project.

Research and Development


The Importance of User Research.

To kickstart production, I conducted performance research, usability testing on CMAAS v1.0, and gathered stakeholder requirements. I prioritized user engagement and KPI scores as the foundation, creating hypothetical scenarios using user persona stories in the R&D process, which were then translated into wireframes.

The migration to CMAAS v2.0 leveraged the Carbon Design Kit (CD Kit), ensuring a more modern, robust, and scalable user experience.

v2.0

For CMAAS v2.0, the goal was to increase user engagement to 62% YTD, improving upon the 37% achieved in CMAAS v1.0 through enhanced design and functionality.

CD Kit

CMAAS v1.0 was built on the North Star Kit codebase (pre-2017). To modernize it, we transitioned to the Carbon Design Kit for scalability and usability.

The R&D Process of Storytelling in Product Design

Low-fidelity Wireframes


Simple Yet Articulated.

Before applying design solutions, I created low-fidelity wireframe prototypes to illustrate the vision for CMAAS v2.0. These early concepts provided the team with a clear user journey preview while allowing flexibility for iteration based on usability testing.

At this stage, visual precision wasn’t the priority—instead, the prototypes helped stakeholders, managers, analysts, and strategists align on the proposed direction for an improved user experience.

Visual Design Deliverables


The New CMAAS V2.0.

With the team aligned on product development cycles, including planning, research, market placement, and wireframing, my next key contribution was creating an assortment of high-fidelity designs that defined essential design patterns. These designs leveraged both existing and new components from the IBM Carbon Design Kit Library to ensure consistency and scalability.

To explore IBM’s Open-Source Carbon Design Kit Library, check out the latest build: Carbon v11.X.

Introducing CMAAS v2.0—a next-generation, AI-powered contact module streamlining remote IBM sales and support channels: call / email / book a meeting / chat.

  • 01

    Router

  • 02

    Support channels

  • 03

    Sales channels

  • 04

    Call sales

  • 05

    Chat with AI

  • 06

    Chat with agent

  • 07

    Text to device

  • 08

    Text to device: form

  • 09

    End chat

  • 10

    Chat feedback

  • Let's Create_

  • 11

    Book a meeting [Slide out]

Additional product design and brand assets


Evolving the IBM Brand.

As we enhanced the IBM CMAAS v2.0 user experience, I was later tasked with additional design contributions, including the product dashboard, redlining specs for engineers, iconography, UI motion, and animation, among others. Here’s a quick look at some of these additional design elements.

See additional pieces of brand design work at IBM Branding Overview.

Have a project you’d like to discuss? Or want to experience more of PRG.’s latest updates and case studies? I’d love to hear from you. — Say hello

[ CLOSE ]

Latest Update

[PRG.]

20130202.JZ-WLF

BLK/WHT/CY/MAG/CROSS