Overview
Hire Calling is a new startup focused on making hiring more values-driven. The platform not only highlights a company’s workplace culture, philanthropic efforts, and hiring practices, but also lets job seekers help direct donations to nonprofits that those companies support. Partner businesses decide how much they want to donate, choose a nonprofit, and then pick a specific step in their ATS-based hiring process that will trigger the donation when candidates move forward. As applicants advance through the process, donations are unlocked.
Hire Calling also features participating nonprofits and the work they do, along with the companies that support them. My role was to design the user experience and user interface for both the job seeker side of the platform and the admin side, where internal admins and designated employees at partner businesses and nonprofits can log in and manage their profiles.
Goal
Designing a mission-driven hiring platform, from a rough prototype to a launched MVP, where job seekers can evaluate companies on values and help generate real donations to nonprofits throughout the hiring process.
Role
-
End-to-end Designer
Duration
-
2 Months
Programs Used
-
Figma
-
Adobe Creative Suite
-
Microsoft Teams
-
Slack
-
Jira
Research & Information Architecture
The company founder had already built a rough prototype in Lovable to establish the core data points and feature direction. My job wasn't to start from scratch. It was to take what existed, shape it into a focused MVP, and design a system that could scale.
One of my first moves was to learn all the data points required and then determine what needed to be included to set Hire Calling apart from competitors while maintaining common practices. To do this, I focused on competitive analysis and trimming the features required for the initial launch to reduce scope.
COMPETITIVE ANALYSIS
Understanding the competitive landscape
Before touching any UI, I did a competitive analysis of existing platforms to understand how they organized their data and structured their navigation.
RepVue
Quantitative workplace data, crowdsourced ratings
-
Strong model for surfacing trust signals without relying on company-written copy
Flexa
Flexibility-first employer profiles
-
A good reference for leading with values and culture instead of just job listings
The dominant navigation pattern and data density benchmark
-
Useful for understanding what users already expect from a jobs-adjacent product
Some of the major areas I looked at were:
-
How they organized data points
-
How their navigation was structured
-
What information they deemed most important for business profile headers
(Figure 1. Business profile headers on competitive sites)
From this analysis, I built a simple sitemap that gave the team a shared picture of the product's structure before any screen design began. (Figure 2)
(Figure 2. Hire Calling Sitemap)
FEATURE ROADMAP
Below is a full list of what we deemed most important for the public-facing side of the site. (While I was able to finish everything from my side for all priority levels, only the must-haves and nice-to-haves, as well as the marketing materials from the surprising and delightful section, were able to be fully completed by the software engineer for MVP.)
For the admin CMS, I had to mirror what was shown on the company and nonprofit pages. I also had to create workflows for a Hire Calling admin to invite a company or nonprofit user to edit their profile, which would include an invite email and login screens.
PRIORITY LEVEL 1
1 - Must-Have
-
Home Page
-
About Page
-
Terms & Conditions/Privacy Policy Pages
-
Contact Form Page
-
Company Profile
-
Details about the company itself, its work/life culture, and their hiring process
-
Details about the company’s philanthropic outreach and partnerships
-
A way to share images and videos that highlight the company
-
-
Nonprofit Profile
-
Details about the nonprofit itself, founding information, and ways to contact
-
Details about the nonprofit’s philanthropic focuses and partnerships
-
Testimonials
-
Events
-
-
A way to search for a company or nonprofit
2 - Nice to Have
-
Distinct company and nonprofit pages that users can search through all listings instead of needing to know the exact name of the company or nonprofit they want to search for (this was something I fought for from a UX standpoint)
3 - Surprising and Delightful
-
Blog Page
-
Partner With Us Page
-
A page that can be used to help sell Hire Calling to companies and nonprofits
-
-
Extra marketing materials that business partners could utilize
4 - Can Come Later
-
Advanced filter options for viewing all companies and nonprofits
Design Exploration
Deliverables
-
Wireframes
INITIAL DESIGNS
I created two distinct design directions and put both in front of potential business partners (the companies who'd ultimately promote their profiles on the platform). Their preference would shape which direction to develop.
Direction A — not selected
Corporate and structured
A more traditional, polished look. We decided not to move forward with this route because it felt too generic for a mission-driven startup that needed to stand apart from LinkedIn. (Figure 3)
Direction B – Chosen
Trendy and values-forward
Playful, light-hearted typography and bright rainbow-adjacent colors designed to evoke the warmth and optimism of working alongside nonprofits. Business partners responded really well to this direction in the first round of feedback. (Figure 4)
(Figure 3. Initial Wireframes - Option A)
(Figure 4. Initial Wireframes - Option B)
After making some minor tweaks to the layout, we decided to do another round of feedback. Round two revealed tension. When we brought Direction B back to businesses that had already committed to the platform, a different picture emerged. Larger enterprise partners found the bright, saturated palette too bold for their brand standards. They wouldn't feel comfortable displaying it alongside their own corporate identity. The colors that felt joyful and distinctive to some partners, felt unprofessional to others.
VISUAL IDENTITY
Finding the right color balance
The feedback wasn't "wrong". It was a genuine product constraint. Enterprise partners need to feel confident linking Hire Calling to their own brand. They want to make sure they are taken seriously. I went back to the palette, keeping the fun and optimism of the original intent but dialing the saturation down significantly.
Throughout the process, I checked every color combination against accessibility standards to ensure sufficient contrast across the UI. The final brand palette landed on teals and blues: grounded and professional, while still carrying the sense of purpose and care needed to stand out from the competitors mentioned earlier.
From there, I built out an advanced design library of components in Figma based on Material Design 3, which covered typography, color tokens, text fields, buttons, and much more, that could be used across the entire public-facing site and the admin site.
UX Challenges
ORGANIZATION OF DATA
Company profiles contain a lot: hiring practices, workplace culture, philanthropic partnerships, open roles, nonprofit affiliations, and team details. The challenge was presenting this without asking job seekers to scroll endlessly, and then mirroring that same organization in the admin CMS so that profile-building forms didn't feel like filling out a tax return.
Public View
Progressive Disclosure
Information is grouped into clear sections with the most trust-building content surfaced first. This includes the impact commitments and the donation tracker in the top header. Information is organized into different tabs so everything is available, but doesn't compete for attention on first load.
Admin View
Mirrored, Not Identical
The admin form structure follows the same logical groupings as the public profile, so admins and business employees always understand what they're editing and how it will appear. Long forms are broken into expandable sections to reduce cognitive load, so no single screen tries to collect everything at once.
Implementation
WHAT SHIPPED
Public-Facing Site
Company discovery and profiles, nonprofit directory, job listings with values filters, and the donation selection flow. (Figure 5)
Deliverables
-
Final Wireframes
-
Public-facing site
-
-
Design Library
(Figure 5. Final Wireframes for public-facing site - click to enlarge)
Admin CMS
Internal tooling for onboarding companies and nonprofits, managing profile content, and setting donation configurations. (Figure 6)
(Figure 6. Final Wireframes for admin CMS - click to enlarge)
Design Library
M3-based component library in Figma, which covers typography, color tokens, text fields, buttons, and more UI components.
Marketing Materials
Materials for partner companies to use externally: an editable donation certificate for applicants, a profile badge for career pages, and a single-color social icon. (Figures 7–8)
(Figure 7. Editable certificate of donation that can be emailed to job applicants)
(Figure 8. Hire Calling badge and single-color social icon)
Reflection & Next Steps
WHAT THIS PROJECT TAUGHT ME
Stakeholder feedback changes shape between rounds
-
The color shift between round one and round two wasn't a failure of the design. It was the right process working correctly. Different audiences revealed different constraints, and catching that before launch saved a real problem down the road.
Scope discipline unlocks launch
-
Trimming the feature roadmap early wasn't a compromise. It was a strategic call that made a 2-month MVP possible. Every feature deferred was a conscious trade.
The admin experience is part of the product
-
Designing the admin forms with the same care as the public UI meant the people responsible for data quality had a better experience, which directly improved what job seekers saw on the other side.
Brand assets extend the product's reach
-
The marketing kit (certificate, badge, and social icon) wasn't an afterthought. These materials let partner businesses carry Hire Calling into their own channels, making design a growth lever, not just a UX function.
WHAT COMES NEXT
My full-time status with the project came to an end after completing everything done for the MVP launch. However, the founder of Hire Calling has asked me to come back to help with updates and features that were beyond MVP. This includes:
-
An updated Partner With Us page
-
The initial page was put on hold until post-MVP, as the founder wanted to rethink the information provided on that page. The main navigation for it links to the Contact page for now. That page will need to be updated and relinked to so that it no longer goes to the Contact page.
-
-
Sort & Filter options for the Explore Companies and Explore Nonprofits pages
-
A way to allow businesses to fully take control of their donation setup on the admin side without jumping through manual hoops that currently need to be completed by the internal Hire Calling admin.
-
More user-testing, as well as user analytics, to understand what’s working and what needs adjusting.
