NotchHR: Reimagining the HR Experience for Modern Teams
product designweb appux auditConcept
As Product Designer, I redesigned NotchHR's landing page experience to communicate its product more clearly and create a more modern SaaS experience.
NotchHR is an HR platform designed to help businesses manage their people and everyday HR operations. The challenge wasn't that NotchHR lacked features — if anything, there were a lot of them. The challenge was deciding how to present all that capability without making the experience feel overwhelming.
NotchHR had a lot to offer, but the existing experience didn't communicate that value as clearly as it could.
As I explored the website, I noticed that many features were presented with similar visual weight. This made it harder to understand what the product really stood for, how the different capabilities fit together, and which benefits mattered most to a potential customer.
I wanted to answer three questions:
How can the value of NotchHR become clear within the first few moments?
How can a large feature set feel organized rather than overwhelming?
How can the experience feel more like a modern SaaS product while staying true to the NotchHR brand?
Information Architecture
Finding a Clearer Product Story
Rather than treating every feature as a separate item, I started thinking about NotchHR as a connected product ecosystem.
I grouped the platform into five broader areas:
Workforce Management
Centralized tools for managing employee data, org structure, and day-to-day HR operations.
Payroll & Finance
End-to-end payroll processing, compensation management, and financial reporting.
Talent & Performance
Recruitment workflows, onboarding, performance reviews, and growth tracking.
Employee Experience
Self-service portals, leave management, engagement tools, and communication channels.
HR Analytics
Dashboards and reporting to help teams make data-driven people decisions.
This gave the product a much clearer structure. Instead of asking users to work through a long list of capabilities, the experience could introduce the broader problem each area solves and then progressively reveal the features within it. The feature experience was inspired by the way modern SaaS products such as Stripe organize complex product offerings without overwhelming the user.
From Features to Outcomes
Once the product structure was clearer, I wanted the story to move beyond simply telling users what NotchHR can do.
This led to the section “Built for the way modern teams work.”The purpose was to connect the product's capabilities to outcomes that matter to businesses: working more efficiently, making better decisions, empowering employees, and scaling with confidence.
This created a more natural progression throughout the page:
“What NotchHR is → What it can do → How it helps → Why it matters.”
— Page Flow
Product Strategy
Creating a More Product-Led Experience
The original experience relied heavily on text to explain the platform. For the redesign, I wanted the product itself to become part of the storytelling.
I introduced larger interface previews, clearer product sections, stronger visual hierarchy, and more intentional whitespace. Rather than showing UI simply as decoration, the interface became a way to demonstrate what the product feels like to use.
The goal was to make the page feel less like a list of HR features and more like an experience of the product itself.
The Visual Redesign
With the information architecture and content direction established, I focused on creating a visual system that felt modern, confident, and easy to navigate.
The redesign uses stronger typography, more generous spacing, clearer section transitions, and a consistent visual language across the page.
I also introduced more deliberate visual rhythm between content-heavy sections and product-focused moments, giving the page room to breathe while maintaining momentum.
Stronger Typography
Clear hierarchy with purposeful font weights and sizes to guide the eye through the page.
Generous Spacing
More intentional whitespace between sections to create breathing room and reduce cognitive load.
Visual Rhythm
Alternating between content-heavy and product-focused sections to maintain engagement throughout.
Before & After
The original site presented features with similar visual weight, making it hard to grasp the product's core value. The redesign introduces clear hierarchy, a five-pillar structure, and product-led storytelling.
I didn't want the project to stop at a Figma concept.
After completing the design, I used Claude Code to turn the landing page into a fully responsive website and deployed it with Vercel.
Building the experience allowed me to see the design beyond static screens and refine things such as responsive layouts, spacing, transitions, interactions, and the overall visual rhythm of the page.
It also gave me an opportunity to explore how the design decisions would translate into a real product experience.
The Result
The redesign creates a more focused and product-led experience for NotchHR.
It makes the platform easier to understand, gives its extensive feature set a clearer structure, and shifts the story from simply listing capabilities to communicating the value behind them.
More importantly, the project allowed me to approach a redesign from both sides: how the product should look and how the experience should communicate.
What I Learned
A good redesign isn't about adding more.
It's about understanding what deserves attention, what can be simplified, and how every part of the experience can help the user understand the product.
For NotchHR, the biggest opportunity wasn't to show more. It was to make what was already there easier to understand.
Building something ambitious?
Whether you're launching from scratch or refining an existing product, I'd love to hear what you're working on.
