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.

• Role: UX design and research
• Platform: iOS
• Tools: Figma
• Collaboration: Engineer, account managers, product manager, users

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:

• Linkedin is replacing the candidate card - When users are using the TopFunnel app, many are choosing to review Linkedin profile instead of the candidate cards, this leads to longer load time, more clicks to accomplish their goal and switching apps in between tasks also affects the user experience.
• Lack of description - Users want to know if there are descriptions under the candidate’s Linkedin employment section. Though not everyone writes description, this section is often used to summarize accomplishments and skills. Making this a very valuable piece of information.
• Not everyone understands what swipe right/left means - the app utilizes the swiping left/right concept that Tinder is known for. A user explained that he has never used Tinder, hence accidentally swiped the wrong direction more than a few times.
• Disconnection with recruiters - when faced with profiles with not a lot of information, users is often confused as to why the candidate was submitted, they want instant answers from the recruiter ‘why’ the candidate was sourced, otherwise, they will reject that candidate.

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:

• Skills and accomplishment keywords. Using AI, keywords will be drawn from the employment description and display onto the candidate card.
• Improve communicate between user and recruiter, by informing recruiters with feedback on they made the decision they did.
• Skip option. A skip button (also adding Yes/No buttons for accessibility reason) will be added to user to obtain more information before making a decision
• Summary section. Highlight key areas users typically look for when reviewing Linkedin Profile

Design & Testing

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.

• Through testing, we learned that users tend to skim over plain text and sentences, hence we tried to be creative with typography and styling when designing each component. The 'pill' component was created to make keywords stand out
• Originally had a collapse/expand feature, because we wondered if the summary section was enough for users to make a decision. 2 weeks after the redesign was pushed to production, results show that the majority of users are clicking on expand. Hence the feature was removed, and candidate card remains at full length
• Accept, skip and pass buttons will slide up/down based on whether the user is scrolling or not, giving candidate more visibility

Prototype Sample

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