Patrick Kuhl

Case Study: Registry Individual PWA

Good intention leading to spaghetti code

Registry Individual PWA

  • Industry: Early Childcare
  • Size: 1000+
  • Website: Numerous Clients
The "PWA Redesign" project was a full-scale modernization of a multi-state licensing and professional portfolio application originally built for the State of Wisconsin in 2007. The goal was to overhaul both the user interface and technology stack to improve usability, accessibility, and performance—especially for mobile users—while maintaining feature parity with a highly customized legacy system.

Project Requirements

  • Create a progressive web app (PWA) tailored to end users (teachers, daycare providers, education professionals).
  • Separate admin and end-user workflows to reduce UI complexity.
  • Ensure WCAG 2.0 accessibility compliance.
  • Maintain and restructure legacy features and state-specific customizations.
  • Upgrade all technologies from ASP.NET WebForms, Knockout, and Angular 7 to Angular 15 with a modern CSS flex-based layout.
  • Provide offline capabilities, app-like functionality, and native mobile responsiveness.
  • Streamline core workflows like membership applications and data entry (education, employment, training, etc.).

Project Overview

Originally designed with a one-size-fits-all interface for administrators and front-line users, the application became increasingly difficult to manage as more states adopted it and custom requirements piled up. Over time, logic based on login type grew into a tangled mess of conditional displays and client-specific overrides—leading to inefficiency, bugs, and a poor user experience.

In 2022, the decision was made to rebuild the application into a responsive, mobile-first experience. This included defining separate experiences for different user roles, modernizing the front end, and refactoring the application into a true PWA that met modern user expectations.

Original Design
v6 User Profile
v6 Add Education
v6 employment
v6 Add employment

The Challenge

How do you modernize a 15-year-old legacy platform with extensive state-by-state customizations—without breaking existing workflows or overwhelming users who are used to a cluttered, but familiar system? How do you upgrade aging technology while improving accessibility, performance, and usability for a primarily mobile user base?

The Approach & Solution

The redesign began by identifying and mapping distinct workflows for admins and end-users. Instead of toggling visibility within a shared interface, two separate experiences were built—each optimized for that user type's tasks. Admins focused on high-level account and membership processing, while end-users needed quick access to specific personal data.

Major UI/UX strategies included:

  • Data Grouping and Progressive Disclosure: Simplified data entry for education and employment by grouping selections and reducing visual noise. This drastically reduced scrolling and helped users create accurate records more easily.
  • Modular Application Flow: Converted the rigid, linear membership process into a flexible, save-and-resume model where users could complete steps in any order and return without losing progress.
  • Responsive Mobile Design: The entire UI was redesigned with flexbox CSS to ensure mobile-friendliness and meet accessibility standards.
  • App-like Functionality: Users could now install the PWA on their devices, receive push notifications, and display QR-coded membership cards for in-person check-ins—without relying on email or printouts.
  • Visualization & Reporting: Admin dashboards used Chart.js for dynamic, interactive data views to track training progress and compliance.

The Results

The impact was immediate. A majority of users—accessing the platform from mobile devices—benefited from dramatically improved navigation and performance. They could easily access professional records, display QR codes for in-person training, check membership status, and update records on the go.

Administrators, on the other hand, gained faster access to user details and more intuitive reporting tools without being bogged down by end-user-focused features.

The modern tech stack and flexible workflows also made onboarding new states and adding future enhancements much easier—positioning the application for continued growth.

Client Testimonial

The layout is user friendly and easy to navigate. It's a one-stop-shop for injury reporting, form 300 and SDS management!
image
Audra Kimbel
Human Resource Manager, Poly Flex Products, Inc.

Looking to hire a skilled UI / UX Designer?