IBM C.School is a digital learning platform designed to help improve the core competencies and support the 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 everyday responsibilities.
Jean-François, Mark Bryant, Michael Lo, Madeline Petersen, Matt Hemsing
Design responsibilities—developing flexible UX patterns in parallel to IBM’s evolving design language
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 the IBM Design Language
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, signifying 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 in January 2019. As a result, this presented our team a unique opportunity to experiment with their evolving design system by allowing us to apply existing components while also creating new ones to address specific design challenges.
Developing flexible UX patterns
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.
1. Scenario-based pattern
Designed for scenario-based learning that helps learners practice their skills by simulating situations relevant to their roles.
2. Audio-driven pattern
Designed to support audio-driven learning by providing supplementary visuals to the content.
3. Case study pattern
Designed for long-form reading intended to help learners gain more context about a given topic.
Three patterns used across the C.School platform
IBM Design Philosophy — See more at IBM Design Language
Our design team’s initial task was to design an underlying, scalable structure as C.School was expected to hold a diverse range of learning modules. To build this structure, we used a combination of components from IBM Carbon Design System for the platform’s shell (homepage, introduction page, deeper content page) in addition to our adapted components which pulled and merged elements from the design library to address specific edge cases unique to learning platforms.
01. Progress indicator
Combining Carbon components "progress indicator" and "accordion" to create the navigation needed for the C.School learning platform.
Scenario-based pattern—drawing from a context-driven instructional framework, professionals learn how to respond to crisis situations & protect IBM’s brand.
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.
For this pattern, the design team was responsible for translating the CCAF model into the overall user experience of an exercise:
The CCAF framework
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.
The CCAF framework applied to scalable components that accommodate a variety of learning modules
Audio-driven pattern—through a podcast series, Communication professionals learn the principles of storytelling & how to write compelling narratives
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.
While examining the content for this module, the design team recognised that the audio content made references that could be visualised 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:
1. Providing visual context
By visualising examples in the podcast series, we were able to increase clarity by providing supplementary visual context to the audio-driven content.
2. Create 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.
Excerpts of the visual assets used to supplement the audio-driven content.
Case study pattern—Communication professionals learn about the impact of IBM’s Corporate Social Responsibility initiatives.
The case study pattern adopts a long-form reading approach informing Communication professionals of the Corporate Social Responsibility initiatives that IBM is involved in. In conducting user testing sessions with Communication professionals, we discovered that learners were unfamiliar with the jargon frequently used in these initiatives. Therefore, we added a hover interaction—represented by highlighted words—for learners to surface supplementary content specific to each case study. ◾