The system problem

50+ screens. 9,000 users.
No design system.

Every screen was built from scratch.

I replaced 7 steps with 3, and built the design system that made it stick.

The Problem

Built by engineers, used by everyone

The Axxess Employee Support Application was the primary tool for sales, accounting, and customer experience teams managing 70+ US healthcare agencies. Built by engineers based on PM specifications with no designer involved, it met every content requirement, but was painful to use.

The interface presented all inputs as a single overwhelming step, actions weren't intuitive, and if you filled a form and couldn't save, you started from scratch. Task completion rates were low, and operational efficiency suffered across teams that depended on the application daily.

Overwhelming
All inputs were presented as a single step with no progressive disclosure or grouping.
Confusing
Actions were not intuitive. Users clicked around trying to figure out how to do basic tasks.
Alarming
No save states. If data couldn't be saved, users had to start from scratch.
Undiscoverable
Useful information was buried, unrecognizable, and not accessible.
Before: the original Edit Agency form with all inputs presented as a single overwhelming step, no save states
Before: The Edit Agency form. All inputs presented as a single step. No save states. If the form failed, users started from scratch.

UI Audit

Analyzing 50+ screens across 3 products

Before proposing solutions, I conducted an in-depth analysis of the existing UI, mapping problems across the Employee Support Application, AxxessCare, and Axxess Support products. The audit revealed that the same screens served different workflows across products, which meant a screen-by-screen redesign was impossible. The problems were structural.

Before state of Agency List showing uneven table information, wrong placement of action buttons, and red color usage indicating danger
Agency List: red color implying danger, misplaced action buttons, uneven table layout. Arrows show the problems surfaced in heuristic analysis.
Before state of landing page with undiscoverable navigation and cluttered layout
Landing page: undiscoverable navigation, no clear entry point to the most-used feature (Agency Center)

Key finding: I mapped 7 workflows across 3 products and discovered that 6 of 7 workflows touched the same Edit Form screen. You couldn't fix screens in isolation. The system needed a shared foundation.

Research

Four methods, one finding: the problem was structural

To validate the issues discovered in the UI audit, I conducted interviews with 5 key internal users across departments: two sales representatives, one accountant, and two customer experience specialists. I asked about daily usage patterns, workarounds for the current UI, and experiences with similar tools on other platforms.

What users told us

Sales Rep
Navigation friction
"I spend a lot of time navigating through different screens to find the information I need."
CX Specialist
Discoverability gap
"The actions are not discoverable. I often find myself clicking around trying to figure out how to do something."
Accountant
Data loss anxiety
"I had to ask my colleagues how to perform certain actions because they are not intuitive."
CX Specialist
Efficiency loss
"It's time-consuming to use. The UI is old and not in line with what I'm used to on other platforms."

Research methods

User interviews with 5 internal users. Contextual inquiry observing real user workflows. UI heuristic analysis across 50+ screens. Cross-product workflow mapping across 7 task flows and 3 products to understand shared screen dependencies.

Task flow diagram showing 7-step before flow with error loops and cross-product workflow mapping
Workflow investigation: 7-step task flow with error loops (left) and cross-product workflow mapping showing shared screen intersections (right)

Design Goals

From problems to principles

Research and the workflow audit converged on four design goals that would guide every decision from system architecture to component design.

Consistency across products

Create a shared design language that works across Employee Support, AxxessCare, and Axxess Support, so users switching between products don't have to relearn the interface.

Reduce visual clutter

Improve information hierarchy so users can scan, find, and act without cognitive overload. Surface what matters, hide what doesn't.

Discoverable actions

Group frequently used actions and make them immediately visible. No more clicking around hoping to find the right button.

Fewer steps, faster tasks

Reduce the steps required to complete core workflows. The primary flow took 7 steps. The goal was to bring it under 4.

The pitch: I proposed building a design system to the PM, who pushed back: "too much effort within our limited timeline." My argument: setting the foundation now makes every future redesign faster and helps developers maintain consistency. The PM agreed. Engineering endorsed it. Clear specs meant faster implementation with no handoff meetings needed.

The Design System

One system. Eight products. Zero backend changes.

I collaborated with the design team to create a comprehensive style guide, the first shared design resource in Axxess history. The system included 47 components, design guidelines, and UX specifications covering everything from typography to screen layouts. It was adopted across 8+ Axxess products and became a foundational tool for both design and engineering teams.

Axxess design system showing color palette and CSS properties
Design system: color palette with CSS properties, ensuring 1:1 mapping between design specs and code
47
Components designed
8+
Products adopted the system
1st
Shared design resource at Axxess
Component specification for product category tags showing detailed CSS values and interaction states
Component spec: product category tags with exact CSS values, interaction states, and accessibility notes for engineering

Cross-Product Adoption

One system across three platforms

The design system wasn't just for Employee Support. I worked with teams across AxxessCare and Axxess HomeCare to extend the same component library, color tokens, and interaction patterns. The result: users switching between products encountered a consistent visual language and interaction model, no relearning required.

AxxessCare Payroll Policy page showing the design system applied to a different product
AxxessCare: Payroll Policy page using the shared design system: consistent nav bar, typography, form patterns, and color tokens
AxxessCare payroll rate schedule table with consistent design system table components
Rate schedule: same table components, color-coded status indicators, and action patterns as Employee Support
AxxessCare Mileage and Travel Time settings using shared form components
Mileage settings: shared form elements, button styles, and layout grid across products
AxxessCare Edit Pay Rate dialog showing consistent dialog and form patterns
Edit Pay Rate: consistent dialog patterns, checkbox groups, and save/cancel actions
New Support Note form showing design system form components in another product context
Support Note: same form layout, field styles, and button patterns used across all three products

Scale: 47 components designed. Adopted across 8+ Axxess products. The first shared design resource in Axxess history, and the process I built to govern it kept it alive after I left.

The Redesign

Agency Center: the most-used screen, redesigned first

As lead, I managed the full-cycle UX for 9,000+ internal users. The Agency Center was the highest-traffic screen. Every workflow started here. The redesign introduced a category tab bar for quick task access, reorganized information by priority, and added colored tags for product categories with hover states for accessibility.

Before & After

Before: old Agency List with heuristic analysis annotations showing usability problems
Before: old interface with red color misuse, unrecognizable actions, and cluttered information
After: redesigned Agency Center dashboard with tab navigation, colored product tags, organized information hierarchy, and user list
After: Agency Center with category tab bar, priority-based information, colored product tags, and simplified action column

Key design decisions

Category tab bar as navigation shortcut

Rather than forcing users through a linear flow, the tab bar provides direct access to task categories. Users jump to what they need without scrolling through irrelevant sections.

Information reordering by usage frequency

Sections reorganized based on contextual inquiry data, the most-accessed information surfaces first. Pop-up windows for detailed edits keep the main view scannable.

Simplified action column

Frequently used actions placed first. A "more options" overflow hides less-used actions. Refresh and expand icons added for table management, patterns users recognized from other enterprise tools.

Feature Improvements

Deployment 2.0: design parity across the product

After the Agency Center shipped, I extended the redesign to the Landing Page, Agency List, and Agency Physicians sections. Through additional user interviews and contextual inquiry, I identified pain points specific to each section and made structural improvements to navigation, information architecture, and interaction patterns.

Redesigned landing page with dedicated Agency Center tab in the main navigation bar
Landing page: dedicated "Agency Center" tab added to main navigation, the most-used page now one click away
Redesigned Agency List with improved table, clear action buttons, and filtering
Agency List: improved action visibility, Total MRP integrated into table, "Generate" button for clear filter feedback
Redesigned Notes section with refresh and expand icons, improved page navigation
Agency Notes: refresh and export icons, page number visibility, and "show entries" feature for personalized data viewing
Redesigned Availity Service with sticky toasts and visual call-to-action cues
Availity Service: sticky toast notifications for action confirmation, color-coded call-to-action buttons
Mobile Home Health interface showing cross-platform design system consistency
Mobile: the design system extended to mobile, ensuring consistent experience across platforms

Results

The redesign shipped. The system stayed.

MetricBeforeAfter
Primary task flow7 steps with error loops3 steps with save states
Form abandonmentFrequent (no autosave)Eliminated through save states
Design system adoptionNo shared design resourceAdopted across 8+ products
Report flows standardized40+ inconsistent flows40+ flows unified under one system
Component libraryNone47 reusable components

Tested with 5 internal users from the original research cohort. Task completion with zero abandonment. The CX team lead described it as the most significant usability improvement in the product's history.

On measurement: We didn't have formal analytics infrastructure pre-redesign, that was part of the problem. The design reduced the primary flow from 7 to 3 steps, eliminated data loss from form abandonment, and the system was adopted across 8 products. Building proper measurement infrastructure from day one is something I'd prioritize next time.

Reflections

"I didn't just build a system. I built the process to keep it alive."

What I'd do differently

Start with the system, not the screens

I discovered the need for a design system through iteration. The first round was a visual reskin, the second a structural restructure, and only the third addressed the root cause. Next time, I'd invest in the system architecture before touching a single screen.

Instrument from day one

Without pre-redesign analytics, I couldn't quantify the improvement with hard numbers. The 7-to-3 step reduction and zero-abandonment rate tell the story, but having baseline metrics would have made the case even stronger, and would have guided prioritization during the project.

Document governance earlier

The design system's adoption across 8 products succeeded because I built a governance process: contribution guidelines, version control, and engineering alignment. But I built it after the system existed. Starting governance planning alongside component design would have saved rework.

My impact

Set project goals by defining core problems. Built consensus with a multi-functional team by presenting research-backed design rationale. Conducted usability testing from planning through moderation to synthesis. Created 47 components and 22 illustrations. Delivered design patterns, detailed specs, and an accessibility guide. Enhanced collaboration between design and engineering by providing a detailed guide for code retrieval and concise design annotations.

Next Case Study
Trust Architecture for Agentic AI
Designing human override flows for AI diagnostic agents