Manage Your Hires Case Study

This is a case study on an internal tool used at a large corporate bank. The information below has been white-lablled where appropriate for your consumption.

Summary

User Concerns Lead to Bringing a UX Designer on Board for a Website Overhaul

  • The team for “Manage Your Hires” needed a redesign on their current website.
  • The team had received some feedback from their users and stakeholders about the current state of the website which prompted them to reach out to me. The initial website was created with little to no help from a designer and was built at the direction of the business stakeholders.
  • In essence, the website was functional but not user friendly.

Problem Statement

How Might We Redesign a Website to Help Hiring Managers Track and Manage Hires?

End Results/Findings

  • Creating a website that is simple but caters to a lot of variables takes time, lots of stakeholder sessions and lots of iterations.
  • The website was upgraded to the new version using the updated branding and was received as a much better version than the previous versions.

Information Architecture Before the Redesign

The following shows a couple of screenshots on the information architecture for the site. Not all flows included below.

Getting Buy-in from Stakeholders

As a new team member, I faced skepticism from stakeholders to interview end users as they preferred me to use intuition. To gain their trust, I used the general feedback they had received to perform a UX Audit and created some user-focused designs. This secured buy-in and enabled me to do user interviews.

People do not often receive full trust when joining a new team. This is especially true for UX designers joining as the sole designer and Subject Matter Expert for the team. You have to prove yourself given you do not have a direct manager to vouch for you. In this scenario, the best way to do this is to get buy-in.

When I first started on this project, I asked for a list of users to speak to before doing any designs, but this was met with some pushback as they informed me they had some anecdotes and feedback on the direction to go.

In order to get their buy-in, I used some of the feedback they had to do a UX audit, redesigned the website using general design principles and presented it to the stakeholders. These initial designs are presented below (after the prototypes). 

This gave me some buy-in, which ultimately led to acquiring the list of users. Once I was given the list, I was able to conduct some interviews and usability testing as demonstrated in further sections below which ultimately led to more redesigns.

Prototypes

The following is a rough sketch of prototypes i made in order to guide my thinking for the designs to show the stakeholders

Homepage

This shows the homepage for the website. Both below and after the fold.

Detailed Page

Initial design for the detailed page which a user gets to by clicking a line from the table on the homepage. Both below and after the fold.

Low Fidelity Designs

The low-fidelity designs offer hiring managers a streamlined experience. The homepage features a hero section, status cards, and a detailed table, with key information visible above the fold. A footer provides additional links. The detailed page, accessed via the homepage, gives in-depth information on each hire, enabling managers to take necessary actions as they scroll.

UX Audit Leads to Application Redesign (1st Pass)

After conducting a UX audit and analysing the limited client feedback provided, I created high-fidelity designs informed by both the available data and UX best practices.

Homepage- Above the fold

  • Image shows the homepage of what a hiring manager sees at first glance. This part of the homepage was really crucial to get right- The user must know they are on the right website, must be shown the most pertinent information immediately and must be able to determine further actions to take.
  • Previously, there was a lot of visual noise, lack of hierarchy and poor information presentation

Designer’s note

This was presented to stakeholders in 3 stages- header, hero and cards - but this has been presented here in combination for completeness.

Homepage- Below the fold

  • This gives the hiring manager granular information on each of their hires. It enables them to see what actions need to be taken and it is sorted from most urgent to least urgent.

Designer’s note

One of the edge cases that was presented is, senior level individuals (e.g. a director), could often have a lot of indirect hires due to their various reportees. This can present a lot of information overload, so a way to mitigate that was to cap the max number at 150. But give them the option to export 'all' (not shown).

Detailed page- Above the fold

  • This page is a continuation of the table on the homepage and as usual this design went through a number of iterations as the information presented to the user at the right time needed to be well thought out. This is the final product

Detailed page- Progress

  • This part of the page gives a granular level of what step is next in the process of completing all actions for the hire. It is also made obvious when there are no further actions to be taken for a particular segment.

Designer’s note

A good UX law applied here is the Goal Gradient Effect- “The tendency to approach a goal increases with proximity to the goal.” - by using the circular ring to denote progress.

Detailed page- Progress

  • This shows other actions a manager can take to get their new hires set up

Designer’s note

Type of language used is also important when you would like a user to take specific actions. For example, in the old design, there was a section titled “Recommended Actions for you”, upon probing I found out that the list of “Recommended Actions” were optional and did not need to be taken immediately. So I changed it to “Other Actions…” in order not to confuse users.

Delegates

  • In cases where the manager takes time off, is sick, needs to attend to an emergency and so on, this page enables a user to nominate colleagues to oversee and take action on their behalf.

Unmoderated Testing Approach + Results

After conducting a UX audit and presenting high-fidelity designs based on the limited data, I gained stakeholder buy-in by building trust through my redesigns. This trust allowed me to access and interview a range of users, including super users and newer/intermittent users, to further refine the designs.

General Introduction

  • The testing was carried out after some of my redesigns of the website which were only shown to a small group of stakeholders. Ideally this usability testing should have been before but I was only able to do this after I got buy-in from my stakeholders. I.e. I had to build some rapport first before I was given a list of users.
  • The testing was done on the current website (not my redesigns) as this was in production and I was able to ask questions based on their current use. In addition, I presented the new designs to get a view on how users perceived them.

Testing Goals

  • To understand how current users of Manage Your Hires navigate the website
  • To document users’ general pain points and any general comments they may have
  • To assess the perception of the new design
  • To inform new features that could be implemented into the website

General Questions

  • Could you explain what your role is and the context on why you needed to fill in some roles in your team?
  • Could you explain your hiring process from the point you decided you needed new team members to the starting point of Manage Your Hires
  • Could you share your screen and show me how you use Manage Your Hires?
  • Could you share your screen and show me how you use Manage Your Hires?
  • What are your general frustrations with Manage Your hires
  • What are your positive points about it?
  • Do you use any supplementary tools in addition to Manage Your Hires and Why?

Affinity Diagram

Changes after the User Research and Usability Study (2nd Pass)

Once I completed the Usability study, i was able to get insights into the changes that needed to be made and the recommendations in the redesign can be seen below.

Homepage (Previous- before the fold)

  • The previous design displayed an overview with 3 tiles- Upcoming Status, Progress tracker and Next Hires. During my interviews with users, none of them cared about an overview and most just scrolled down the page to view the table of hires.

Homepage (Latest- Before the fold)

  • The latest design brings the table view above the fold immediately as this was the most important thing users cared about
  • The Table columns have also been changed to show what is actually useful to users at a glance without the need to drill in and then go back to repeat the process multiple times. E.g. A lot of users really wanted to know if a laptop had been issued. So I designed the table to include that as a main column.

Homepage (Previous- After the fold)

  • After the fold on the homepage previously featured the table which was reordered in the latest design (as mentioned above) to be “before the fold”

Homepage (Latest- After the fold)

  • In the new design, an FAQ section has been brought in. This was brought in due to the intermittent use of the website by experienced users and use of the site by first time users. Some users expressed not being able to understand how to navigate the site. Some other users had questions about specific sections on the site so an FAQ section was brought in to fulfil those needs.

Detailed View (Previous- before the fold)

  • In the initial design, above the fold on the detailed view was sparse with information and it was not clear that there were more items below the page for the user to scroll to.

Detailed View (Latest- Before the fold)

  • The updated design showed more information above the fold and the Progress tracker was brought into view so the user is aware that more details exist below the fold.
  • The progress tracker also shows discrete numbers instead of percentages as this helps the hiring manager understand how many items are left to complete.

Detailed View (Previous- After the fold)

  • In the initial design, above the fold on the detailed view was sparse with information and it was not clear that there were more items below the page for the user to scroll to.

Detailed View (Latest- After the fold)

  • The latest design shows a top to bottom view as opposed to the left to right, as it helps the user consume the information one at a time and make a decision based on each item. In addition, due to the different types of hires, the accordion can be made more dynamic to fit different needs. For example, some users may have more Core HR requirements than others and those items can easily be added without breaking the design.

Conclusion

  • This project was as much an exercise in obtaining buy-in from stakeholders, whilst also presenting designs that fit the user and business needs. 
  • Once I was able to obtain buy-in and get access to users, it became much easier to convince stakeholders as I was presenting information based on my interviews. The stakeholders really valued data and able to understand their users point of view.
  • Marrying business goals, users goals and limitations of the software is a balancing act that requires a lot of patience, understanding and creativity. It allowed me to have fun whilst also providing impact.