Diversity Score - Case Study

Company: Diversity.io
Role: Senior UX/UI designer
Deliverables: Research Summary, User flow Diagram, Wireframes and Prototype
Wins: 35% Revenue increased | 50% Increased traffic to Diversity website
Project Overview
Diversity Score is a landing page that allows companies to enter their LinkedIn profile URL and get a report showing the ethnicity and gender breakdown of their company. Divercity uses LinkedIn data and machine learning to accomplish this. The results will allow them to know where they can improve immediately to make their workforce more diverse
Problem to solve
Currently, there is no reliable platform that provides diversity within a company based on ethnicity and gender. Hiring managers and recruiters need this data to make better decisions at the time of hiring for their companies to create a more Diverse environment.
The Process
01. Research
Interviews

The first phase of the research involved interviews. A total of 10 individuals were interviewed via Google Meet. It was our goal to determine some of the needs that recruiters and candidates had regarding diversity and how Diversity Score might be able to address them. Based on the results, the following needs were identified:

‍
01. Research
Comparative Analysis

View Analysis
In the second phase of the research, a comparative analysis was conducted. During my research, I found that three major companies provided recruiters with diversity reports. However, they did not have the following information:

‍● Breakdown of ethnicity
● Recommendations to recruiters based on the data
02. Define
Product requirement Document (PRD)
User personas
User workflow
In collaboration with the CEO and Project Manager, I reviewed the results of the Research and discussed both the company's and users' needs. Our next step was to create a PRD document that summed up all the requirements for the product.
‍
‍
User
Personas

Based on the interviews I conducted during the define phase, I also created user personas. We identified two types of users who would be using Diversity Score (Recruiters and candidates). On the personas, it was important to specify their pain points, tasks and goals for each.
User workflow

In collaboration with the engineers and machine learning scientists, I defined how the user would use with the tool on each step and designed a workflow diagram.
03. Ideate
User stories

In collaboration with the Project managers we defined all the user stories needed to prioritize all the features.
04. Design
Wireframes

After the ideation phase. The design phase began with some basic wireframes in Figma. In order to present the designs to the stakeholder and team, I created the connections between the screens using Overflow. There were several iterations and some technical constraints with the graphs that were discussed during this phase. 2 versions were presented to the CEO. After several rounds we decided on the one that would best represent the product.
05. Prototype
High -fidelity
prototype

After a several rounds of iterations a High-fidelity prototype using was completed. Since I was also part of the Divercity Brand creation. It was very easy for me to decide on the look and feel of the website. All the colors, elements and typography were taken from the Divercity Design system.
This version was launched in October 2020. As part of the MVP for Divercity.
06. Iterate
User tests
Participant 1
Participant 2
When creating the high fidelity prototypes, I found some sections I knew users would find difficult. When the first version of the website was released, I wrote a document with a few questions in mind, and we conducted a user test with five people. Based on the results, we noted and fixed several UX and UI issues, and created Version 2.0. This version was going to be a fast follow after the released.
View Live version
MY LINKedin