IBM.org

An interactive Anti-Racism learning experience for IBM.org, designed to be brought into classrooms and shared across social media. Built on a Chutes and Ladders metaphor across six systems, each with pitfalls and reasons for hope. Winner of a w3 Gold Award.

Role_

Lead Designer, Art Director & Lead Developer

Dates_

2021

Tech_

React.js, Next.js, Prismic CMS, Framer Motion

Collaborators_

Wendi Ma

IBM.org

Brief

The extent of the brief was a two sentence Slack message. From there, the problem, concept, visual language, were largely up to me to define, champion, design and build.

IBM.org — the brief

Background

IBM.org had previously published activity kits focused on technology topics. That existing paradigm felt like a natural fit for the brief: an interactive, shareable format that could live on IBM.org and be brought into the classroom. This was the first to take on a social issue.

IBM.org — previous activity kits

Designed as a classroom tool, the kit gave educators a way to open conversations about systemic racism with their students. The central metaphor: life is a carnival game, and for some people it's rigged.

Concept

That metaphor became a digital Chutes and Ladders. Six systems, each containing a board users could explore. Roll the dice and land on a chute, and you'd encounter a systemic pitfall. Land on a ladder, and you'd find a reason for hope. Each roll earned a sticker users could share on social media via custom Open Graph images.

IBM.org — dice mechanic
IBM.org — moodboard

The six systems (education, housing, healthcare, criminal justice, employment, and wealth) were chosen to reflect the most pervasive structural barriers to equity.

IBM.org — six systems

Every chute and ladder was grounded in real data. The content was researched and cited, ensuring the learning experience was credible and substantive rather than surface-level.

IBM.org — data charts

The project was also a first for IBM: rather than abstracting skin color away in product illustrations, it was embraced directly.

IBM.org — race illustrations

Each roll of the dice earned users a sticker they could post to social media. The stickers were generated as custom Open Graph images, pulling in the user's name and the system they had just explored.

IBM.org — Open Graph share image

Experience