Built for Teams: Recruiting Data

UX Design + UI Design

Adding a recruiting summary to open positions in an org chart product.

What does an award-winning web development company do when it can’t find an off-the-shelf product to meet its needs? It designs and builds that very product. And of course, wins some more awards in the process. When we couldn’t find an HR tool that was intuitive, modern, and flexible enough to meet our needs, we started a side project called Built for Teams. That side project is now the system of choice for hundreds of companies in multiple countries, including recognizable names such as Mount Sinai Hospital System, Republic Services, and Cornell University.

The Built for Teams software displayed in a laptop and mobile phone.

Built for Teams home screen.

The Problem

Decision makers don't have access to real-time recruiting data during workforce planning and strategy

Organization planning and recruiting data are typically disconnected, but we wondered what would happen if we brought this data together and allowed our customers to see a snapshot of recruiting information right from the org chart. An idea was born, and after a positive response from customers, we set out to design this feature.

Our Approach

01 UX DesignWe identified recruiting data needed by decision makers to support their strategic initiatives

Understanding the problem guided our research

We identified three questions to guide our research and help us dig deeper for a better understanding of the problem.

  1. How do the org chart and recruiting data connect?
  2. What information is critical for different roles?
  3. How do we surface this information?

We spent time talking to key personas

We talked to current and prospective customers to learn more about their needs and frustrations. During this UX phase our critical mission was to gain deep understanding of their processes and objectives. True UX design is much more than creating a sketch, and time spent interviewing customers pays huge dividends in the UI design phase that follows.

Persona: Matthew

Role: Department Head

Matthew has been a Department Head at Snyder Co, a Fortune 500 company, for 5 years. His roles include directing managers in planning and executing assigned projects, handling budgeting, workforce planning, building a positive work environment, ensuring customer service expectations are met, and achieving department goals.

He has been developing the department budget for the next quarter and has been utilizing the org chart for the data he needs to make estimates. Matthew knows that they have several unfilled positions in the department, but he’s not sure which of those positions they are actively recruiting for and how close they are to being filled. He wishes that he could find these answers on the org chart but alas, he only sees an empty box for each open position.

An example of a key user persona.

02 UI DesignWe designed custom, user-focused data visualizations and icons

Iterating and testing different versions lead us to the solution

We decided that the best place to visualize this data on the org chart was in place of a name on an open position. We iterated and tested through many ways of doing this.

Version 1

Display recruiting data in squares on open positions

Version 0 wireframe of Built for Teams Org-Chart node


  • Feels off balance
  • Data is too small

Version 2

Increase size of recruiting data

Version 1 wireframe of Built for Teams Org-Chart node


  • Not intuitive what each square means

Version 3

Utilize icons to help the user quickly connect what each data point means

Version 2 wireframe of Built for Teams Org-Chart node


  • Five data points doesn’t answer enough critical questions to meet user’s needs

Version 4

Give user two choices for how to view all open positions

Version 3 wireframe of Built for Teams Org-Chart node


  • Would require us to relocate the existing menu icon displayed on hover
  • User would be stuck with a single view on all positions

Version 5

Let user toggle between the two available data views

Version 4 wireframe of Built for Teams Org-Chart node


  • Would require us to relocate our color coding panels
  • Feels like scrolling, not toggling as intended

Working through these various options for each persona helped us iterate until we found the optimal solution...

The Solution

We worked around constraints to create a seamless experience for our users

We utilized the current product UI for many elements of this solution, but our final design required creative thinking and working within the constraints presented by a small open position box.

UI results of Built for Teams Org-Chart node with icons
UI results of Built for Teams Org-Chart node with a tool tip
UI results of Built for Teams Org-Chart node with a toggle switch
UI results of Built for Teams Org-Chart node when there is an open position
UI results of Built for Teams Org-Chart node when there is missing data
UI results of Built for Teams Org-Chart node with a new background color
An animated mockup of the finished node design

A mockup of the finished design.

We integrated the solution into the product

In order for this to work we needed to consider many details of this complex design including how the user could connect a position to a job posting, how the user could edit the information, and how the feature would function in different scenarios such as the user opting not to assign a position to a job posting or the user setting multiple job openings related to the same posting. But that’s another story for another case study. Feedback on this solution has been excellent.

Project user flow diagram.

Project user flow diagram. Yeah, there’s a lot going on.

Ready for us to work with you on your project?

Hire us

Or check out more case studies.