top of page
Work Safe
App Created to Tackle Racial Discrimination in the Workplace

UI/UX Design


Social Impact

People who experience racial discrimination at work live with constant anxiety and are forced to behave cautiously in an environment where they are meant to be pursuing their passion. Once an incident begins, it tends to escalate and many are often unclear when the line has been crossed. Employees today still face racial discrimination in many forms creating a hostile working environment.


UI/UX Designer



Figma, Wireframing,  Adobe Suite, User Interview, Research, 



Designers:  Sophie Chen & 

Nicole Kim


Oct 2020-Dec 2020

Mission Statement

We seek to create an app that would allow for quick documentation of every incident that happens. Employees can then choose to create a comprehensive report that would make for a stronger case against their perpetrator. WorkSafe is there to help employees feel safer at work by providing them a tool where they can record evidence of discriminatory situations to create a comprehensive report to have if they choose to pursue action. We guide our users to resources, counselors, and organizations that deal specifically with racial discrimination.


Research Phase

Initial Research

My partner (Nicole Kim) and I started with initial research to learn more about what was already provided in the world. We conducted research on diversity training within companies to learn more about its function. 

1. What is Diversity Training at the workplace?

Purpose of Diversity Training

Trump’s Executive Order On Diversity Traning

2. What are the Antidiscrimination Laws in the Workplace?

EEO-Equal Employment Opportunity

3. What are the consequences if discrimination is made?

Legal Consequences

Reduced Productivity

presentation icons-05.png
Research Phase 2

In the second phase of research, we focused on the reporting process and the support that companies provide. Through our research, we found out that it was crucial to keep detailed records of each incident that happened in order to conduct an investigation.

1. What is needed in the reporting process?

Detailed records of incidents = tool for investigation

Quality evidence that allows entries of misconduct

Accurate records that help with a memory error

2. How can we support?

Easing the fear of reporting

Importance of human interaction and interpretation

Social conversation that guides actions

presentation icons-06.png
Research Phase 3

We then looked into how one-to-one counseling can support employees when faced with discrimination at their workplace. Overall, Counseling provides emotional support to employees, so they feel cared for while facing these difficult situations.

presentation icons-04.png

Meet our users

User Interview

Interviews were crucial to our project. As stated before this issue is complex, everyone’s experiences are different. We needed to gather diverse perspectives in order to understand the underlying issues we needed to solve. So we gathered 4 people of different ethnicities, occupations, and gender to learn about their experiences with racial discrimination in the workplace.

S. Interview.png
S. Interview-1.png

We were able to identify the major pain points and insights from our interview and research. The 4 major insights include the following:

N. MacBook - 22.png

1. Most racial discrimination situation that happens at the workplace is in the form of indirect discrimination and microaggressions.

2.When faced with discrimination, most Interviewees knew to go to HR; however, they were NOT informed about a reporting system within the workplace.

3.Interviewees hesitated to speak out or report because they were unsure of the discrimination at the moment.

4. Interviewees would NOT talk about the misconducts within their workplace in fear of retaliation from their employers.

Target User

Taking from the insights we gathered from our interviews we created Sarah M. our target user. 

Problem Statement

Employees today still face racism in the workplace in the form of indirect discrimination. This includes snide remarks, daily inappropriate behaviors, and racial stereotypes.

At work, Sarah has experienced uncomfortable comments and unfair treatment from both her coworkers and manager, and she is unsure how to deal with these situations.
How might we support Sarah in a work environment where she feels comfortable speaking out against discrimination?

Ideate and Sketch

Concept Sketches

With a clear problem identified, we dived straight into ideation. We wanted to develop an application that was easily accessible to working individuals. Taking information from our research and insights, we wanted to include these two concepts.

N. Ideation.png

Helps employees keep records of incidents that happen & generate a comprehensive report

Counseling and resource function where employees can find professional one-to-one counseling, open group chat for group support, and other resources.

Narrowing Down a Solution

Through this process, we narrowed down the ideas to focus on the must-haves that are supported by our research and insights.

Mind Map.jpg

1. Tracking and Reporting

a. Record incidents
b. Important documentation
c. Generating a comprehensive report
     i. If users choose to pursue action
d. Providing resources for report


= tool for investigation

Immediate record-keeping that helps with memory error

Quality evidence that allows entries of misconduct

Guidance for reporting system

2. Counselor and Resource

a. Professional one to one counseling
d. Resources
     i. Organizations to contact for further          resources and reporting


Importance of human interaction and interpretation

Easing the fear of reporting

Anonymous record-keeping and counseling that is external 

A social conversation that guides actions

First Prototype

With that in mind, we created a low fidelity paper prototype to test out our ideas on users.

lowfi prototype 2.gif

User Flow

first prototype.png
User Test 1

Taking our paper prototype we began our first round of user testing with 5 users.

User Test 1.png


1 user test.png
1.2 User test.png

We found that overall the layout of the app was easy to understand and navigate through. However many users found the organizing folders feature to be hard to follow and it was difficult for them to clearly identify when the app had begun generating a report.


1.2 user edit.png
1 User edit.png


1. Adding the drag and drop function for an organization.
2. We also added the 3 dots more icons for clarity to where to find the edit and delete icons.
3. The view inside the folder was redesigned for clarity as well.
4. We added a select all button for a faster route to choose all incidents at once.
5. We labeled the bottom icons for clarity since some of the icons were not universal.

User Test 2

After edits, we went into the second round of user testing.

User test 2.png


Second Prototype.png

In this round, we discovered more specific feature issues such as the report overview being unclear, or the navigation icons on top not making much sense.

Style Guide

Before taking our edits into a high-fidelity prototype we quickly laid out a style guide to help keep our visual design cohesive.

Narrowed down Solution.png

Final Interactive Prototype

Then with our style guide, we prototyped a hi-fidelity mockup.

HIFI Walkthrough 2.gif

User Flow

user flow hifi.png


Here is a detailed look int the edits we made from our first prototype to our hi-fidelity prototype. 

Second Prototype Edit.png


We prioritized the 3 graphs that we decided were the most important. The followings are

  • The line graph of the # of incidents within a timeframe

  • The bar graph of # of incidents at a time of the day

  • The pie graph of who was involved the most

Second Prototype Edit 2.png

We also differentiated the folders and incidents visually, so they are easily identified from each other.
Lastly, we added the pop-up slide in-between the generate report button and selection of reports to divide the sections and give users options to start generating the overview report.

End Product

End Product.png

Our app will allow victims of racial discrimination to upload information and evidence of what they experienced at work whenever they feel it is necessary. Organizing each incident helps our users keep track of everything they experienced. The action does not need to be immediate but once a user is ready they can generate a concise report of all evidence they need to create a strong case against their perpetrator. The employee will have a documented history of their experience which we can then guide them to organizations and counselors there specifically to help support users with the next steps.


To be continued...

As stated before racial discrimination is a complex and nuanced issue that has no simple solution. Our product is only one small part of a larger fight for workplace equality. Even within just recording and reporting an incident there are many opportunities for us to further explore.

  1. How can we have our app be more directly connected to the company?

  2. How can the app record and report for someone who has witnessed racial discrimination?

  3. How can the app include a reporting system that is more than just a bridge to help you report?

  4. More research on resources related to workplace discrimination

Read more about WorkSafe here!

bottom of page