I was tasked with building the UI of an electronic health record in 2 days, after putting in about 11 hours of work I submitted my final designs. The workflow I had to architect out was this:
"In a typical office visit, Nurse Maria meets with the patient to discuss her medical history. Show how he would enter the data she provides. Assume that data validation is possible, and include alerts for invalid data. Once Nurse Maria is done entering the data, Physician Chan will review it and begin her examination of the patient. Provide a way for Chan to quickly review and visually assess patterns in the patient’s history before starting the physical exam."
I developed stronger UX/UI design skills and learned to work under a strict time limit.
- Improve the visual layout and style of information for an electronic medical record
- Create a human-centered design that makes it easier for doctors to manage their patient's health
- Enable health professionals to more effectively understand and use patients' health information
Before starting designing I had to get acquainted with what EHRs were, what they did, and how they affected patients. After that I read additional literature talking about the current state of EHRs along with the major problems people were facing. I attempted to conduct a competitive analysis but it became clear that many EHRs on the market were extremely outdated, and it would be detrimental to really base or improve on many of the existing systems in place.
Low Fidelity Wireframes
After conducting a bit of research on EHRs, I moved ahead to develop a series of drawings then created low fidelity wireframes from there. I kept color, typography, and final design touches out of this version because I knew a great deal of changes would be made in the coming iteration.
After creating my low-fidelity wireframes I began by creating a style tile that contained branding along with UI elements. I looked to medical related style elements on the internet and thought of how to bring those in to my style guide and make everything uniform. In my style guide is a color palette, typography, checkbox fields, text fields, buttons, and dropdown menus.
High Fidelity Wireframes
After establishing the elements of my UI and branding, I began implementing those pieces into my Low fidelity wireframe. I began shifting and changing elements to present a better UI as I was going through the design itself. This is the final result. All in all the whole process took 11 hours in total.