Responsive Enrolment
Common Wealth Retirement / October 2025
Goals
- Transition the enrollment process from a desktop-only experience to a fully responsive, mobile-optimized flow to ensure members can complete the process on any device without friction.
- Modernize the enrollment interface to adhere to global accessibility standards, ensuring that all members—including those using screen readers, keyboard-only navigation, or touch-based assistive technologies—can complete their enrollment independently.
The initial challenge of this project stemmed from a lack of immediate backend availability, as engineering resources were fully committed to other high-priority tracks. To avoid a complete standstill, a "frontend-first" strategy was implemented to decouple the user interface development from the API integration. This allowed the team to begin building the enrollment experience immediately, ensuring that design and usability goals were met while the backend architecture caught up in parallel. The technical foundation of this approach relied on an event-driven architecture and the use of Storybook. By treating the frontend as a collection of independent modules, the enrollment flow was broken down into individual, manageable pages. These components were built to react to specific state changes and user events rather than waiting for live server responses, allowing for a highly modular and flexible development cycle. Storybook served as the central hub for progress and validation throughout the lifecycle of the project. Each page of the enrollment flow was hosted as a standalone story, providing a functional sandbox for the Product Manager and stakeholders to review the interface in real-time. This eliminated the need for a functioning database or server environment to conduct early-stage QA, significantly tightening the feedback loop between design and implementation. Ultimately, this methodology transformed a potential bottleneck into an efficient, iterative process. By the time backend resources became available, the entire visual and navigational logic of the enrollment flow had already been vetted and refined. This resulted in a significantly faster final integration phase and a more robust mobile experience that directly addressed the high drop-off rates of the previous desktop-only system.
Outcomes
- By launching a mobile-responsive interface, the project successfully captured users who previously dropped off when opening invite links on their phones, leading to a measurable increase in completed enrollments.
- The re-engineered frontend ensures that all members, regardless of their physical abilities or choice of assistive technology, can navigate the enrollment flow with the same level of ease and independence as any other user.
- The implementation of touch-friendly navigation and responsive layouts resulted in fewer input errors and faster "time-to-complete" stats for members using smartphones and tablets.
- The modernized codebase provides a consistent, high-quality visual experience across the fragmented landscape of mobile browsers and screen resolutions, reducing the need for device-specific hotfixes.