Homepage Redesign - Case Study

Company: Diversity.io
Role: UX/UI designer
Deliverables: User Research, Site Map, Wireframes and Prototype
Wins: 35% Increased traffic | 90% Approved by users
Project Overview
Divercity's mission is to connect minority professionals with job opportunities in tech. When a user registers with Divercity, the feedpage appears as the main page. The website features new job opportunities, the ability to interact with other members by replying or creating new posts. It also allows to be part of the community.
Problem to solve
In the current Homepage, users weren't given enough opportunity to interact with job posts or users' posts. Due to this, there wasn't a lot of traffic from new users and few companies registered to post their job opportunities on Divercity. There is a big need to re-design the homepage with new features to improve the interactivity between users and the ability to apply to jobs. This will increment traffic and users bringing more revenue to Divercity.
The Process
01. Research
User Test

As part of this redesign, we wanted to address the individual needs of our two types of users (Recruiters and Candidates). To collect qualitative data about the current version, I suggested asking our users to perform several tasks and observe their behavior and pain points, especially in the areas we thought needed improvement.

As part of our research, we interviewed ten users (5 recruiters and 5 candidates) about their feelings and pain points after completing certain tasks. During this UX research, we collected valuable data that helped us focus on the areas that needed improvement.
‍
02. Define
User center canvas
Our research results led me to develop a User Center canvas, which would list and prioritize the user's needs and goals and suggest solutions the new homepage may be able to provide.
03. Ideate
Ideation session (Miro)

The ideation phase involved brainstorming and gathering ideas for improving, removing, adding, and updating all the features in the current design to meet the needs and goals of the users. Miro was our tool for facilitating team collaboration during these meetings. Upon defining the sections of the feed page, I created a new sitemap that included these sections.
Sitemap

The Information Architecture was crucial since two different approaches were required for different types of users. Figma was used to create the two different mapsites for each type of persona. The recruiters had an additional page that involved Recruitments services and Dashboards.
04. Design
Low-fidelity
wireframes

After the ideation brainstorm session, we identified the sections that needed to be updated or some of them needed to be added. Here are some initial wireframes I've created.
05. Prototypes
Interactive wireframes

As soon as I had the prototypes ready. It was important to me that the design was functional and covered all of the necessary workflows. In order to facilitate the user testing, an interactive prototype was developed. For the Usability Testing, 6 people were tested (3 recruiters and 3 candidates) for an experience of the entire feed page by going through a series of tasks. We got great feedback and there were minor fixes to make to the design.
06. Iteration

User test
As a result of the user testing, minimal changes were required to the design. Following the completion of these fixes a completed high-fidelity version was created and presented to the Stakeholders and Engineering team.
Final Design

With the new Homepage, recruiters have access to all the tools and features they use on a daily basis.
‍
Improvements on the Recruiters version included: 
• A quick way to access the Staffing Dashboard to look for candidates
• A shortcut to company profile section
• Quick way to Post a job, company post or create a company
• Easy access to the recruitment tools
• Access to creating company post for announcements and news
‍
Candidates
Version

Improvements on the Candidates version:
‍
• Overview section facilitating access to Job applications, Connections, and Companies
•  A recommended jobs section that is more clear and more visible
• Posts with clear information that candidates need (salary, location, diversity score, etc.)
•  Ability to create a quick post
•  An Apply button on each Job post
•  New diversity spotlight that features the best Diverse companies
•  An easier way to network and connect
•  Ability to like and comment on a post
07. Wins

The latest user test showed 90% approval for the new Diversity page feed, which we expect will increase traffic by 35% to the homepage.
In return, Divercity will generate more revenue by providing more value and solutions to the users, which in turn will encourage recruiters to pay for memberships with the company.
‍
A few metrics that will help track the process are:
• Sign-ups every week and month
• Returning users
• Job applicants
• Recruiters posting jobs
• Job applications
just to name a few.
MY LINKedin