How to Visualize Difference Boundaries within your Team

Group identities are an individual's sense of belonging to a particular group, such as nationality, age, or time zone. Difference boundaries can help us identify differences in group identities between our interactions. This can be factors like gender, age, race/ethnicity, socioeconomic status, ability, sexual orientation, religion, and culture. 

We wanted to create an easy to understand visualization of the difference boundaries within a selected group of people from a list. We call it a "barcode" visualization, but it won't be scanned like an actual barcode. The aim is to make it easily identifiable at a glance using bars of color similar to a barcode.

This barcode can help quickly identify the difference in group identities of a group of any size. Being aware of others' group identities can help with communication and encourage collaboration between different group identities.

In the example below, the letters A-G represent different members of a group. When checkboxes are ticked, it shows the difference boundaries between the selected individuals. The darker the color, the greater the differences are between the people selected

 
pasted image 0 (5).png
 

Currently, each person has to be selected manually, but if this can be integrated into existing applications such as zoom or slack, you would be able to generate these barcodes automatically.

An individual's group identities data has to be entered into the database for their name to be selectable. This data is hidden from the user interface so that personal information isn't revealed to other people.

The main challenge is to convert a set of data into a "barcode" like representation where information can be easily read. 

For each group identity, data needs to be converted into a color, which can be done in 2 steps. First, the data is turned into a number, and then the number is mapped onto a color range.

As a quick demo, this can be created using Excel or Google Sheets. This can then be implemented as a web page or application to improve the user interface and security.

 
2020-07-24-19-07-59_Trim.gif
 

Different group identities will require different methods of conversion between data to number. For example, data for "Age" contains numbers, and "Nationality" contains strings of characters.

For data sets that are already numbers, we can directly convert them into a number that can be used. However, data that contains a string of characters need to be converted into a number first; this can be done by counting the number of unique strings first and then turning it into a number that can be used.

Once we have a number, in this case, between 0 and 1 for each category, we can convert it into a color range. In Excel or Google Sheets, we would use the conditional formatting tool, where we can set 0 and 1 to distinct colors, and it will automatically generate a color for any number within the color range. If we want to implement this into an application or a web page, it would have to be coded instead.

More complicated formulas can be used to create a better range of colors and make it more applicable to more edge cases. The only limitation that we cannot easily remove is that some group identities can be more personal than others, so we can only use the ones that people are willing to share. The number of group identities may have to be reduced to have a complete set of data while using only group identities that are relevant and that people are willing to share.

This example illustrates that it is possible to convert a complex set of data, such as group identities, into a visual representation.

For more, subscribe to our newsletter here