Skip to main content
Monster Government Solutions

Modernizing a mature enterprise platform.

Monster Government Solutions supported complex casework across Customer, Employer, Staff, and Event profiles. I worked on modernizing a mature enterprise product that had grown and changed over many years.

Enterprise PlatformsInformation ArchitectureDesign SystemsPlatform Modernization
RoleUX Manager
DomainPublic Sector / GovTech

Years of growth had made the product harder to change.

Over time, the Customer experience had accumulated different structures, different interaction patterns, information-dense workflows, and legacy dependencies. Improving one part of the product often meant working around decisions made somewhere else.

  • Inconsistent Patterns: Different parts of the product had been built independently, each solving similar problems in its own way.
  • Information Density: Complex casework required navigating and interpreting large amounts of information without losing context.
  • Legacy Dependencies: Long-standing workflows and integrations made changes risky to introduce.

See the system in action.

The examples below highlight modernization patterns I introduced across the platform, including updated navigation, data-dense workflows, and more consistent interaction patterns.

This interactive recreation was built in React using shadcn/ui and AG Grid, with Figma, Claude, and Gemini in the design and development workflow.

Navigation & Hierarchy

Clear levels of navigation keep global tools, record context, and deeper workflows distinct.
Monster Works
A navigation system built for complexity
The new navigation separated global, nested, and page-level navigation so the platform could support deeper workflows without overwhelming the sidebar.
Navigation patterns
Collapsible Navigation
Collapsed to create more workspace.
Nested Navigation
Grouped destinations to shorten the sidebar.
Tabbed Navigation
Organized related views within nested pages.
Sticky Nav
Kept primary navigation visible while users moved through the page.
Things to try
Collapse the navigation — not yet complete
Click the hamburger menu to collapse the sidebar.
Explore the icon menu — not yet complete
With the navigation collapsed, hover over an icon to explore its navigation flyout.
Explore nested navigation — not yet complete
Open Menu 1, then expand Submenu 1 to reveal another level of navigation.
Explore tabbed navigation — not yet complete
Open “Page with Tabs,” then switch between its tabs.
Documenting nuance interactions for engineers

Some interaction details were difficult to discover through prototypes alone. I documented the underlying behavior so engineers had clear understandings for building each interaction.

Opening a menu

Hovering or clicking a menu icon opens its flyout. Clicking an already-open menu icon does not close it.

Keeping the menu open

The flyout stays open while the pointer is anywhere over the menu icon or its flyout. Moving between the two does not dismiss it.

Closing a menu

The flyout closes when the pointer leaves both the icon and flyout, or when the user selects a destination.

Distinguishing menus from direct destinations

Menu icons include a small chevron to indicate another navigation level. Direct-page icons have no chevron and navigate immediately; on hover or focus, they show only the destination label.

Nested navigation

Items containing another level display a chevron. Opening a nested flyout preserves the parent flyout so users can move through the hierarchy without losing their navigation path.

Each improvement made the next one easier.

As useful patterns became reusable, the team didn’t have to solve the same interaction problems from scratch on every screen. New work could build on decisions that had already been designed, reviewed, tested, and refined. Because this was a mature product, that consistency was introduced incrementally: piloted in lower-risk areas, validated with experienced users, and governed through design review as later work continued.