Overview

This is a project I worked on at TopFunnel. Please note that what you see here is slightly different from the actual production version.

Background

The TopFunnel app allows users (hiring managers) to review candidates submitted by recruiters quickly. Candidate card acts as a resume and users can swipe (left/right) on these candidates cards to decide whether to reach out or pass, it is a core component of the application.

It has been almost a year since the original candidate card was designed. It was not only time to give the UI a more modern look, the feedback we’ve gathered from users gave the product team a lot to think about in terms of new features. To learn more about how we can continue to improve, I set out to speak to users.

Understand the problem

With help from account managers, I was able to interview users on their experience interacting with the candidate card. After listening to users, we discovered the following frustrations:

There are many points identified, in the end, it was decided that some of the pain points can be summarized into the problem statement below: Hiring managers don’t have the relevant information readily available to make a decision.

User persona
Journey Mapping

To dive deeper, we created a journey map to better understand the product interactions from a user pov. We found that throughout the recruiting cycle, there are many ‘touchpoints’ where the user benefit from reconnecting with their recruiter.

Defining MVP

The problem was discussed at a product stand-up, and team members contributed their ideas. In the end, we’ve identified the following features:

Design & Testing
some paper wireframes, our last tester asked if he could write on it

Many iterations of wireframes (sketches) were created, followed by low-fidelity mocks. Members of the sales team was first to test paper prototypes. Their feedback was taken into account before high-fidelity mock was created on Figma. With help from Account Managers, the candidate card was user tested before production.

Results

Improvements made after production.

Prototype Sample

To give you a better understanding of how the design works, a simple web version of the design was prototyped.