Module Component
A design system component created to improve user workflows.
The module component is a side panel that enables users to perform actions while viewing useful and relevant patient data.
A common frustration for our users was the limitation of the traditional product that prevented them from comparing different types of clinical information before taking action, such as ordering medication or writing a progress note.
I served as the lead designer for this project, outlining the specs, interactions, responsive behaviors, and rules for how modules would operate.
Role
Associate Product Designer
Responsibilities
UI, prototyping
Timeline
2021
Background
I joined Patient Keeper as an Associate UX Designer to help the team with a complete redesign of all PK products using an updated software development framework, requiring an all new design system. We used this opportunity to introduce new features that would improve our users' daily workflows.
Previously, users would have to click through several tabs or open data views that took up the entire screen to make clinical-based decisions. These methods provided a clunky and time consuming workflow, preventing healthcare providers from seamlessly moving through patient care tasks. This unnecessary burden increased user stress and raised chances of error.
The module component is a side panel that opens beside patient data and can be used to complete quick actions while accessing relevant information.
Process
I began by defining the basic structure of the module, its different states, and color options. We had default modules that cover various actions physicians can take, such as placing orders, writing notes, or adding charges.
The other type of module we defined was called an Actions Module. This module was always included and aimed to support clinical decision-making by offering suggested actions for each patient based on clinical data.
States
Module Colors
Desktop
Expanded Module
Collapsed Module
Mobile
Expanded Module
Collapsed Module
Resizing Interactions
The first interaction I addressed was resizing, since responsiveness was a key focus in our broader product redesign process. I outlined methods for expanding and collapsing the module on both desktop and mobile, and provided instructions for developers on how the component should behave when users click or drag. Next, I defined hover and focused states of the module to help guide the user's attention to an active module.
Click and Drag Targets for Desktop
A module can be expanded and collapsed by either dragging from the handle or clicking the left side
Resizing would be gradual if clicked
Anywhere along the left side, as highlighted in purple
Dragging the module would automatically would snap to the next break point
Hover
A stroke appears on hover to help indicate where the user should click or drag to resize
Focus
Clicking anywhere inside the module change it to the focused state
A mobile module can be expanded by swiping up
It can collapse by swiping down from the top bar
While being dragged the module would snap to 50% or 100% depending on where the user releases
If in the bottom half of the screen, the module will expand to 50%
If in the top half of the screen, the module will expand to 100%
Drag Snapping Points for Mobile
Our resizing interaction lets users click or drag the module, causing it to snap to the next size. I then defined these sizes, specifying details for the component at full size (100%), with one or two small cards open (75%), one or two standard cards open (50%), four standard cards open (25%), and collapsed (0%). Modules for mobile apps could only be full size, half size, or collapsed due to limited space.
Rules
Lastly, I created rules detailing how many default size modules (25%) could be opened at once based on the available space in the dashboard. I also included rules for how the expanded modules would respond once more were opened.
The Actions Module cannot be closed, only collapsed
There can be a maximum of 3 default size modules opened at once
If a 4th module is opened, the last 2 opened modules collapse
With 2 default size modules opened, there is room for 8 collapsed modules
Past this point, the user must close a module before opening another
Reflections
This project was a great example of using a redesign opportunity to also enhance user experience for our clients. We added a new component to our design system that allows users to complete tasks more efficiently throughout their workday, addressing a common pain point among our current users.
With our new module component, users can now perform common tasks such as writing notes, placing orders, and adding charges while referencing relevant patient data. This enables better clinical decision-making, thereby improving patient outcomes.
Similar Projects
