Product | UX design

Product | UX design

Product | UX design

PredictiveHire (now Sapia) is a recruitment SaaS platform that automates interviews through FirstInterview, a text-based AI assessment.

PredictiveHire (now Sapia) is a recruitment SaaS platform that automates interviews through FirstInterview, a text-based AI assessment.

PredictiveHire (now Sapia) is a recruitment SaaS platform that automates interviews through FirstInterview, a text-based AI assessment.

I joined the team as their first UX designer.

I joined the team as their first UX designer.

I joined the team as their first UX designer.

My role

My role

  • User research

  • UX design

  • Design system

Leading end-to-end design and design system creation for a foundational ATS platform.

Estimated read time:

2min

Platform Design

Design System

Interaction Design

Visual Design

Accessibility

How might we make it easy for users to create and manage job vacancies within a complex organizational structure?

We began the significant task of creating a SAAS platform from the ground up to introduce essential new features and integrate with our newest digital products.

The platform would offer functionality similar to an Applicant Tracking System, including features such as:

  • Job vacancy creation and management

  • User creation and management

  • Organisational user hierarchy

  • Job application workflow

How might we make it easy for users to create and manage job vacancies within a complex organizational structure?

We began the significant task of creating a SAAS platform from the ground up to introduce essential new features and integrate with our newest digital products.

The platform would offer functionality similar to an Applicant Tracking System, including features such as:

  • Job vacancy creation and management

  • User creation and management

  • Organisational user hierarchy

  • Job application workflow

Permission hierarchy

At the beginning of the project we had a skeleton product team. Myself, the product manager, and internal stakeholders worked together to outline basic product requirements.

We began by mapping out the hierarchy of user permissions to identify which flows or pages would be accessible to different user groups or only to us.

Permission hierarchy

At the beginning of the project we had a skeleton product team. Myself, the product manager, and internal stakeholders worked together to outline basic product requirements.

We began by mapping out the hierarchy of user permissions to identify which flows or pages would be accessible to different user groups or only to us.

User flows and low fidelity

I numbered each screen and created simple interaction maps to clearly outline each user flow.

I then created some low-fidelity mock ups based on the requirements and the existing functionality of the old platform.

User flows and low fidelity

I numbered each screen and created simple interaction maps to clearly outline each user flow.

I then created some low-fidelity mock ups based on the requirements and the existing functionality of the old platform.

Design system

I created a design system, creating both basic and highly specific components tailored to our platform’s needs. These were mostly created from scratch as due to limited resources we did not have access to an asset library.

I developed a distinct visual style by applying color theory and branding principles to create a palette that felt modern and technical, yet approachable, while aligning with our existing brand.

Design system

I created a design system, creating both basic and highly specific components tailored to our platform’s needs. These were mostly created from scratch as due to limited resources we did not have access to an asset library.

I developed a distinct visual style by applying color theory and branding principles to create a palette that felt modern and technical, yet approachable, while aligning with our existing brand.

Filter syntax

It was vitally important for users to be able to efficiently filter the large table of applicants. I designed a detailed set of filters to facilitate this.

Complex customisation

We wanted to give users the ability to easily customise the interview tool to match their branding.

I designed a form that would be pre-filled with their primary and secondary branding colors and allow them to customise other elements.

This included restrictions and validation to stop the user from creating something that would not meet accessibility requirements.
The mock up on the right would update in real time with the users’ choices.

The final design

We first released a basic version of the product to a limited number of users. Generally the reaction was positive, users particularly liked the fresh, contemporary look and the thorough ways they could sort and refine information.

Outcome

At this stage there were just a few small bugs to fix and additional features to think about before making the product available to everyone. Soon after I moved abroad so I didn't get to see how the product developed further.

What I learned at PredictiveHire

Learned how to translate high-level business requirements into a structured UX approach when building a product from scratch, balancing stakeholder input with user needs.



Learned how to create a scalable design system with custom components, balancing flexibility and consistency despite limited resources.



Realized the importance of baking accessibility into customization features (e.g., brand color validation) to prevent usability issues before they arise.



Learned how a controlled release uncovers both strengths (positive reception to visual style) and areas for iteration (minor bugs) before full rollout.

Create a free website with Framer, the website builder loved by startups, designers and agencies.