FEPBlue & MyBlue: Accessibility, Scalability, and Cross-Platform Design Excellence

Role: Director of UX/UI (MERGE)
Client: Blue Cross Blue Shield – Federal Employee Program (FEP)
Platforms: iOS, Android, Web
Scope: Full redesign to meet WCAG 2.1 AA compliance, creation of a scalable design system, modernization of design-to-development workflows

Strategic Challenge

The FEPBlue app serves millions of federal employees managing their health benefits. While mission-critical, the app faced two major issues:

Accessibility gaps that created compliance risk and hindered usability for members with disabilities.
Process and tooling inefficiencies between design and development, leading to inconsistencies, rework, and slower release cycles.

As design lead, my challenge was to deliver a fully accessible redesign while also modernizing the way design and development teams collaborated to ensure long-term scalability and consistency.

My Role & Leadership

Set an accessibility-first vision for the redesign, positioning WCAG 2.1 AA compliance as both a compliance requirement and a brand differentiator.
Led cross-functional adoption of Storybook, creating a 1:1 relationship between our Figma design system and coded components.
Introduced atomic design methodology to both design and code libraries for improved scalability, onboarding, and collaboration.
Partnered with development to modernize coding practices and ensure accessibility was embedded at the component level.

Key Initiatives & Outcomes

1. Storybook Adoption & Alignment with Figma

Evaluated and implemented Storybook as the shared platform for component documentation and development.
Created a direct 1:1 mapping between Figma components and Storybook code to eliminate design-to-code discrepancies.
Gained developer and stakeholder buy-in through a presentation outlining best practices and tangible benefits, including reduced QA cycles and faster feature releases.

Impact:

Reduced design-to-dev QA cycles by 30%.
Decreased new feature/component release times by 25%.
Significantly fewer inconsistencies between design and code at launch.

2. Atomic Structure for Scalability

Implemented the atomic hierarchy (atoms, molecules, organisms, templates) across both design and development workflows.
Used templates to streamline the design → dev → testing pipeline, ensuring all teams worked in a consistent, modular fashion.

Impact:

Simplified onboarding for new team members.
Improved collaboration between design, dev, and QA teams.
Reduced the time needed for feature iteration and testing.

3. Modernizing Development Practices

Discovered that while the dev team claimed to be working component-based, their process wasn’t aligned to best practices.
Guided the shift to true component-based architecture across iOS, Android, and Web.
Embedded accessibility requirements directly into Storybook components, reducing bugs and improving quality.

Impact:

Fewer accessibility-related bugs flagged in QA.
Increased user trust due to consistent, accessible interactions.
More efficient regression testing process.

Business & User Outcomes

Full WCAG 2.1 AA compliance across all platforms.
Enhanced member satisfaction through improved navigation, readability, and usability.
Strengthened brand trust by delivering an inclusive experience for all members.
Established a repeatable, scalable design-to-development framework that accelerates future initiatives.

Conclusion

The FEPBlue redesign wasn’t just a visual update — it was a transformation of the entire design and development ecosystem. By embedding accessibility into both the product and the process, we delivered a better experience for millions of members while future-proofing the platform for scalable growth.