Patient Intake Form
A Snapshot
The challenge: Redesign an outdated, paper Patient Intake Form into a more accessible digital version that could be easily transferred to a mobile format.
What I Did: For this redesign, I focused primarily on: wireframes; interaction and visual mockups; and design specifications.
​
The Solution: A two-panel selector design that allows clients to see and edit their intake form in both a standard view and an overview. Additionally, there was an emphasis on simplicity and inclusivity in language and design choices.
​
The outcome: I created a readable, digestible, and accessible digital patient intake form that had the patient's experience at the forefront, even though I had limited insight into the target user's realistic needs. Since I do not have a background in medical documentation or records, I was left filling in the blanks for user needs on my own based exclusively on outside research conducted via competitive analysis.
​
overview
.png)
.png)
.png)
design
Adapt
research
at a glance
The Methodology: There were three phases of this project: research (original form and competitive analysis), design (web version), and adapt (mobile version).
​
The Tools: Figma was used exclusively to create all wireframes and prototypes.
The Timeline: This project took 3 weeks to complete in total.
​
The deliverables: 17 web screens and 34 mobile screens were developed.
.png)
research
Original Form
competetive analysis
.png)
The Original Design: This redesign was based off of this form that the Doctor's Office was using for patients. The information in the digital redesign needed to contain all of the information of the old form, but present it in a more digestible, approachable way. The goal was not only to keep patients engaged enough to complete the form accurately and completely, but also to make the patient feel less overwhelmed by the experience overall.
The Research was conducted in the form of a competitive analysis. Looking into existing patient forms and form designs, the main takeaways were that: the most successful designs used bold, ; and used laymen's terms in order to be less intimidating and more approachable to potential patients.
.png)
DESIGN
Style Guide
.png)
.png)
typography
color palette
components
Initial Wireframes
.png)
In the initial wireframes, the main focus was to keep the patient at the forefront of the design. The color-blind friendly color palette, easy-to-read typography, and inviting rounded edges were elements included to be sure the user less intimidated by the process.
​
The Peer feedback I received was from a handful of designers, including one of my mentors. The main criticisms of the initial design were that the two panel selector was a bit too complicated, and felt redundant at times. In spite of that, peers found the friendly language, inclusivity (gender, pronouns, etc), and ability to edit in both panels effective design choices.
final iterations
.png)
The Outcomes: By creating different options for flows within the form, patients are granted flexibility that allows them to be as accurate as possible when describing their health.
This flexibility is demonstrated by the ability to: check multiple checkboxes; fill out information in different ways (as demonstrated in mockup gif above); and edit any of the form's information at any point. Additionally, information, error, and other pop ups give the Patient necessary information that allows them to fill out their information as successfully as possible.
.png)
adapt
Initial Wireframes
From the Beginning there was a conscious choice to make sure the design as a whole would adapt seamlessly into a mobile version. The use of a hamburger menu allows the user to access the information found in the web design's side panel. The user is still able to view the information they've filled out in a compact way, while still being able to edit that information in the main form easily.
​
In the future: Having a mobile version of this form is important for both the patients and the medical office. By providing a mobile form, patients have the freedom to access and complete the form anywhere, including the doctor's office, when necessary.
conclusion
what we did well
The challenge was to transform an outdated patient form into an accessible web version. This new design needed to include the same information as the initial form and be designed in a way that allowed it to be converted into a mobile version easily.
​
the solution was to make the new web form accessible, digestible, and visually appealing through the use of a 2 panel selector, friendly language, clear typography, and simple navigation.
Taking the time at the beginning to make sure all elements of the desktop version were created taking into consideration a future mobile app made the web to mobile design translation seamless.
what we'll do better next time
in retrospect the biggest hurdles in this project were not doing meaningful user research and completing it solo. I do not have a background in medical offices or documentation, so with a lack of user insights or team expertise, I was left doing a lot of guessing when it came to user's needs and pain points. While I did an extensive amount of competitor analysis, those findings are not necessarily mutually exclusive with my clients' needs.
​
moving forward I will consider the best way to understand real-life user needs throughout the design process. Whether that be through reviews or forums, feedback from those in adjacent fields, or conducting substantial user research when the budget allows.