HR Dashboard

UX/UI Case Study

HR Dashboard
UX/UI Case Study

HR Dashboard

UX/UI Case Study

Pseudo Client: Microsoft Co.

Pseudo Client: Microsoft Co.

Pseudo Client:

Microsoft Co.

*

*

*

*

*

*

*

*

*

Jump to Prototype

Jump to Prototype

Jump to Prototype

Up

*

*

*

*

*

*

Project Overview:

Project Overview:

Project Overview:

Imaginary scenario: Microsoft co. (Israel), ordered a recruiting dashboard solutions for a TA (Talent Acquisition) and the CEO.

Therefore, I planned and designed two recruitment management dashboards:

  • An operational, day-to-day, recruitment dashboard (CMS\ATS) for
    a TA (Talent Acquisition).

  • An analytical, overview, recruitment dashboard for a CEO.

Imaginary scenario:

Microsoft co. (Israel), ordered

a recruiting dashboard solutions for a TA (Talent Acquisition) and the CEO.
Therefore, I planned and designed two recruitment management dashboards:


  • An operational, day-to-day, recruitment dashboard (CMS\ATS) for a TA (Talent Acquisition).


  • An analytical, overview, recruitment dashboard for a CEO.

Imaginary scenario:

Microsoft co. (Israel), ordered

a recruiting dashboard solutions for a TA (Talent Acquisition) and the CEO.
Therefore, I planned and designed two recruitment management dashboards:


  • An operational, day-to-day, recruitment dashboard (CMS\ATS) for
    a TA (Talent Acquisition).


  • An analytical, overview, recruitment dashboard for a CEO.

My role

My role

My role

  • UX research

  • Planning & wireframing

  • UI design & prototyping

  • UX research

  • Planning & wireframing

  • UI design & prototyping

  • UX research

  • Planning & wireframing

  • UI design & prototyping

Tools

Tools

Tools

Specs

Specs

Specs

  • Platform: Desktop

  • Duration: ~4 weeks

  • Platform: Desktop

  • Duration: ~4 weeks

  • Platform: Desktop

  • Duration: ~4 weeks

~

Design Timeline

Design Timeline

Design Timeline

To generalize, the design process stages were: Understand - Analyze - Ideate - Design - Test.

To generalize, the design process stages were: Understand - Analyze - ideate -
Design - Test.

To generalize, the design process stages were: Understand - Analyze - ideate -
Design - Test.

*

*

*

*

*

*

*

*

*

*

*

*

*

*

Challenge

Challenge

Challenge

The recruitment process is a critical-to-maintain, non-stopping
and complicated practice in every company. Not only recruiters needs
to be in constant control over the different processes and candidates, they need to
deliver key insights that will help them and their team to manage and prioritize.

On the other hand, the CEO who oversees the process, is seeking to get the right information
for best decision making, to keep track on trends and to manage - fast & smart.

The recruitment process is a

critical-to-maintain, non-stopping and complicated practice in every company.


Not only recruiters needs to be in constant control over the different processes and candidates, they need to deliver key insights that will help them and their team to manage and prioritize.

On the other hand, the CEO who oversees the process, is seeking to get the right information for best decision making, to keep track on trends and to

manage - fast & smart.

The recruitment process is a critical-to-maintain, non-stopping
and complicated practice in every company.


Not only recruiters needs to be in constant control over the different processes and candidates, they need to deliver
key insights that will help them and their team to manage and prioritize.

On the other hand, the CEO who oversees the process, is seeking
to get the right information for best decision making, to keep track
on trends and to manage - fast & smart.

1st Goal

1st Goal

1st Goal

To understand the user situation, motivation and important key insights, regarding recruitment operations and the two defined users: TA and CEO (including the work relations between them).

To understand the user situation, motivation and important key insights, regarding recruitment operations and the two defined users: TA and CEO (including the work relations between them).

2nd Goal

2nd Goal

Plan and design operational (CMS\ATS) recruitment dashboard that imparts ‘quick critical information’ and ‘time sensitive tasks’
for a TA.


Plan and design operational (CMS\ATS) recruitment dashboard that imparts ‘quick critical information’ and ‘time sensitive tasks’ for a TA.

Plan and design operational (CMS\ATS) recruitment dashboard that imparts ‘quick critical information’ and ‘time sensitive tasks’ for a TA.

3rd Goal

3rd Goal

3rd Goal

An analytical dashboard for the CEO regarding recruitment management, provides OKRs, used to analyze, strategize and for decision making.


An analytical dashboard for the CEO regarding recruitment management, provides OKRs, used to analyze, strategize and for decision making.

An analytical dashboard for the CEO regarding recruitment management, provides OKRs, used to analyze, strategize and for decision making.

*

Research & Insights:

Research & Insights:

Research & Insights:

Interviews

Interviews

Interviews

Two recruiters were interviewed: one from a large tech start-up (~800 employees),
and the second from a large organization (1000+ employees).
Leading research questions were:

Two recruiters were interviewed:

one from a large tech start-up

(~800 employees), and the second from a large organization (1000+ employees).
Leading research questions were:

Two recruiters were interviewed: one from a large tech start-up

(~800 employees), and the second from a
large organization (1000+ employees). Leading research questions were:

  • What is a typical recruiting process?

  • What counts as a positive experience?

  • What KPIs and metrics, TA\CEO needs on a daily basis and what for?

  • What data and analytics TA presents to the CEO?

  • What tools TA\CEO use (softwares & technics)?

  • How and what TA communicate to other team members?

  • What do you need to document in the recruiting process?

  • What is a typical recruiting process?

  • What counts as a
    positive experience?

  • What KPIs and metrics, TA\CEO
    needs on a daily basis and what for?

  • What data and analytics TA presents to the CEO?

  • What tools TA\CEO use?

  • How and what TA communicate to other team members?

  • What do you need to document in the recruiting process?

  • What is a typical recruiting process?

  • What counts as a
    positive experience?

  • What KPIs and metrics, TA\CEO
    needs on a daily basis and what for?

  • What data and analytics TA presents to the CEO?

  • What tools TA\CEO use?

  • How and what TA communicate to other team members?

  • What do you need to document in the recruiting process?

~

~

*

*

*

*

*

*

Competitive Analysis

Competitive Analysis

Competitive Analysis

Major competitors with large user base were analyzed, by getting
the software's demo versions, demo videos and screenshots.
Below are 3 top products analyzed, according to with 5 categories and scores that were evaluated:

Major competitors with large user base were analyzed, by getting

the software's demo versions, demo videos and screenshots.


Below are 3 top products analyzed, according to with 5 categories and scores that were evaluated:

Major competitors with large user base were analyzed, by getting

the software's demo versions, demo videos and screenshots.


Below are 3 top products analyzed, according to with 5 categories and scores that were evaluated:

*

*

*

*

*

*

*

*

Insights

Insights

Insights

After conducting interviews, benchmarks and on-line research, these are some key insights I discovered:

After conducting interviews, benchmarks and on-line research, these are some key insights I discovered:

After conducting interviews, benchmarks and on-line research, these are some key
insights I discovered:

*

~

*

*

*

~

*

*

*

*

*

*

~

~

~

*

Role Personas

*

*

*

*

*

*

*

~

*

*

*

*

Insights

Information Architecture

Information Architecture

Information Architecture

The two defined personas need two different dashboard.

Thus, I defined two dashboard attributes - ’micro’ for a TA and ‘macro’ for the CEO.

The two defined personas need two different dashboard.


Thus, I defined two dashboard attributes - ’micro’ for a TA and ‘macro’ for the CEO.

The two defined personas need two different dashboard.

Thus, I defined two dashboard attributes - ’micro’ for a TA and ‘macro’ for the CEO.

TA Operational Dashboard

TA Operational Dashboard

TA Operational Dashboard

Designed to swiftly provide important information to users while
they are working on time-sensitive tasks.

The operational dashboard’s primary objectives are to rapidly and clearly
provide data variances to the user, showcase existing resources, and highlight their status:

Designed to swiftly provide important information to users while they are working on time-sensitive tasks.


The operational dashboard’s primary objectives is to rapidly and clearly provide data variances to the user, showcase existing resources, and highlight their status:

Designed to swiftly provide important information to users while they are working on time-sensitive tasks.

The operational dashboard’s primary objectives is to rapidly and clearly provide data variances to the user, showcase existing resources, and highlight their status:

CEO Analytical Dashboard

CEO Analytical Dashboard

CEO Analytical Dashboard

Analytical dashboard, designed to provide the user with quick access to data for analysis and decision-making process. Mangers usually don't place as much emphasis on quick responses and are not as time-sensitive.

Analytical dashboard, designed to provide the user with quick access to data for analysis and decision-making process. Mangers usually don't place as much emphasis on quick responses and are not as time-sensitive.

Analytical dashboard, designed to provide the user with quick access to data for analysis and decision-making process. Mangers usually don't place as much emphasis on quick responses and are not as time-sensitive.

*

*

~

*

*

*

*

~

*

*

*

*

*

User Flow

User Flow

User Flow

The typical flows for the main screens are presented below. As opposed to the CEO, the number of in-system
actions and decisions TA need to manage is larger, following the operational vs. analytical concepts.

The typical flows for the main screens are presented below. As opposed to the CEO, the number of in-system
actions and decisions TA need to manage is larger, following the operational vs. analytical concepts.

The typical flows for the main screens are presented below. As opposed to the CEO, the number of in-system
actions and decisions TA need to manage is larger, following the operational vs. analytical concepts.

Legend

Legend

Legend

Screen

Screen

Screen

Action

Action

Action

Dashboard screen

Dashboard screen

Dashboard screen

Features/Metrics

Features/Metrics

Features/Metrics

Decision

Decision

Decision

TA Typical Flow

TA Typical Flow

TA Typical Flow

*

*

*

*

*

~

~

~

*

*

*

*

CEO Typical Flow

CEO Typical Flow

CEO Typical Flow

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

CEO (Managment)

CEO (Managment)

*

*

~

Low Fed. Wireframes

Low Fed. Wireframes

Low Fed. Wireframes

Overall, the wireframes are designed to provide with a streamlined, user-friendly interface that enables to manage the process more efficiently and effectively.
For both dashboards I used ,for example, the Gestalt & Miller’s Law, (grouping principles &
humans keep ~7 items in their working memory).
See the following dashboard components iterations - updated according to testing with the interviewee.

Overall, the wireframes are designed to provide with a streamlined, user-friendly interface that enables to manage the process more efficiently and effectively.


For both dashboards I used ,for example, the Gestalt & Miller’s Law, (grouping principles & humans keep ~7 items in their working memory).


See the following dashboard components iterations - updated according to testing with
the interviewee.

Overall, the wireframes are designed to provide with a streamlined, user-friendly interface that enables to manage the process more efficiently and effectively.


For both dashboards I used ,for example, the Gestalt & Miller’s Law, (grouping principles & humans keep ~7 items in their working memory).


See the following dashboard components iterations - updated according to testing with
the interviewee.

Recruiter

Recruiter

Recruiter

CEO

Here's Why

    1. Quickly and easily access all relevant sections
      of the dashboard

    1. Filter data to focus on specific metrics or get insights faster with a click

    1. Provide an at-a-glance overview of
      key recruiting metrics

    1. Quickly identify bottlenecks and take necessary action to move candidates through the funnel

    1. Track top sources of job applicants and adjust sourcing strategy for hiring top talent

    1. Stay informed about events, job fairs, meetings
      and to-do's

    1. Focusing efforts on the most promising candidates with the help of a list of top talents to follow

    1. Assist AI predicts hiring outcomes and identifies potential roadblocks, enabling proactive steps to meet hiring goals

    1. Access all relevant dashboard sections
      quickly and easily

    1. These metrics are essential for tracking recruiting performance & identifying areas for improvement

    1. Easily track & compare costs over time, and identify trends or areas for improvement

    1. Presenting average time to fill in a bar graph format with numerical goals, the CEO can easily track progress and make necessary adjustments

    1. Positive/ negative percentages, along with feedback, help the CEO identify areas for improvement in the candidate experience & take action

    1. Track open positions, identify bottlenecks, and adjust to meet hiring goals

Recruiter

Recruiter

Hi Fed. Wireframes

Hi Fed. Wireframes

Hi Fed. Wireframes

CEO (Managment)

CEO (Managment)

Recruiter

CEO

*

~

*

*

*

*

*

*

*

Style Guide & UI Elements

Style Guide & UI Elements

Style Guide & UI Elements

A style guide system for writing, formatting and design of documents.

Segoe UI font used, as it is the official font of Microsoft Co. for UI.

Color pallet chosen as the official colors of Microsoft.

A style guide system for writing, formatting and design of documents.


Segoe UI font used, as it is the official font of Microsoft Co. for UI.


Color pallet chosen as the official colors of Microsoft.

A style guide system for writing, formatting and design of documents.

Segoe UI font used, as it is the official font of Microsoft Co. for UI.

Color pallet chosen as the official colors of Microsoft.

Color Pallet

Color Pallet

Color Pallet

Typography

Typography

Typography

H1 32: Segoe UI

H1 32: Segoe UI

H1 32: Segoe UI

H1 20: Segoe UI

H1 20: Segoe UI

H1 20: Segoe UI

TXT 16: Segoe UI

TXT 16: Segoe UI

TXT 16: Segoe UI

Tool-Tips 14: Segoe UI

Tool-Tips 14: Segoe UI

Tool-Tips 14: Segoe UI

Iconogrpahy

Iconogrpahy

Iconogrpahy

*

*

*

*

UI Component System

UI Component System

UI Component System

*

~

*

*

*

*

*

*

*

*

*

~

Prototype

Prototype

Prototype

*

~

*

*

*

*

*

*

*

Or watch link here

Or watch link here

Or watch link here

Final UI

Final UI

Final UI

Talent Acquisition

Talent Acquisition

Talent Acquisition

Management (CEO)

Management (CEO)

Management (CEO)

*

*

*

Future Work

Future Work

Future Work

  • Interview a CEO

  • Conduct a survey

  • Plan and design the rest of the system

  • Conduct usability testing (A/B Testing)

  • Create design system

  • Interview a CEO

  • Conduct a survey

  • Plan and design the rest
    of the system

  • Conduct usability testing
    (A/B Testing)

  • Create design system

  • Interview a CEO

  • Conduct a survey

  • Plan and design the rest of the system

  • Conduct usability testing (A/B Testing)

  • Create design system

*

*

*

*

*

*

~

~

~

Thank You

~

Yonatan Bell

~ Yonatan Bell

~ Yonatan Bell

*

*

*

*

*

*

*

*

*

*

*

*

Enjoying your time? Let's chat

© Made with

By Yonatan Bell

Enjoying your time? Let's chat

© Made with

By Yonatan Bell

Enjoying your time? Let's chat

© Made with

By Yonatan Bell

*

*

*

*