Efficient Data Entry for a Lifespan Learning Network
Client
Role
Timeline
Challenge
The Fontan Outcomes Network (FON) is a lifespan learning network that seeks to transform outcomes for all people affected by single ventricle heart disease. As the Senior UX Designer for the Data Donation Platform, my goal was enabling fast enrollment and quality data entry by a nurse practitioner.
Outcome
Using Brad Frost’s Atomic Design Methodology as a guide, I created a design system that enabled my team to rapid prototype, maintain visual consistency, and reuse components for front-end development. This included:
- 10 page layouts
- 50+ unique components
- Custom status indicators
I also created interactive prototypes for enrollment and data entry flows, used for testing, alignment, and communication among stakeholders.
User Research
Previously, the platform's survey tool was restricted to a single-column layout. This was successful for our patient users, who would complete surveys once, 60% of the time using a mobile phone. However, nurse practitioners and data entry specialists would be filling out multiple forms for dozens of patients.
During user research sessions, they expressed frustration with excessive vertical scrolling in the single-column design, indicating that our interface needed to evolve to better accommodate their workflow and preferences. Not only would we need to introduce multi-column input fields, but also a vertical menu for navigating form sections.
One-Time Survey Completion vs. Repeated Data Entry
Design System
Drawing from Brad Frost's Atomic Design Methodology, I created design components that enabled my team to quickly iterate on prototypes, maintain visual consistency for users, and centralize UI components for development.
Atomic Design
Sketch Library and Symbols
Templates in Action
Frost writes, "Templates focus on the page’s underlying content structure rather than the page’s final content. By defining a page’s skeleton we’re able to create a system that can account for a variety of dynamic content, all while providing needed guardrails for the types of content that populate certain design patterns."
Prototyping & Iteration
Manual and Bulk Data Entry
In our research, we learned that many centers were pursuing their own innovative solutions to registry fatigue and data entry automation. For example, leveraging an EMR smart note template or an internal registry they can easily pull discrete data elements from. For MVP, the team started with file upload for initial patient enrollment.
Patient List
Once registering patients manually or through file upload, users would see their patient table along with enrollment status indicators to determine which forms still needed action.
Patient Profile
The bulk of the work by users would be performed in the patient profile, completing six sections of an enrollment form including: Patient Information, Demographics, Diagnosis, Medical History, Surgical History, Emotional and Neurodevelopmental History
Enrollment Analytics
For our initial release, we focused on enrollment analytics to both inform users about the demographic makeup of the patients registered so far, and also to motivate users in getting more patients enrolled.
Lessons Learned
Our project navigated complex challenges with limited resources and staff changes. We gained crucial insights about barriers to leveraging patient data for care improvements, revealing significant advancement opportunities when expertise and resources are properly aligned.
Major challenges mostly surrounded the suitability of our product for these particular use cases. Balancing the need to fulfill project requirements, while also considering our current customers, users, and business goals, was an enlightening experience.
