Center Without Walls

Center Without Walls is the next-gen electronic health records & clinical admin system for DaVita. It helps the doctors and nurses working in kidney care centers to administer dialysis treatments, manage medical records, schedule patient visits, and more.

Company
DaVita
Industry
Healthcare
Involvement
2017–2018
Design team
10–15 people

For those in a hurry…

Experiences I gained:

Designing complex, mission-critical forms: rules, best practices, and pitfalls;
Honing my interaction design, visual design, and rapid prototyping skills;
Defining a design system and building a Sketch component library from scratch;
Working in-house, seeing my design choices come to fruition, and learning from mistakes;
Collaborating with product owners to gather requirements and conceptualize features;
Interfacing with the engineering team and providing continuous design support throughout implementation;
Working with remote teams (domestic & international) across multiple time zones.

Lessons I learned:

In the enterprise world, it’s not uncommon to run your business on decades-old software.
Users of professional software may accept — even prefer — higher information density and complexity in exchange for efficiency.
When feedback from users (who are domain experts) seems counter-intuitive, trust them: they have years of training and experience ahead of you.
When designing for a highly regulated industry such as healthcare, you may encounter unique constraints. For instance, to protect patients’ safety, EHR systems cannot prefill with default values; the user must enter or choose them.
Don’t use lorem ipsum as dummy text on the UI, especially if your audience can read Latin.

Breaking down the walls

Center Without Walls aims to replace several legacy software, some of which over 20 years old. These systems not only have poor usability (and aesthetics) by modern standards, but each of them is an information silo, creating artificial barriers for accessing or sharing data across them.

My work on this project was mainly in:

Form design. I designed and iterated the in-center hemodialysis treatment order, a central piece to a patient’s dialysis treatment, and laid the foundation for all other forms in the software.
User interface. I also worked on the UI for other modules in the system, including patient profile, treatment plan, facility’s shift schedule, and treatment standards.
Design system. I contributed to the definition of our design system, notably the grid system, typography, colors, and various form controls. I also created a component library in Sketch.

Designing the forms

Like most professional software, clinical applications come with inherent complexity that cannot be “designed away.” In our case, the complexity is primarily from the myriad of details required to provide medical care to the patient.

But that’s not all: because what we do affects a patient’s life, there are numerous legal and policy requirements we need to account for, such as data privacy, procedure audits, accessibility, even clinical hygiene (more on that later). All these complexities find their way into the system; we need to keep them from the user as much as possible to make our software easy to use.

Let’s look at an example: the in-center hemodialysis treatment order form.

Asking the right questions

Like all forms, the treatment order allows the system to collect data from the user: in this case, the values and settings needed to perform dialysis treatment for a patient.

Unlike forms commonly used in consumer apps, such as account creation or checkout, the treatment order contains a ton of medical information familiar only to professionals. My first challenge was to work with clinicians to understand what data we have to collect, why we need them, and how to organize them.

I used the treatment order from the legacy system as a reference, but every field was questioned before introduced to the new form.

Paper sheets for documenting treatments were also studied to understand how the data will be consumed by nurses.

I interviewed clinicians and optimized the grouping & ordering.

Fine-tuning the details

Another challenge I faced was to optimize for efficiency while ensuring accuracy and compliance. When it comes to a patient’s life, no detail is trivial: even a small error could cause significant damage. Here are some examples of how I tackled the challenge.

1

Automatic unit conversions. While humans typically talk in hours & minutes, most dialysis machines accept time values in minutes only. Clinicians often need to convert between the two manually, which is tedious and error-prone. The same applies to other types of values, such as height and weight.

2

Autocomplete in place of text fields. Some input fields expect a limited range of values, which typically requires validation and error handling. Using autocomplete removes the need for validation and simplifies data entry.

3

Merging multiple inputs where practical. Due to regulations and policy, all treatment data must not have a default value. Combining multiple input fields into one where it makes sense allows for faster data entry without breaking the rules.

“Can we make it shorter?”

After a few rounds of testing with clinicians, the feedback was overwhelmingly positive, except for one thing: the form required too much scrolling.

Skeptical about the “we don’t want to scroll” comment, the researchers and I delved deeper into the why. As it turned out, it wasn’t that the clinicians didn’t want to scroll; it’s the hygiene protocols at the clinics that made it difficult for them.

From the conversations, we learned that the clinicians had to sanitize their hands before handling the patient every time they touched the computer. If crucial information is not visible on the screen, they had to walk to the computer, scroll down, sanitize, walk back, and repeat. That’s no fun.

So I took the form back to the drawing board and made several changes:

Label placement. In the new design, I placed labels above the inputs instead of to the left. It allowed for more flexible layout options.
Grouping. I grouped related fields into sections and added a heading for each of them.
Multi-column layout. To maximize space utilization, I introduced a 2- and 3-column form layout for larger monitors.

These measures helped alleviate the scrolling problem while improving the form’s readability. The new version is 65% shorter in view mode on a 1280 px wide monitor.

Research on monitor resolutions used among clinics to determine breakpoints.

Fields grouped into sections; at 1920 px, the entire order can be viewed in full with no scrolling necessary.

Other UI & UX work

Besides form design, I also contributed to the interaction, visual, and motion design for other modules in Center Without Walls. Below are a selection of examples.

Interaction flow for documenting allergies for a patient.

Interactive prototype for the appointment calendar.

Animated prototype demonstrating form validations.

Building the design system

Parallel to working on product features, I actively participated in the creation of our design system.

Drawing from my experience designing the treatment order, I helped shape various components related, but not limited to forms, such as buttons, dropdowns, text fields, checkboxes, and radio buttons. I also helped document our collective decisions on core elements, such as color, typography, and grid.

Finally, I created a shared patterns library in Sketch and added the majority of components to it. The Sketch library helped the team design faster while keeping consistency across individual work.

Examples of components in the Sketch library.

Responsive layout introduction & reference guide.

Bonus track: photographing the team

Outside of design work, I helped take photos of new and existing team members for their profiles. Below is a collage from the B-rolls I took during the photo shoot.