Integration Purchasing Redesign

The TL;DR

Purchasing third party integrations in Hireology is an inconsistent and confusing experience for users, leading to low conversion rates and lost revenue. I designed a simplified and unified experience for purchasing Background Checks, References, and Candidate Assessments in-app.

The Challenge

One of Hireology's product offerings is in-app purchasing of third party integrations, such as background checks, reference checks, and assessments. However, these purchasing experiences were designed by different teams, at different times, many years ago, and resulted in inconsistent interfaces and interactions. These inconsistencies have caused confusion for users and led to low conversion rates. Research told us that vetting and qualifying candidates are among the most important value propositions of our app to our customers. Yet, the low conversion rates showed that we were not fully delivering on that value and generating as much revenue as we could have been.

As a result, my first major project at Hireology was to design a unified purchasing experience across all of our pre-hire third party integrations that would increase conversion and improve the user experience.

Role & Responsibilities

UX/UI Designer

I was the lead UX Designer for this project and worked closely with the Product Manager to develop requirements and the Senior User Researcher to conduct usability testing.

Scope & Constraints

This project did not have any major constraints as the plan was to revamp the entire experience from beginning to end. The only constraint was that we had to work with the data provided by the APIs from each provider.

The Process

1. Analyzing the baseline

My first step was to analyze the issues with the existing experiences, as well as their current conversion rates.

I discovered 4 main issues:

Inconsistent purchasing workflow
- Background Checks and Skills Tests: Selection --> Candidate Info --> Confirm Order
- References: Candidate Info --> Selection --> Confirm Order
Inconsistent use of navigation
- Background Checks and Skills Tests: main navigation is still visible, enabling the user to accidentally abandon the flow mid-purchase
- References: main navigation is hidden and the user is entered into a full-page experience, keeping them from accidentally abandoning their purchase.
Inconsistent placement and naming of call-to-actions for user to move forward in the process
- Background Checks and Skills Tests: CTA to move forward is "Continue"
- References: CTA to move forward is "Next"
- Background Checks: CTA to finish order is "Confirm"
- References and Skills Tests: CTA to finish order is "Complete Order"
Inconsistent selection patterns
- Background checks: radio buttons since the only one item can be selected at a time
- References: "select" button with no visual indication that only one item can be selected at a time
- Skills Tests: 3 different patterns for selecting items across different test types

Exposed main navigation

CTA at the top of the page

CTA at the bottom of the page

Background Checks

Main navigation replaced with full-page header

CTA is hidden in a full-page footer

No indication only one item can be selected

References

Items hidden behind a dropdown

Checkbox selection

Radio button selection

Exposed main navigation

Presented with all options even if only need 1

Skills Tests

While Background Checks were converting well over a 90-day period, References and Skills Tests needed a lot of improvement.

Background Checks 90-day conversion rate: 95.97%
References 90-day conversion rate: 64.58%
Skills Tests 90-day conversion rate: 54.19%

2. Competitive analysis and best practices

My next step was to conduct a competitive analysis of purchasing in other HR software as well as common e-commerce websites, like Amazon and Ebay. The analysis showed that most purchasing flows, whether in HR tech or major e-commerce, followed the pattern: Select what to purchase --> Enter relevant contact information --> Confirm order

Competitive analysis

3. Time to design

Once I had a solid understanding of the issues that needed to be solved and the best practices for purchasing, I was ready to start designing. I started by focusing on Background Checks because it is the most straightforward flow, that way I could explore a number of ideas without getting too caught up in the complexities to start.

Early wireframes

4. Usability testing

Once I had landed on a pattern that worked, I collaborated with the Senior User Research to craft a usability testing plan. We tested Background Checks with 6 customers and Skills Tests with 10 users. The results of both were encouraging, as participants had no issues performing tasks around selecting items, navigating to checkout, and completing their order. The feedback from participants around Skills Tests was particularly positive compared to their past experiences. These results gave us the confidence to move forward and finalize the designs.

The Outcome

The final designs feature a flexible card pattern for displaying the options, a search bar on all pages, and a cart that can be accessed throughout the purchase flow. I decided to rename Skills Tests to Candidate Assessments and added a step in the flow for the user to choose which assessment categories they want to order from so they are only presented with what they needed. I broke the checkout page into clear sections, enabled the user to edit the contact information, and used "Place Order" as the final call-to-action.