Exploring animated UI components for healthcare applications.
This experiment represents an ICD Code list item in a LIMS interface. Each item expands to display associated CPT Codes and other relevant information. Interaction includes a smooth disclosure animation triggered by clicking the ICD Code.
This component simplifies the user experience by organizing actions into distinct groups, reducing clutter caused by excessive buttons on the form. When the user clicks on a rejection action, a Rejection Reason form appears, prompting them to provide additional context.
Inspired by the Family App, this popover gives quick access to key actions: submit test requisitions, refer patients, and contact the lab. Click on the Patient Referral and Contact Us actions to interact with the in-place forms.
This component showcases interactive card links designed for the home page of a provider portal. Each card represents a primary action — Submit Order, View Orders, and Review Results.
This example displays a test results dialog inspired by the YouTube Shorts design. Users initially view a PDF of the Test Results with two floating tabs: Results and Comments. Clicking on Results slides in a panel with a detailed breakdown of the test data, while Comments opens a chat section for physicians to communicate directly with lab staff.
In this experiment, users can click on the Accession Date in the orders table to open a popover displaying all status timestamps in one view, reducing the need for multiple date columns to track order progress.
This component represents a simplified lab plate map used for managing samples in a Lab Run. The white wells indicate available slots where users can click to add a sample. Upon clicking, a popover allows searching for a sample by its ID number (e.g., ORDER-01). Once a sample is selected, the test tube moves into the designated well with a fun animation. This is a reimagined version of a component built in a Gistia project.
| 1 | 2 | 3 | 4 | |
|---|---|---|---|---|
| A | 1 | 2 | 3 | 4 |
| B | ||||
| C | ||||
| D | 13 | 14 | 15 | 16 |
This example displays key revenue cycle metrics as interactive gauges. Click on each gauge to explore a detailed breakdown of underlying values. A variant of this component was actually deployed to production in a project at Gistia.
This example visualizes charge amounts and average payment rates using interactive bar charts inspired by Power BI. Click on a bar to filter the other chart, or use Command/Ctrl + click to select multiple bars and see how both charts respond. The main bars show filtered data, while background bars represent the original values for comparison. This version is also a variant of what we built in Gistia's RevenueIQ.
Charged amount by payer groups.
Average payment rate by CPT codes.