IBM C.School is a learning platform that helps IBM's Communication and Citizenship professionals further develop their core competencies and skills.

Client

IBM Communications
Jan 2019 — Dec 2019

Contribution

User Experience

Team

Annette Cheung, Jean-François Chénier, Matt Hemsing, Madeline Petersen, Mark Bryant

IBM C.School
2021
A learning platform that helps IBM's Communication and Citizenship professionals further develop their core competencies and skills.

Client

IBM Communications
Jan 2019 — Dec 2019

Contribution

User Experience

Team

Annette Cheung, Jean-François Chénier, Matt Hemsing, Madeline Petersen, Mark Bryant

IBM C.School
A learning platform designed for IBM Communication & Citizenship professionals

C.School is a digital platform designed to help improve the core competencies and support the professional career development of IBM Communication & Citizenship professionals. Through the platform, C.School provides a range of learning modules that teach relevant skills, processes, and tools associated with their roles.

In 2018 IBM initiated C.School, a learning program designed for two teams — IBM Communications & Corporate Citizenship — who share similar goals, roles, and responsibilities. To help support the program, our design team was tasked to develop a digital platform that would provide a range of learning modules. These learning modules would support C.School’s curriculum by teaching new and emerging skills, processes, and tools that are relevant to their roles.

In developing the digital platform, the UX design team’s primary responsibilities were comprised of two challenges...

Adapting IBM Design Language

Adapting the user interface and visual design of C.School alongside IBM’s evolving design language.

Creating a Scalable Platform

Create a learning platform that is scalable and can fit a diverse range of content.

Developing UX Learning Patterns

Developing flexible UX patterns that can be applied to different forms of content and learning objectives.

IBM Design Language
Using IBM's design language to create a learning platform

When our team began C.School, IBM was undergoing a significant change within its design culture. Despite IBM’s extensive design legacy, its design philosophy, values, and principles had never been unified. Until 2019, when the IBM Design team introduced their new design language — signaling a formal shift in their philosophy and  aesthetic.

The introduction of IBM’s design language coincided with the beginning of our involvement with C.School. As a result, this presented us with a unique opportunity to take inspiration from IBM's evolving design language to inform our learning platform's visual design.

Scalable Learning Platform
Translating reusable components to create an underlying structure

Our first step in creating C.School was to establish an underlying platform that can be scaled to fit any form of content. In order to achieve this, we broke down the essential elements of the site into re-usable components, and combined them together to develop the most important pages (homepage, introduction page, content page). These major pages formed the core of the platform's experience, and provided us an underlying structure that could house a diverse range of learning modules.

The underlying structure of C.School borrows existing components from IBM's Carbon Design System, but also incorporates adapted components we created in response to unique design challenges. These design challenges pertained to edge cases that are are unique to learning platforms, and were unaccounted for in the IBM design library.

Developing UX Patterns
Developing scalable patterns to fit different forms of learning content

Over the course of a year, our team was tasked to design learning modules which taught a range of topics such as managing crisis communication, understanding the principles of storytelling, and learning about IBM’s role in education reform.

In order to accommodate the breadth of material and learning objectives, our design team set out to create flexible patterns that could be reused and adapted to different forms of preliminary content established by the content team.

Scenario-based Pattern

Designed for scenario-based learning that helps learners practice their skills by simulating situations relevant to their roles.

Audio-driven Pattern

Designed to support audio-driven learning by providing supplementary visuals to the content.

Case-study design Pattern

Developing flexible UX patterns that can be applied to different forms of content and learning objectives.

Scenario-based Pattern

The learning strategy for this pattern is based on an instructional framework known as CCAF, which encourages context-driven learning through practical application. In the CCAF framework, learners are placed in a scenario where they are encouraged to respond intuitively to a challenge as opposed to analyzing an overwhelming amount of content. Therefore, the underlying goal of CCAF is to make learning more comprehensible and contextual by making the content relevant to situations associated with their careers.

Our Solution

For this pattern, the design team was responsible for translating the CCAF model into the overall user experience of an exercise

Context — A scenario that simulates a workplace situation
Challenge — A prompt that encourages a decision to be made
Activity — An opportunity to respond to the challenge
Feedback — An opportunity to reflect on the decision and receive feedback

To reflect the CCAF framework, we constructed a modular system that was composed of four adaptable components. To make the pattern scalable, the four components can be customized to fit different forms of content while still maintaining its cohesive structure.

Audio-driven Pattern

For this pattern, the design team was responsible for investigating an approach to making audio-driven learning more engaging. While user-testing the preliminary audio content, learners expressed that they lacked the necessary context needed to fully understand each principle. Therefore, our challenge was to explore different ways to provide supplementary context alongside the podcast in order to increase clarity and engagement.

Our Solution

While examining the content for this module, the design team recognized that the audio content made references that could be visualized with existing assets. Therefore, we proposed a new section called podcast highlights — which provides visual context alongside key quotes from the podcast. By creating this new section, we were able to…

Provide Visual Context

By visualizing examples in the podcast series, we were able to increase clarity by providing supplementary visual context to the audio-driven content.

Creating an Extended Experience

By connecting key moments into a comprehensive narrative, it allowed us to create an extension to the podcast that could also act as an independent experience.

Case Study Pattern

When we first began the project, we were tasked to re-evaluate the existing case-study pattern. In the initial iteration, the long form case study was divided into separate sections in order to make the content more digestible. Despite this effort, we discovered that learners were frustrated at this format because it disrupted the flow of the content.The redesign of case studies improves the flow of the content and strips away clutter by presenting the article in a single continuous layout which encourages a long-form reading experience.

Through conducting further user testing sessions, we also discovered that Communication professionals were unfamiliar with the jargon frequently used by Corporate Social Responsibility initiatives. Therefore, we included a non-disruptive interaction where learners can hover over highlighted words to surface more information specific to each case study.