A web experience of a game board that helps grow empathy by uncovering potential diversity biases

Overview

Client
Equal Pay Company
Team
Kristen Howell, Mamiko Otsubo, Jennifer Pinai
Role
Lead Visual Designer, Researcher
Genre
Gaming
Time
2 MONTHS
Tools
Whiteboard, Sketch, InVision, InVision Studio
01

Background

Company Mission

Mission: Give people the power to normalize equity in the workplace.

Equal Pay Company specializes in on-demand software that gives insight into business diversity and adaptability. They help to teach best practices to engage in normalizing equality in pay, culture, and growth.

A game to grow.

Equal Pay Company also offers a board game, faces of leadership, which helps employees to grow empathy by uncovering potential diversity biases.

The Challenge

Conventional diversity training leaves employees feeling forced and annoyed. How can we design a learning experience that employees feel is empowering and consequential?

The Solution

We decided to break up the web experience into 2 parts, followed by Part III, which is an in-person group reflection portion.
02

Research

Task FlowUsability Testing – Interviews

Task Flow

Hands-on with the game.

First, we played the game to better understand the overall flow; based on this gameplay, we created a task flow.

This flow is comprised of 39 different steps and is divided into two parts, which takes over two hours in a group of three people. The game requires approximately 54% solo thinking and reflection as well as 46% group activities; however, the group “activities” are mostly listening to instructions or discussing solo reflections.

Following our own game play, we conducted six usability tests and then interviewed our users.

Surveys

Forming a habit.

We conducted surveys to ask users how long does it usually take them to form a habit.

How long do you think it approximately takes you to form a habit?

Total Responses: 32 (via SurveyMonkey)

Solitary vs. Group

Users also prefer learning in a combination of solo & group settings, but between solo or group settings, people overwhelmingly chose solo settings.

What setting do you prefer to learn in?

Total Responses: 32 (via SurveyMonkey)
SEE FULL SURVEY RESULTS

Interviews

— "I was confused with the language, the labeling, the number of race cards, the respect circles..."
— "Maybe it's not how I felt playing the game as much as how I didn't feel playing the game."
— "It heightened some of my anxiety because I compared myself."
— "It felt like an assignment more than a game."
03

Synthesis

Affinity Mapping Supplemental Research  Surveys  User Persona MVP

Supplemental Research

The power of habit.

How do we get an activity to be 'sticky'? Based on supplemental research from The Power of Habit by Charles Duhigg and Atomic Habits by James Clear, we learned to make faces of leadership into a habitual activity:

1) Start with an incredibly small task—makes it easy so it’s harder to say no
2) Increase task in very small ways
3) Stick to a sustainable pace
4) Use visual cues to trigger task
5) Endowed progress (progress bar)—seeing a reminder of how much has been accomplished already, makes people want to continue
SEE FULL RESEARCH

User Persona

Meet Alex Vasquez

In our research, we determined that the same version of faces of leadership was not applicable for both the C-Suite members and the employees. The mobile web experience is designed for employees of a company. We came up with Alex, who is our primary persona.

Minimum Viable Product (MVP)

Impact-Effort Matrix

Based on our research and within our scope, we identified what features were going to be part of the MVP: must-haves were a visual progress tracker, a result infographics, and an account settings—also included were an ability to email a PDF of your results and an ability to see the company wide results.

Key Takeaways

1) Language and directions confused users the most.
2) Start people with an individual activity, so they can approach tasks with openness.
3) Move onto a group session, so results can be reflected on as an organization together.
04

Design

SketchingWireframes – Usability TestingPrototyping

Iterations

Instead of having the game be played in one long continuous sitting, we decided to split the game into two parts to make the overall experience and message digestible and 'sticky.'
SEE ALL USER FLOWS

Wireframes

A mobile web experience.

In this web version, each day the user is asked to name a leader they respect.

Once the leader is named, the user is greeted by a leader card, which shows demographic information on the chosen leader. These demographics include race, gender, sexual orientation, age, birthplace, levels of education, language spoken at home, federal poverty, disability, veteran, and obesity.

Medium-fidelity
wireframes

high-fidelity
Mockups

Prototype

SEE PROTOTYPE
04

Design

SketchingWireframes – Usability TestingPrototyping

A mobile web experience.

In this web version, each day the user is asked to name a leader they respect.

Once the leader is named, the user is greeted by a leader card, which shows demographic information on the chosen leader—demographics include race, gender, sexual orientation, age, birthplace, levels of education, language spoken at home, federal poverty, disability, veteran, and obesity.
05

Epilogue

Next Steps

The next 'sticky' part.

The reflection notebook section asks users to reflect on their leader choices.

In Part III of the game, which is an in-person group reflection session, users will discuss these questions in the company of coworkers. This section can be used as a preparation for Part III and/or can be used by those who do not feel comfortable speaking about this in group settings.
PREVIOUSNEXT
Beam me up