Aligning a legacy experience with a modern design system.
Role: Lead Product Designer | Tools: Adobe XD, Axure, Figma, Mural |
Team: 2 UX Designers, 3 UI Developers | Year: 2023-2025
Team: 2 UX Designers, 3 UI Developers | Year: 2023-2025
No Dedicated Resource
As is often the case, the Design System did not have a dedicated team for the customer-facing website. This meant that I had to lead the creation of the new component library in tandem with my product team's work.
The Accessibility Testers compared the prototypes created by UX to the current development environment to validate and confirm that the UI Components updated in dev match what is in the prototypes.
My Role and Approach
I was responsible for collaborating with Accessibility Testers, Product Owners, and Developers to ensure that updated components in the test environment matched UX prototypes before being released to the live site. My role involved ensuring that these updates met accessibility requirements, aligned with the MyBlue Design System, and supported scalable adoption across eService product pages.
I was responsible for collaborating with Accessibility Testers, Product Owners, and Developers to ensure that updated components in the test environment matched UX prototypes before being released to the live site. My role involved ensuring that these updates met accessibility requirements, aligned with the MyBlue Design System, and supported scalable adoption across eService product pages.
• Partnered with Accessibility Testers to build validation workflows comparing prototypes against the test environment.
• Conducted component-level reviews to confirm design system alignment and accessibility compliance.
• Collaborated closely with Product and Development teams to resolve discrepancies quickly and effectively.
• Documented findings and provided actionable recommendations, helping accelerate page-by-page development while ensuring design fidelity.
Actions
The UX Team reviewed all the eService’s 78 UI components and 30 product pages with Accessibility and Development to ensure that the components meet WCAG 2.2 guidelines.
The UX Team reviewed all the eService’s 78 UI components and 30 product pages with Accessibility and Development to ensure that the components meet WCAG 2.2 guidelines.
The UX Design Team implemented UX Methodologies and worked with UI Developers and Accessibility Team members to provide solutions to gaps in Accessibility and improve the user experience. The UX Team iterated and improved the prototypes.
The UX Team implemented our new Quality Control process with UI Developers to verify component alignment one by one and keep consistency moving forward.
Why: UX chose to work with Accessibility and the Development teams to complete the tasks to achieve the best possible outcome, based on overall quality, scalability, and flexibility. By delivering documentation and creating a guide for comparing and validating, we can save time and deliver updated pages quickly.
To support accessibility, consistency, and scalability across MyBlue, this component follows the MyBlue Design System’s standardized heading (H-tag) hierarchy. Heading levels are intentionally structured to reflect content importance and page flow, enabling efficient screen-reader navigation, improved content scanability, and WCAG-compliant semantic markup. This guidance was developed in collaboration with Accessibility partners to ensure reusable, system-wide alignment across personalized health experiences.
The Results
UI/UX met with Accessibility and Business Analysts to discuss prototypes to identify gaps and discrepancies. We collaborated and developed a process that has been implemented to ensure quicker alignment and save time.
UI/UX met with Accessibility and Business Analysts to discuss prototypes to identify gaps and discrepancies. We collaborated and developed a process that has been implemented to ensure quicker alignment and save time.
What I Learned
UX and Accessibility learned that in the process of receiving requirements from the business, Accessibility and UX need to be brought into the discussions earlier to prevent unnecessary rework and misalignment. Requirements from business should be brought to UX 2 sprints ahead of refinement so that UX can socialize recommendations with Accessibility first before providing to the product owners.
UX and Accessibility learned that in the process of receiving requirements from the business, Accessibility and UX need to be brought into the discussions earlier to prevent unnecessary rework and misalignment. Requirements from business should be brought to UX 2 sprints ahead of refinement so that UX can socialize recommendations with Accessibility first before providing to the product owners.
What to Remember
This process has given UX a better understanding of the complexity of the eService’s functionality in the codebase. And, mindful of change and iteration. By going through this process, UX has most importantly established credibility with the other cross-functional teams and the D.O. by creating a reference structure that the teams can use to make better decisions and achieve the overall objective.
This process has given UX a better understanding of the complexity of the eService’s functionality in the codebase. And, mindful of change and iteration. By going through this process, UX has most importantly established credibility with the other cross-functional teams and the D.O. by creating a reference structure that the teams can use to make better decisions and achieve the overall objective.