FedImpact Workshop Registration UI System
UI/UX · Design Systems · WordPress · Responsive Design
FedImpact manages more than 100 workshop registration pages for financial professionals hosting federal employee retirement workshops across the country. As the number of pages grew, so did the small inconsistencies—layout changes, spacing differences, button behavior, naming conventions, mobile issues, and pages built from older versions instead of a consistent template.
My goal was to turn what had become a page-by-page process into a clear, scalable system.
The Challenge
The individual issues weren’t necessarily major redesign problems. The bigger problem was what happened when small inconsistencies were repeated across more than 100 pages.
Pages had been created and updated over time, often by copying existing pages. That led to structural drift, inconsistent typography and spacing, different button treatments, responsive issues, outdated information, and occasional broken or incorrect links.
The experience needed to be consistent for the user, but it also needed to be easier to build, review, and maintain internally.
Auditing the Existing System
Before creating new standards, I needed to understand what was actually happening across the existing pages.
I reviewed the workshop registration page library for visual, structural, functional, and responsive inconsistencies and documented the results in a large audit tracker—affectionately known as “The Beast.”
The audit looked beyond how each page appeared on desktop. I reviewed template structure, buttons, links, location information, typography, spacing, responsive behavior, and other details that could affect either the user experience or ongoing maintenance.
I also created a page checklist to give future builds and updates the same review process instead of relying on memory or individual formatting decisions.
The tracker and checklist became the foundation of an ongoing QA workflow for the registration page system.
What the Audit Revealed
Several patterns appeared repeatedly across the page library:
Structural drift
Legacy pages were being copied and modified, sometimes resulting in the wrong layout, missing sections, reordered content, or unnecessary additions.
Typography and spacing
Heading hierarchy, paragraph styles, padding, margins, and section spacing were not always being handled consistently.
Buttons and calls to action
Button widths, colors, order, hover behavior, location formatting, and waitlist treatments varied between pages.
Responsive behavior
Some layouts wrapped differently between devices, buttons were not always optimized for mobile, and spacing could become crowded on smaller screens.
Functional issues
Registration and flyer links needed consistent validation, including correct destinations, new-tab behavior, and checks for broken links or 404 pages.
Naming and content
Workshop location names, browser titles, URLs, dates, venue information, and compliance language needed a consistent standard.
The audit made it clear that the solution wasn’t to redesign individual pages one at a time. The system itself needed rules.
Building the UI System
I created a Workshop Registration Page UI System that could serve as the source of truth for both existing pages and future builds.
Rather than treating each page as its own design, I defined the shared pieces that should stay consistent across the entire experience.
The system includes standards for:
-
Typography and heading hierarchy
-
Brand color usage
-
Button styles, hierarchy, sizing, and behavior
-
Spacing and section rhythm
-
Video behavior
-
Location and workshop naming
-
Browser titles and URL structure
-
Required page modules
-
Responsive behavior
-
Workshop status and notice treatments
-
Audit and QA procedures
All workshop pages use the same core font, spacing system, button system, and structural rhythm, while still allowing the layout to adapt to the amount of workshop content being presented.
One System, Four Templates
One layout couldn’t solve every registration scenario.
Some advisors promote a single workshop location, while others may have several locations available at the same time. Trying to force all of that information into one structure would either leave simple pages feeling oversized or make larger pages difficult to scan.
I created four approved structural templates based on the number of workshop locations:
1 Location
A focused single-workshop layout.
2 Locations
A balanced structure for presenting two workshop options.
3 Locations
A layout that allows three locations to be compared clearly while maintaining the same content hierarchy.
4+ Locations
A more scalable repeating structure that can continue vertically as locations are added.
The content and UI components stay familiar between versions, while the structure adapts to the amount of information the user needs to review.
View the live templates:
1 Location →
2 Locations →
From Design System to WordPress
This wasn’t a concept project. The system had to work inside FedImpact’s existing WordPress environment.
I translated the design standards into practical builder-level rules for responsive widths, button sizing, spacing, video behavior, and reusable page modules—removing as much visual guesswork as possible from future builds.
I also connected the design system to a repeatable QA process:
Checklist → Audit Tracker → Review
The checklist is used for new pages, page updates, workshop or venue changes, responsive changes, and final approval. The tracker provides one place to document recurring issues and maintain visibility across the page library.
The Result
The project moved FedImpact away from individual formatting decisions and toward a documented, repeatable system for building and maintaining workshop registration pages.
100+ registration pages governed by a shared standard
4 approved scalable templates
3 responsive views considered throughout the process
1 documented UI and QA system for future page creation and maintenance
The result is a more consistent experience for users—and a clearer process for the people responsible for maintaining it.
Explore the Full UI System
The final 30-page guide documents the complete system, including visual standards, templates, responsive behavior, page modules, naming conventions, QA procedures, and governance.
Flip through the full UI System: