Case study from 2016: The client is a preventive healthcare company that provides comprehensive health exam and guidance to a healthier life. This project converted a 12+ page paper health history form to a digital form, which shortened the form completion time, streamlined the clinician review process, and enabled data analytics. 

Due to confidentiality agreement, I generalized the content. 

Overview:

Problems: The paper health history form is lengthy, takes a long time to fill out, does not allow clinical staff to review prior to exam, is difficult to review quickly post-exam, and cannot be used for aggregated trend analyses.
 
Solution: Convert the paper form to a digital form, shorten the form whenever possible, streamline clinician review process, provide summary of key measurements to clinical staff, and standardize answers whenever applicable. 

My Role:

• Convert the paper form to a responsive digital form, create visually engaging summary

• Interview clinical staff and reorganize content through card sort

• Research and recommend best practices

• Work with project manager to get stakeholders' buy-in

• Collaborate with product owner to document requirements as Agile stories

• Collaborate with a Vue.js developer to create production-ready prototype using HTML, CSS, Foundation framework and SVG graphics.

Background:

Target audiences: Clinical staff who view different health history forms daily, and patients who fill out one form annually.

User journey: Patient fills out the form on the patient portal, clinical staffs review it before and during the appointment. Clinician may update the form during patient's visit.
I created diagrams of user journey to facilitate team discussions:

Research:

• I researched best practices on form design and error display from sources such as Nielsen Normal Group.

• I interviewed customer support team and nurse practitioner to identify common pain points for patients and clinical staffs.

The prototype I created includes several change proposals. Examples:

1. To reduce the perceived length of the form, we grouped content into three large sections. 

2. To allow users to quickly navigate from one section to another, I added a menu, which also highlights the current section.

 3. To make users more comfortable answering questions about personal habits, we rearranged content, so the easy-to-answer questions appear before the more personal questions. 

4. To ensure tight coupling of form input and label without taking up too much vertical space, I grouped the input and label fields together. Detailed reasoning:

5. To reduce noise, we conditionally displayed questions based on users' answers.

6. To improve experience on mobile devices (20-30% of the visits), I created mockups for phone, tablet, and desktop.

7. To enhance user experience on small screens, I broke large tables and repeated information into rows, and allowed addition of multiple rows. Example of paper versus digital form:

8. To ensure data accuracy and to give user immediate feedback, we implemented client side validation. The position, display, and verbiage of the error message follow the internal error guidelines I created a couple years ago. Example of my reasoning behind error message placement:

9. To minimize user frustration, I requested auto-save feature because the form is long. 

Test and Launch:

I tested the digital form with internal team members (e.g. IT staff) to identify friction points.

The new forms was well received—It took less time to complete, captured information more accurately with built-in validation, streamlined the operational workflow, enabled data analytics, and delighted our patients.

Reflection:

• I researched and learned a lot about form design and error display best practices!

• When I don’t have immediate access to users, customer support team can be a great liaison of user pain points.

• Some usability tests can be done by internal team.