OneStudyTeam: Form Builder
How might we create a Form Builder within the StudyTeam Docs app that gives Clinicians the ability to design customized forms?
-
Context
My Role: Lead UX/UI Designer
Company: OneStudyTeam
Time: 3 months
Result: MVP version of Form Builder ready to develop ✨ (did not ship before I left)
Proposed Impact: Faster workflow for Sites, more consistent documentation, better reporting to Sponsors, shorter visits for patients
-
Problem
Currently, Clinicians do not have the capability to design necessary eSource Forms for their trials. Waiting for them to be built by OneStudyTeam Product Managers is slowing down the speed at which Clinical Trials can be completed, ultimately delaying the approval of life-saving medical treatments.
-
Solution
An intuitive, customizable Form Builder within the StudyTeam Docs app that grants all Clinicians the ability to create custom forms. A Form Builder that allows non-technical users to design with all of the necessary technical features to create eForms that meet the Protocol Requirements of each trial.
Internal Interview Insights
-
“We are nervous about all the time and number of engineers this new build is going to require.”
“Let’s start this build with a walking skeleton version that we can get into the hands of clinical trial personnel as soon as possible and then go from there.”
-
“This Form Builder needs to incorporate all of the current capabilities that we offer when we build the forms internally as well as the offerings of our top competitors.”
-
“Let’s find a middle ground and focus on building something that meets the needs of the Form Designers, test it with users, and then discuss scaling and future versions.”
Product Requirements
*Defined in partnership with Product & Engineering
Design Process
1. Design Form Runner
Structure/body of the Form Builder itself
2. Design Form Element
The default form
3. Iterate Form Element for each type
Checkboxes, Radio Buttons, Dropdown, Time-Date Field, Numeric, and Calculation
4. Combine Form Runner + Form Element
In collaboration with Product & Engineering, determine the best possible solution before turning to technical components
5. Design Properties Panel
The default form
6. Iterate Properties Panel for each Form Element Type
Checkboxes, Radio Buttons, Dropdown, Time-Date Field, Numeric, and Calculation
1. Design Form Runner
Drag & Drop vs. CTA
2. Default Form Element Iterations
3. Form Elements by Type
4. Combine Form Runner + Form Element
Option 1
✔️ Add Instructions
✔️ Required toggle
Option 2
✔️ Add Instructions
✖️ Required toggle
Option 3
✖️ Add Instructions
✔️ Required toggle
5. Design Properties Panels
6. Prototype - Put it all Together!
Solution + Impact
An MVP Form Builder that…
Allows sites to create custom forms without a middle party
Grants non-technical users technical capabilities
Proposed Impact
Increased efficiency and usability for Sites
Customizable documentation
Better reporting to Sponsors
Shorter visits for patients