Case Study

CMS iQIES Design System

Background

The Internet Quality Improvement and Evaluation System (iQIES) for the Centers for Medicare and Medicaid Services (CMS) is a cloud-based Web application used by State Agency and Regional Office staff members to manage provider and patient information and offer reporting capabilities. It is a mission-critical reporting application for the Federal Government to ensure quality and timely care for patients across the U.S.

I led research and design across the extensive SAFe Agile program and spearheaded the design system, creating efficiency and boosting the program's productivity.

“Designers needed a way to keep process, interaction, and visual elements consistent and cohesive from one section of the application to the next.”

The Challenge

From the start, the iQies program was mired in difficulties, including key personnel turnover and a lack of consistency in design and development. Designers needed a way to keep process, interaction, and visual elements consistent and cohesive from one application section to the next. Likewise, developers were each engineering code, components, and page elements different from one developer to the next. This created additional code reviews, kickbacks, and consternation amongst the engineers. Clearly, we needed to quickly rein in the disparities and align the teams on a way forward.

The Approach

The steps we took were three-pronged:

  • Initiating a new design kit in Sketch.
  • Dedicating UI developers to the effort.
  • Creating an agile cadence to keep teams aligned and continuously delivering.
“I placed our most experienced senior designer in charge of the design kit, as I knew she would ensure the kit's atomic structure was both accurate and beautiful.”

Design Kit

I placed our most experienced senior designer in charge of the design kit, as I knew she would ensure the kit's atomic structure was both accurate and beautiful. She and her team created a Sketch library of UI components, a pattern library, and templates so designers could quickly create prototypes and share designs with their extended team.

Design System

The Design Kit also fed the design system developers the required guidelines to ensure all new development followed the latest standards. At the same time, other engineers made incremental updates to retrofit the new standards into existing sections of the application. I was allocated two front-end developers to be dedicated to the design system. They would meet regularly with the designers and the extended front-end devs each week to keep everyone up to date on components and additions slated for the following week.

The Outcomes

The resulting effort of the design kit and design system led to consistency, cohesion, and standardized code, interactions, and visual elements across the application. It more than doubled the speed of design prototyping and led to nearly a 50% increase in development time, all while reducing kickbacks and wasted time. While imperfect in its execution, the effort gave birth to Ventera’s new VStart initiative that increased client time to value with pre-fab assets and a customizable design system template that could be easily manipulated for future client projects.

Lessons Learned

  • Developers felt the design system took away the “joy” of development, as everything felt prescriptive and prefabricated.
  • The developers I was allocated to lead the design system coding effort were the wrong talent, which led to turnover, engineering team consternation, and slower results. Choosing the right team is key to success.
  • The design system was started too late, as it was a mess of cowboy code and cowboy designs throughout the existing application efforts.