Vesta — Using Technology to Eliminate Sexual Harassment in Workplaces— A UX Case Study

Vesta’s Homepage

I have always been interested in using technology and my design skills for social good. Hence, when I was presented with different options to choose from as a client project to work on, I selected Vesta without a second thought. Vesta is a social enterprise aiming to provide a safe space for those who have experienced sexual harassment and to become a valuable part of their journey by giving them a new level of control, connectivity, and support. Their mission is to create a secure and trusted web platform which will support individuals’ pathways to justice. In this project, I and my teammates were tasked to redesign the Vesta website aiming towards sexual harassment in workplaces only in a three-week sprint.

As one of the UX Designers in this project, I was responsible for conducting the research, collection of data, creating personas, sketching out ideas, designing low-fidelity and mid-fidelity wireframes, prototyping, and usability testing. Our UI team, Murtaza and Laura were in charge of the mood boards, style guides, and high-fidelity wireframes.

The Process

95% of those who are sexually harassed or assaulted do not report it. 80% of those who have had unwanted experiences in the workplace are scared to report it to the relevant authorities. There is a need to deliver a reliable, private and confidential way of streamlining the reporting process of sexual harassment cases in the workplaces.

Creating an informative, credible and trustworthy website that will engage the users and inform them about a web app (future consideration) that will streamline the sexual harassment reporting process in the workplaces and allow individuals to choose their own path to healing and to justice.

How can we build a website that is informative as well as safe and secure for the employees and employers so that they can comfortably report sexual harassment issues on it?

Research Phase

The first step was to contact the users who had a general knowledge about VESTA and other sexual harassment tools and determine their understanding of such tools and processes. We mainly interviewed employees and employers since they were the main users of our product.

With our survey questions and interviews, we wanted to:

  • Learn how employees generally feel about sexual harassment in the workplace.
  • Identify what sexual harassment policies and procedures are in place within the company.
  • Learn more about who is responsible for resolving workplace harassment issues.
  • Understand how and what issues employees and employers have dealt with regarding workplace sexual harassment.
  • Determine their feelings regarding using an online reporting platform for such issues.
Affinity Diagram — A UX data collection technique

After conducting the research & data analysis, we found out the following key insights:

  • Most of the employees (67%) said that they do have any kind of sexual harassment policies in the workplace.
  • Almost all (95%) people said that HR is responsible for drafting these policies and implementing them.
  • 75% of people said that they would prefer to use an online reporting platform to report such issues if it is confidential, private and safe. But most were concerned about the confidentiality and safety of their data.
  • We found that people do not know what constitutes as sexual harassment in the workplace and what falls on the spectrum of legality — they needed resources or information on that.

After thorough research, we came up with solutions that would be in line with the mission and vision of Vesta.

  • A website that is engaging and resourceful to address the legal side of things as well as resources on what happens once an issue has been reported and how to deal with it.
  • A website that evokes a feeling of credibility, safety, transparency and trustworthiness for employer and employee.
  • A website that evokes a clear path to anonymous reporting.

Planning Phase

User Personas — With these key insights & data noted, we were able to see a better picture on both employer and employee sides to conceptualize a plan. We determined two different types of user personas who will be guiding us throughout our design phase.

User Personas for Vesta

Competitive Analysis — After determining the user personas, we conducted a competitive analysis to review the current market space. I looked at the direct and indirect competitors of Vesta to see what kinds of features they have on their websites and whether they have any services or products pertaining to sexual harassment.

For Vesta, clear information and security were the most important factors, we used these as metrics to evaluate the competitors. We looked at these competitors and determined which of them appear as secure and have clear information and how we can make Vesta better as compared to them.

Comparative Landscape

While doing the competitive analysis, we realized that there are a lot of companies that are working towards the same cause. We reviewed what they were doing well and what they didn’t do well. This helped us to come up with ideas on how we can set Vesta apart from its competitors.

Design Phase

Low-fidelity Wireframes — To make our ideas concrete, we started sketching the solutions using pen and paper. We came up with different versions of wireframes and after an exchange of opinions and views, we decided on one final version of the sketches. The design phase was based on close cooperation with the UI Designers, Laura and Murtaza. While we sketched the low-fidelity wireframes, they decided on the mood boards, colors and style tiles. During this process, we worked in collaboration with each other agreeing on the final versions before starting the mid-fidelity and high-fidelity wireframes on Sketch.

Low-fidelity Sketches

UI Design — For the moodboard, the UI team proposed the feelings of respect, help, safety, transparency, trustworthiness and corporate.The purpose was to provide a safe digital space where individuals can have a sense of support and guidance. They wanted to keep the colors warm, neutral and formal. Below is the style guide that was finalized after discussion within the team and with our client.

Moodboard and Style Tile by UI Designers

Mid-fidelity & High-fidelity Wireframes — After finalizing the low-fidelity sketches, we began to digitize the design in Sketch to start the usability testing with the users.

Mid-fidelity Wireframes

Feature Prioritization — The home page was designed in a way that first-time users got to understand the vision behind the product with the value proposition stated at the beginning followed by the problem and how Vesta can tackle it. We chose to show numbers immediately to reinforce the facts of sexual harassment in the workplace.

This was followed with the solution; a safe online reporting platform that is strictly confidential and private, backed by customer testimonials for more credibility. To back up the credibility, we had one section for our trusted partners and clients.

The about us page again backs up our commitment to our users by our statement to ‘eliminate sexual harassment’ in workplaces. This is followed by our vision and mission statement which is to provide a safe space for users to tell their personal yet private story.

We mention Vesta’s approach and back this up with our why vesta? Next, we added a call to action ‘book a demo’ of the future web platform reporting system. Moreover, we added a ‘what we offer’ page to bring home the selling features of Vesta. This is followed by an explanation of how this platform would work for the users to get an understanding of the platform before using it.

Finally, to make the website resourceful we added a ‘resources page’ with two sections, one for the employer and the other for the employee. It will have videos and articles regarding laws, policies and procedures related to sexual harassment in the workplaces.

Prototype & User Testing Phase

Success Metrics — We tested the prototype with the users according to our success metrics:

• The language should be easy to read and und

• Visible and recognizable CTAs

• Information should be easy to find and navigate

• Visual and information hierarchy should be consistent

Key Insights — 7/10 users were successfully able to complete the task. Following is the feedback that we received from the user testing which was later incorporated in our wireframes.

• Website is pretty simple and easy to navigate — This was positive feedback. We were happy that the users found the website simple and straight-forward.

• Not sure if the platform will be secure or if the data is confidential — This was an easy fix. We added the most features (privacy, security, confidentiality, etc) at the beginning of the ‘what we offer’ page.

• How it works should be more detailed — We created two different sections in ‘how it works’, one for the employee and one for the employer and made it as detailed as possible while remaining to the point and simple.

High-fidelity Wireframes
  • During the presentation, we suggested our client that to create a good impact she should hire a copywriter to create impactful copy for the website. The clear and meaningful language would be very crucial to get the message across.
  • Vesta should have their own curated content for employees and employers instead of external links and content.
  • Eventually, Vesta should have a Login/Sign-up call to action once the web platform will be developed.

Our client loved what we came up within a three-week sprint. If we had more time, we would have considered diving ourselves into making the web app as well for her.

Vesta has been selected among the other projects to be developed by the web development team.



A Toronto based Product Designer with a communications background, passionate about using design and technology for social good |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eilaf Zehra

A Toronto based Product Designer with a communications background, passionate about using design and technology for social good |