Paylocity set out to reimagine their resources hub as a central destination where prospects and clients could easily find valuable content. The goal: deliver a frictionless experience that keeps users engaged longer and coming back for more.

The Challenge

Achieving Paylocity’s goals required a complete rethink of the user experience and information architecture. Working within their brand framework, IRON expanded the design system to ensure the new resources hub felt fresh, intuitive, and distinctly Paylocity.

From Audit to Toolkit

Our work extended beyond redesigning the Resources hub. Partnering with Paylocity’s team, we laid the foundation for a modern, scalable design system—transitioning workflows from Photoshop to Figma. We built a robust library of design tokens and a flexible component system, empowering their teams to create new sections far beyond the project’s original scope.

How to Build a Design System

Clear, repeatable steps you can use today.

Read The Guide

The Audit

What’s working and what’s not? IRON performed a full audit of Paylocity’s existing resources section—uncovering patterns and pitfalls common to this often-overlooked, yet mission-critical, part of a modern website.

Wayfinding

Resource sections present a unique navigation challenge: they’re rich in content, but not every piece is relevant to every visitor. In this environment, clear, intuitive wayfinding isn’t optional—it’s essential to keep users oriented and engaged.

Lack of Engagement

Resource sections often lack the spark that draws users in. Without thoughtful interaction design, long pages can quickly lose attention. We introduced targeted tools and enhancements to sustain interest, encourage exploration, and keep visitors on the page longer.

Reimagined Resources

Armed with insights from the audit, IRON was ready to roll out a redesigned resources section—delivering a solution that was both strategically sound and visually refined.

Improved in Every Way

Clear Wayfinding


We added page-level navigation to help users jump straight to the content that mattered most.

Primary content areas were elevated and visually coded, giving visitors a clear sense of place within the section.

A new breadcrumb utility made it easy to retrace steps and return to previously viewed content.

 

Engaging Design


We created space for featured content that captured attention and established a clear information hierarchy.

Longer pages were broken into clearly defined sections, preventing visitors from feeling lost in a wall of similar content.

At natural end points, we added relevant recommendations to encourage continued exploration.

A Figma Library

As Paylocity transitioned from Photoshop templates to a modern Figma-based design system, they tapped IRON to build the resources section in Figma using best practices like molecular design variable modes and a tokenized style system. This new library became the foundation for a future full-site redesign.

Results

The redesigned resources section boosted engagement and usability. Clear wayfinding reduced bounce rates on deep pages, while the modernized design system enabled Paylocity’s teams to work faster and maintain brand consistency. The Figma library now serves as a foundation for future site enhancements.

16

Figma components with as many as eight variants each

40%

Faster turnaround after Figma library adoption

6

Weeks from audit to completion