Screen Shot 2021-11-20 at 2 43 19 PM

Netlify Status

Built in conjunction with the Girls in Tech Mental Health for All Hackathon: Building an inclusive future requires mental health and wellbeing technologies that cater to all

App Details

As a team of fullstack software engineers, our team decided on technologies that could produce a usable, scalable MVP version of the prototype.

Tech Stack

Design Tools


According to an independent study by McKinsey and Company, “women of color are more likely to face disrespectful and ‘othering’ microaggressions”, which perpetuate workplace trauma. Black women are facing these issues at an alarmingly disproportionate rate.

We are often still expected to produce excellent work throughout these violent experiences and there is not a place for us to be free of judgement to share with other Black women who are also on the healing journey through workplace trauma, which can make us feel alone and lead to depression.

During the trauma, we may not realize that we need to track these instances or need a community. As such, these events often go unreported and our source for proof is defined based on memory alone.

We need a place that we can feel safe to share, or at the very least, keep track of these occurrences so that when the time comes, we will have a list of these things ready for us to make our case.

SafeSpace. also collects data on these issues for the world to see the impacts on Black women and how it hits companies’ bottom line. By tracking and fighting back in this way, we can help ourselves and other Black women know that they are not alone and that something must be done to stop workplace violence.

Purpose & Motivation

According to the McKinsey and Company study and our own constant personal experiences, as Black women, we experience more microaggressions than other groups of women, and are three to four times as likely as white women to be subjected to disrespectful and “othering” comments and behavior. We are also less likely to report that our managers check in on our well-being or help us balance priorities and deadlines.

The motivation behind this application is two-fold. To provide a SafeSpace. for us to go in the midst of the violent behaviors we endure as a place for relief and centering and to document the incidents. In recording the incidents, not only do we name our trauma and record how we have handled and grown through our healing, but it also provides us with the documentation we need when we decide enough is enough and need to report the behavior.

How does the application work?

Users are able to join and sign into SafeSpace. anonymously by using their email address, which sends them a link to the email address they used to login to the application.

When a user logs in for the first time, they are prompted to set up their username, password, and if they are a member of the LGBTQA+ community. Then, they are taken to a Conflict Assessment that tells them a little more about themselves. This also allows other users to see the type of the person with whom they are interacting so, when giving advice, commenters can frame the advice in a way that meets the requester’s style.

For every subsequent login, users are prompted to tell SafeSpace. how they are feeling after which, they enter the journal view where they can very quickly add an entry to their log to keep as reference for private use or to share with the community for advice.

The Journal is the central feature of this application because it allows Black women to keep track of work related trauma associated with different types of microaggressions and work through those at their own pace or have as a recorded reference for future use.

There are options for the user to check out the community posts, recommend stellar companies, add or find inspiration, and/or look through resources for support in their area.

How was the application developed?

As a team, we planned the application by creating user flows, a low-fidelity wireframe and data relationships. Then, we created a prototype in Figma. We built SafeSpace. using Next JS, styled-components, supabase as the database, React Bootstrap, Bootstrap 5, and React Select.

We followed accessibility (a11y) guidelines using the WAVE Web Accessibility Evaluation Tool Chrome Extension and Web Content Accessibility Guidelines (WCAG) a11y guidelines.

How to use the application

Users can login to SafeSpace. on any device with an internet connection, create journal entries of workplace microaggressions, follow, comment, and react to community posts, view resources and inspiration, and recommend companies that are doing diversity, equity and inclusion right.

Difficulties & Challenges faced during the design and/or development process.

Ensuring that we all were on the right path for the outcomes of the app because it is easy to slip into the social media path, but we intentionally worked as a team to define who and why the app exists and the how and what was easily obtained.

There were also various features that we thought about and added some functionality to several but did not complete them all as the prototype MVP is a POC that needs more user research and work.

Go-to-Market (How will the application be available to the public, and is it scalable?)

The current version of SafeSpace. is a partial features MVP prototype, but is available for anyone with an internet connection to review at While the team has done aggressive manual testing, there are no unit tests included, which would need to be completed, among other measures, prior to being prod ready.

There would also need to be some algorithms in place to check content standards to ensure content meets guidelines as well as terms and conditions as admins manually reviewing posts is not scalable. There is also a need to ensure that users are actually Black women, which we did not cover in this MVP version.

Once those underlying concerns are addressed, the application runs itself as it was created for and belongs to anyone who identifies as a Black woman. The core is to have a journal and SafeSpace. does this really well.

Project Next steps

  • Setup process for user access and approval
  • Setup persistence/database for comments and reactions on community posts
  • Connect community comments to posts (decided to descope because of the social aspect)
  • Allow users to create multiple journals
  • Users can follow other users
  • Users can follow community posts
  • Users can submit resources
  • Users can upvote companies and doing so would move them to the top of companies page
  • Data dashboard for sharing details on occurences

Built With

  • bootstrap
  • figma
  • nextjs
  • react-player
  • semantic-ui
  • styled-components
  • supabase
+ 2 more
Share this project: