Design system & Component library

quality user experience through consistency

Evolving our component library for ease and innovation

Many moons ago, when design component libraries were just beginning to become a critical part of any product design and development process, the Practice Fusion EHR got a warp-speed upgrade. In 2015, we moved the entire application off of an outdated technology platform and on to HTLM5 in an effort to modernize our product, innovate faster, and focus on a user-centered design approach to building the product.

In that fast and furious process, we were implementing faster than we could plan. Timelines and resources demanded that the team forge ahead without the creation of a component library. We relied on developers to do their best to code screens in the new platform based on the designs our team had provided. On the heels of the mad dash to HTML5, a few dedicated front end engineers decided to build Tyrion — a homegrown component library we so desperately needed named after the one and only, Tyrion Lannister, the small but mighty Game of Thrones character.

Since the library was being created at the same time that screens were being designed, the end result in the final product was a hodge podge of UI elements: some were connected to the Tyrion library, but many were custom-coded. We had to live with the inconsistency for a while, but it wasn’t long before we had to face the problem we’d created.

Moving mountains to achieve consistency

By 2017, our design system needed a serious upgrade. The original system contained far too many type styles and colors, no defined spacing system, and it lacked a rigor around consistency and accessibility. We had invested time in updating the style guide, but it was very unclear how we would possibly be able to update the Tyrion library and ensure that the new styles could be implemented in the EHR. As we considered a path forward to improve the design system of our EHR, we were faced with a significant problem:

How can we most efficiently and safely update components in EHR when so much of the application isn’t connected to the component library?

Our process

As the Director of Design, my role was to work closely with our lead product designer who owned the style guide and the lead UI developer who was responsible for planning the implementation of both phases. Together, we mapped out a plan for how we would accomplish these phases of work, and we engaged everyone on the design and UI development teams to accomplish this monumental task.

This effort truly did feel like we had to move mountains to get where we needed to go. We approached the work in two (very long) phases: 1) update the Tyrion components to our latest design system style guide; and 2) review and update every screen in the EHR to ensure all elements are pulled from the component library.

Phase 1: Update Tyrion to the new design system

We methodically worked through each and every style guide element, deprecating old styles and building new ones in Tyrion. In order to preserve the current state of the EHR, we had to maintain two versions of each component — the old one couldn’t be deprecated until we’d completed both phases of work and thoroughly tested to ensure that the old components we’re being used anywhere in the product. Without a dedicated platform design and UI team, this process proceeded relatively slowly; we had to fit in the work whenever the developers had extra cycles. This required close coordination between our design team and the UI developer team. Though slow and challenging, this process helped us analyze our patterns and ensure better documentation of each component’s behavior and guidelines for use. By the end of 2018, we completed this phase of work with a brand new design system fully built out in Tyrion v2.

Phase 2: Update the EHR with all new Tyrion v2 styles

This phase was the most daunting long-term project any of us had taken on. To ensure that we could transition every single part of the EHR to the new Tyrion library, we couldn’t just replace the old components with the new ones and roll them out across the EHR. This would risk introducing bugs, breaking workflows, and disrupting our customer’s use of the EHR which is critical to their ability to deliver patient care. We had to take a safer and more methodical approach.

We decided to tackle each feature area and individual screen in the EHR one at a time. I repeat: One. At. A. Time. That’s hundreds of unique individual pages, modals, and dialogs not to mention thousands of instances of components in our system. Needless to say, this project took a while.

Every designer and UI developer was part of this work. The lead UI developer and I met regularly to plan out each sprint, prioritize screens that required designs, and identify areas where we could just let the UI developer make updates without the guidance of design. Each time a screen was ready, a designer would check the quality of the implementation and provide design review notes back to the UI developer. We discovered early on that so many of the workflows we were tackling hadn’t been touched in many years. As a result, there were obvious areas that needed attention like copy updates, and tweak to the UX to improve user experience.

It became clear very quickly that we couldn’t address those improvements while in the midst of this project. First, we didn’t want to make any changes without having a full picture of why a given workflow was designed a certain way. Health IT products are governed by a strict set of regulatory requirements, and any change we might make could risk deviating from those requirements. Second, if we wanted to actually finish the project in this century, we had to focus on the key objective: update the screens to the new Tyrion v2 components so that every element in the EHR is connected to the library.

After nearly two years of many trials and tribulations, we finally completed the work. Close to the end of 2020, we had fully redesigned the entire EHR and ensured that every element on every screen is connected to the Tyrion v2 library.