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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.