Xavier – pre-employment screenings

2018-2019 / 6 months / UI/UX / ~379 screens / Designed from scratch / Sketch, Invision

~ 7:20 mins reading time

Summary

Services

  • User Experience Design

  • User Interface Design

  • Prototyping

  • Interaction Design

  • Information Architecture

Deliverables

  • Design system

  • Style guides

  • Final design and interactions

  • High-fidelity click-through prototypes

  • Development support

Outcomes

  • A flawless responsive screening process for candidates

  • Robust review user experience for screeners

  • Easy to use management process for clients (companies)

Project

Xavier is proprietary software for pre-employment screenings that needed a new user experience, robust design, and more features.

I was a part of the Sprint Innovations team as an independent freelancer when we started to work on the Xavier UX. They already had a bootstrap-based wireframe of the app with basic functionality and asked us to overhaul it.

In the beginning, Xavier will only be an internal tool with the idea to convert into a white-label product. 

Problem

  • Xavier’s current app was very limited in functionality and served to a small part of their needs.

  • They had the goal of making the paper obsolete in their business by providing candidates, clients, and staff with unified digital experience.

  • The nonstructured back and forth communication bring difficulties in how candidates apply and track their screening.

Solution

  • We created a multi-user roles web application that connects the Xavier team, their clients, and the candidates that have to complete the screenings.

  • Responsive web experience for the candidates to complete all checks from the screening process, get feedback and make corrections through a mobile device.

  • An easy way for the Xavier team to manage the screenings, require adjustments, and manage the client’s and candidates’ data.

Design Process

1 / Discover

  • Research

  • Meetings and questions

  • User interviews

2 / Define

  • HTML and Axure wireframes (provided by the client)

  • Information architecture

  • User flows

3 / Design

  • Visual guidelines & Components Library

  • High-fidelity user flows and prototypes

  • Interaction design

  • Development support

4 / Test

  • Contextual inquiry

  • User interviews

1 / Discover

There was an initial version of the application, which was a functional wireframe of the most basic futures. We started with a couple of Q&A sessions with the Xavier team. The goal was to understand more about the business and how these people work with the application. The confusion gets from many places. Primary buttons were below the table elements and did not look like primary. Mixed styles and colors confuse people and bring more cognitive load.

We talked to regular people that had to complete the screenings. We found people don’t know where to start. They are afraid of errors. People often don’t know which identification documents to use.

Companies struggle to follow up on updates for each candidate. They need an automated process and clean results. Ability to track candidates, perform custom screenings, review billing, and reports were among the most requested features.

2 / Define

We started with the provided wireframes. We used them as a starting point for something bigger. Exploration, questions, brainstorming were our key activities during that phase.

Information Architecture

Next was the big picture. We mapped all the pages and functionality and created the information architecture for the application.

User flows

We focused on details and executed the main user workflows. We concentrate on Admin functionality as it will cover all other roles functionalities. This way, we’ll design once, then cut off features after that to fit the different user roles. Below you will see some of the user flow we mapped.

Admin Manage Client Application

Admin Add Candidate

Admin-Candidate Screening

3 / Design

Visual guidelines & Components Library

The Xavier team provided us with just the primary color of their brand and gave us full creative freedom. We started with the basics – color palette, typography scale, grid, and spacing system.

Given that the app will be used daily for more than 5h per day, we created a light UI system with strong accents and big accessible click areas. We built the components system wisely with a minimum set of components with maximum use of nesting and re-usability.

High-fidelity user flows and prototypes

Below you will see some of the user workflows we designed. They cover the core screen layouts and interaction patterns we used all over the interface.

Company create account

With the first screens, we established a strong hierarchy between sections and elements. We introduced different form elements, their states, and corresponding interactions.

Specific here is the address lookup type-ahead with the option to add a new address. The company works primarily in the UK, and we optimized the form to use the postcode to determine an address and present it to the people in an editable way for further adjustments.

Admin approve company application

This workflow presents the core page templates in the app. The table view and the details page. We use a clean and functional table view, which purpose is to present a high-level view and by using statuses to point user attention to the important items.

The details page template is used for companies and clients and is a unified and versatile piece of UX that we used all across the app.

Admin add new screening

The screening is a process of combining different checks to form a screening process. It costs money and has some additional details. We used a standardized search type-ahead, drag and drop, and inline editing patterns to form a quick and easy screening creation experience.

After the admin creates the screening, he can preview it and experience it like the actual candidates.

Admin add a new candidate

We used the standardized approach to present the “new creation” of items in a new full-screen popup. It helps people focus on the important, which are usually split into small sub-tasks. For example, the admin has to select a company to see and fill the other important details.

Screening process

The screening process is a massive 125 screens multi-role workflow that presents the core functionality of the application.

The flexible design patterns and the smart layout helped us to accept the challenging requirements and to create a unique screening process experience. Admins and candidates communicate asynchronously to complete the procedure.

Admins can review, comment, flag, upload files to every input, sub-section, and a section of each check in the screening.

We built the screening process for the candidate responsive, and now they can perform it from all kind of mobile devices.

Admin use candidates filters

The candidates page is a content-heavy table full of statuses. There is a horizontal scroll as the number of the check can be up to 50. Xavier’s team had a very different search/filter queries they needed to perform on this table.

We designed a massive search page with all the possible options they need. We kept the style and the functionality but combined the popup page with filter capabilities.

Interaction design

It is hard to separate the interaction design and present it on its own. With this section, we want to cover the most used interaction patterns and our thoughts about them. We were lead from the shared understanding that the user performs actions, and the system changes the statuses, users can’t change statuses directly.

Manage details in a popup page

We used this approach all over the app for “adding” functionality. Instead of a new page, we created a popup page that appears over the current page. This way, people stay in context but focus on the essential tasks.

Inline editing pattern

A quick and easy way for admins to edit a candidate’s data where needed. Admins do this occasionally, which is why we used this pattern. The admin triggers the editability of the input, which gives the option to edit, save, or cancel the edit.

Multi-level status update pattern

The core pattern for the app. It covers the admin’s ability to review, comment, upload file, flag, and return a part of the screening.

The candidate sees the requested edits, correct the mistakes and submits again, till all is filled correctly.

Table view and filtering pattern

There are lots of tables. We unified the appearance and layout of all of them. Each table has a “items per page” dropdown, search and filtering capabilities, pagination, and items count area. Status legend and columns filter appears if needed. Each table row is clickable and leads to the appropriate details page.

Development support

We provided the developers with everything they need – style guide, components library with all the components states and variations, user flow diagrams with the corresponding complete high-fidelity click-through Invision prototypes, and the great Invision Inspect. We had many feedback and bug-fixing sessions to be sure the final product meets the highest standard.

4 / Test

The app orientation to internal staff, companies, and candidates, allows us to see how different people interact with the product on different levels.

We watched people completing the checks on paper to understand where their confusion comes from. Based on these findings, we designed the “Add/remove info blocks” pattern.

The Invision prototypes were an excellent way for quick remote testing with Xavier staff and the defined user groups. The established design system and the organization of the files allowed us to test variations quickly, do iterations and feedback sessions effectively.

Outcomes

  • Candidates have a paperless process now. They can easily get invited by the clients, create an account, and start completing checks. People don’t worry anymore where to start a check or what ID to use.

  • Screeners can manage the complete life cycle of the screening for clients and candidates through a digital experience – no paper anymore. Xavier’s staff can review and return the screening multiple times and help candidates to complete it correctly.

  • Clients can manage their candidates efficiently, track their screenings, and get results in real-time. Gone are the days when a client must call to find a result: the system shows them with a full activity log.

What we learned

  • When the idea takes too much time and is hard for design, scratch it, think more, and find a better one.

  • The ideal solution is always there, build stronger empathy, and push harder.

  • Always start high-level first and then move to details.

What’s next

We built the core functionality and the complete screening process. In the next versions, we’ll create billing flows, automation, integrations, and reporting capabilities.

A digital product is never ready. We’ll continue testing and finetuning the application to perfection.

Let’s work together

Drop me a line at [email protected]

Find out what my colleagues say about me and my work.

Hire me on upwork.com or view feedback.

Get the essential info neatly summarized.