CASE STUDY
Designing a User-customizable Product Experience for a Healthcare Payment and Revenue Integrity Platform
A product design project by Keenan Sultanik to refine and redesign the user interface and product design patterns for Advent Health Partners’ CAVO Platform
Summary
Scope
Platform UX / UI
Complete redesign of product platform and every product
Role
UX Designer
• UX strategy
• Interaction design
• Visual design
Tooling
Figma
Whimsical
Google Docs
Timeframe
4 months
%
Users reporting a significant improvement in time to complete, the KPI for this product's performance, based on research performed 30 days after rollout
Read the white paper
Published by Advent Health Partners and available on their website, the white paper that was released after the launch of the new product experience outlines the benefits it represents to the medical professionals who rely on it.
Understand
Empathize
Problem statements. The core user problems were written into a series of problem statements to make goal setting easier and better aligned with the needs of the user groups. Each core feature to the resulting project aligned with one or more of these problem statements to ensure we built the right things.
Personas. Several user groups stood to gain the most from a more flexible user interface, such as itemized bill reviewers, which could utilize the more flexible interface to increase the size of the IB and minimize other less important aspects of the platform. These groups were identified and defined to ensure that the resulting solution would be inline with their needs.
User interviews. To gain insights from existing users, I conducted interviews to assess pain points related to the limitations of the interface and the opportunities for a more modular approach to the platform’s UI. These insights were collected and shared with the front-end team, including developers.
Define
Goals and stated objectives. The problem statements were rewritten into goals and scoped into a document that was then pitched to product leadership. We then wrote stated objectives to define the scope of the project and exactly how to meet the needs of the various user groups outlined in the previous step. The front-end development team was brought in to coordinate engineering efforts. This scope document containing the problem statements, goals, and objectives was referenced throughout the project to ensure alignment and minimize scope creep and directly informed the testing phase to verify that we achieved the stated objectives.
Roadmap planning with product and development. I met with the development and product teams to determine when in the overall product roadmap to begin scheduling dev. time and define what the various milestones should be along the way. These were then written into stories, set up as an epic in Jira, and shared across all teams.
Explore
Ideation
Once we got the green light with our discovery phase, idea generation began at all levels. One thing was clear—we needed a way to expand our current capability for product offerings in the UI and provide an efficient and simple experience in accessing each product.
The interaction design I designed placed some guiding parameters on the evolution and direction of the new interface, such as the maximum number of clicks required to complete certain tasks. With a user base comprised entirely of trained professional users, user efficiency and accuracy are two of the most important metrics.
Early concepts for the workspace view explored a dashboard approach, menus to access the various modules that could be added to the workspace, various types of visual boundaries between modules, and various systems for adding and (re)arranging the modules.
Some users are dedicated to only a single function while others move fluidly among various tasks during their sessions. The second case prompted me to develop the Layouts feature, where users could arrange and save the layout and placement of the modules and be able to recall them as needed.
This is an early concept for a possible arrangement of the platform UI into an application bar, a module tray, and module cards which would house each product on the platform. This concept would eventually be chosen and would inform the design of the components of the new interface, establishing the patterns of the module tray and module card hierarchy.
In this figure, you can see one of the artifacts from the brainstorming of the information architecture, which in this case represents the cascading access control for saved layouts, a feature that allows users and organizations to save and publish customizations to the interface, along with accessing standard built-in layouts.
Prototype
A series of wireframes were created to show the interactions for the module arrangement and ordering feature, saving/applying layouts, moving between the dashboard and case views, and other situations. I primarily used Whimsical for this due to its collaborative, low-fidelity nature. The wireframes and flows were shared between UX, development, and product teams to ensure everyone was working off of the latest concept.
Even before the high-fidelity design work started, I moved to Figma to begin laying a groundwork for the visual design. This groundwork included substantial additions to the organization’s design system and component library. During this phase, I communicated regularly with the frontend development team to ensure we built out corresponding components in code to support the eventual building of the new platform.
The high-fidelity visual design work was completely built using Figma. The Figma files tied into libraries I had set up that brought in Tailwind CSS classes as Figma styles, the Google Material icon set, and our own in-house design system components to ensure a smooth handoff.
Work was shared regularly with the adjacent teams and openly company-wide by posting links to Figma frames on the corresponding Jira issues. Healthcare professionals were consulted via interview on all of the major design decisions to ensure a high rate of discovery among our users at launch.
Solution
New Dashboard
One of the areas of the product experience identified as both having the most potential and also least useful was the dashboard. This was completely redesigned to accommodate user favorites, advanced search capabilities, and reports for administrator users. It featured a collapsing accordion-style series of submenu panels to make navigating the many features of the dashboard effortless. This completely redesigned product area performed well in usability testing.
New User-Customizable UI
The crown jewel of the project is the new user-configurable interface. The various products offered on the platform were presented as “apps” and represented as icons in the Module Tray on the left side of the UI. Users can then click or drag them into place as desired to configure their custom workspace layout. Once perfected, the user can save the configuration as a custom Layout, accessible from the Application Bar across the top of the interface. Modules can be dropped on other modules to form stacks, which present modules as tabs within the same card.
This shows a user customizing the interface by stacking the Notes module card on top of the IB module to create a stack. You can also see a green overlay momentarily that would have allowed the user to create a new column if the module had been dropped on that zone.
Redesigned Product Modules
While the previous interface design assumed that users would be using the product full screen, product modules under the new experience would have to be fully responsive to adapt their contents to fit their container width as the users resize the individual module cards and stacks. This meant that I needed to redesign (and our development team to refactor) our entire product line to be responsive. I took advantage of this work by updating the design of each product at the same time to align with the current design system and component library, often also updating the design system as well. This was a major effort by itself but necessary for the success of the new platform experience.
New Standard Product Layout
While we were redesigning each product in our lineup to be responsive, another aspect had to be considered if each one (which all had different interactive design patterns) were to sit next to each other and look and function similarly. I developed a hierarchical-based system for organizing the various interactive components within each product. Elements affecting the entire instance (or a user’s experience with that instance) were moved to what I was now calling the Application Bar across the top of the interface. Elements that affected a stack or module card within the modular layout system were placed in a new stack menu near the top-right corner of the stack card. Controls that affected an entire product (like exporting that product’s data) were moved into the Module Bar (the gray region at the top of every product) for greater consistency among products and to decrease target acquisition time. Controls that affected more localized changes/data within each product were arranged uniquely in the module’s content area based on function. This reorganization resulted in users “finding” existing features that were now more prominently and consistently placed in the UI and allowed users to find new features introduced with the platform redesign with ease.
Test
From the very beginning, I developed a series of research questions that were directly based on the objectives we set at the start. These questions naturally flowed into two research instruments—a quantitative survey given to users and a usability study to evaluate the areas of the interface that were changed the most. From these two instruments, I wrote a research guide that we used to close the loop by ensuring that findings fed back into the product development cycle.
Usability Test Study
A guided usability test plan was written which included a comprehensive script to ensure each participant experienced the same test conditions. Participants were recruited and selected and sessions were scheduled over the course of a week. I led each session, interacting with participants and taking the bulk of the notes on the results. I also invited the frontend development team, customer experience team, and the product team to the sessions as observers. I then collected the findings and presented them along with recommendations in the deck below.
Study Results
The usability study revealed some important findings about the new platform experience (codenamed Bento). First, several areas where we were concerned about discoverability were completely natural to the participants, which validated some of our initial assumptions on how the users would respond to the changes. Also, the study revealed a few areas where usability was more of a concern than previously thought. This allowed us to correct the issues before release.
A report presented to product leadership showing the results of the usability test study and presenting recommendations. Click to page through the deck.
Implement
Collaboration with Development
Continuous sync. One of the most significant contributors to the success of this project was including the development team early and having regular sync meetings with them throughout the process. They were able to provide valuable technical insight into the experience design, and being included early on also afforded them with greater opportunity to get the “plumbing” put into place faster.
Feasibility Review Sessions. One key method for facilitating UX / development team collaboration is a weekly Feasibility Review meeting where I presented the design work and thought processes that is currently in-flight and asked for technical feedback. Their technical insights and occasional pushback resulted in a stronger product experience and a more streamlined handoff phase.
Results
With the platform’s user base of trained, professional users, daily work efficiency is the more important KPI for the success of the experience. Based on user research performed 30 days after the new interface was released, 80% of users expressed experiencing a marked increase in their work efficiency and discoverability improved to reduce training time. The release went smoothly, prompting positive comments from our customer experience team, which handles user training. Leadership also presented me with the company’s first Innovation Award at the next company meeting for my role in the project.
Thank you for viewing my case study. This project was completed as a part of regular employment responsibilities at Advent Health Partners.
Like what you see? Let’s get in touch.