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, research and FE development
- Platform: Web
- Tools: Figma
- Timeline: approx. 2 months
- Collaboration: Engineer, Account Managers, Product Manager, Users
Background
The TopFunnel web portal allows users (hiring managers, HR managers and recruiters) to view usage. Product Manager approached me to design a feature to share useful data for users.
The dashboard was the only feature currently used to display usage data. It was put together by a former founder, with one single bar (stacking) graph consist of reach out counts and response rates.
Understand the problem
With help from Account Managers, I was able to interview users on their experience interacting with the dashboard and also to learn more about how sourcing performance is measured. Two main user personas was considered. After observing usability test and interviews, we discovered the following:
- Users uses other tools to determine performance based on count (ATS/spreadsheet). Reach out counts, time to fill and offer acceptance are one of the most common indicators of performance.
- Stack bar graph is hard to read, as count/rates requires hovering to see. The larger the team, the more difficult to view results.
- Recruiters review team member's data to benchmark performance and draw ideas for reach out templates. A user called it "Friendly competition"
- Count does not determine performance of team members. Some roles requires more sourcing hence number of candidates contacted alone cannot determine the performance of a recruiter. User stated count only shows if they are meeting their goals, though important, 'closing a job' is a better indicator.
HR Managers and Recruiting Managers were asked how they assess team member's performance. We were shown ATS UIs and spreadsheets for tracking KPIs. One user mentioned, she wonders how her team's results are comparable to similar companies.
There were many points identified, after reviewing the results with the Product Manager, we decided that users need benchmarking data to refine their sourcing strategy.
Two different ATS was tested to determine their offerings.
User persona
User personas accounted for was HR Manager and recruiters. Empathy interviews/maps was created to assess their needs.Defining MVP
The problem was discussed at a product stand-up, and team members contributed their ideas. In the end, we’ve identified and shortlisted the following features:
- Team member customization. Recruiting teams often have teams or recruiters who support different functions, hence it is unfair to compare usage for a tech recruiter with a recruiter supporting marketing. Customization will allow users select which team members to conduct a comparison with.
- Leaderboard (gamification) by recoginizing sourcing performance. This feature will recognize the recruiter with the most reachout count and highest response rates. Ultimately, allowing users to narrow down which team member and template is bringing in the most results.
- Benchmark Data. Provide data ATS does not currently provide. Show reachout count, response rate and positive response rate of similar companies (requires aid from Account Managers and changes their onboarding process)
- Make count/rate data more visibile. Include a chart to create more visibility, and option to switch to graph view.
Design & Testing

Figma mock was shown to users to generate feedback. Prototype (coded) was also created for user testing. Approximately 4 users participated.
Results


- TF Benchmark was added to the first iteration to assess usefulness.
- There was plans to change 'reach outs' to a bar graph. For response rates, line graph are better for tracking changes over time. Since reach outs performance are related to frequency, the bar graph might be a better choice.
- There was discussion among team members to make this feature the main dashboard, PM and design pushed back as this feature shows comparsions and progress (instead of a snapshot).
- Designs for empty states was also incorporated.
- Assisted in developing the front end code.