Interface Design for Mobile Healthcare App
An exercise in simple UI design for an healthcare-tracking mobile app
Overview
Have you ever been frustrated by how many times you complete a medical history whenever you visit a hospital or physician’s office? What if you forget an important detail of a past medication or medical incident? Currently, North American healthcare lacks a universal electronic medical record (EMR) system; there is simply no way to easily share and track healthcare information between caregivers. “EMily” is a portable EMR application that lets patients take their healthcare records into their own hands. Never miss an important detail again, and share comprehensive medical histories with caregivers with the tap of a button. Watch the video demo above.
This project was completed as part of an exercise for a Communications Design class taught by Dr. Jodie Jenkinson and Dr. Andrew Gauthier.
Date: Spring 2018
Format: Mobile app
Skills: Visual design, User interface design.
Tools: Adobe Photoshop, Illustrator, After Effect.
Design Challenge
Create a visually pleasing and intuitive interface design for a mobile healthcare app.
Conception & Problem
I drew inspiration for this concept design from my real-world experience working in the healthcare industry (within private practices and surgery clinics). I observed that during consultations with physicians, patients often lacked terminology to describe their medical histories (such as past or current medications, which may be contraindications for a current treatment). For the patients that came prepared, they were often carrying dozens of small papers of past prescriptions, or pill bottles with drug names on them. Alternatively, patients would fail to mention certain medical conditions that they thought to be irrelevant. Additionally, I witnessed first-hand how non-user-friendly many electronic medical record (EMR) systems were. Thus, I thought it would be a great exercise to design the visual interface of a mobile EMR app that might allow patients to track and share their medical histories easily with healthcare providers.
Research & Design Strategy
I thought about what kinds of challenges patients and physicians faced within an average initial healthcare encounter, and came up with the following key problems:
-
Every time a patient sees a new caregiver, they must re-provide their entire medical histories manually (the clipboard intake form). This can be especially tedious for individuals that see many different caregivers, travel frequently, or manage long-term diseases.
-
There is currently no easy way for different hospitals, private practises, and other healthcare clinics to share patient history and information with one another.
-
Electronic medical record (EMR) systems are generally pretty opaque, and patients' medical histories are often not easily available to them.
-
EMR interfaces very rarely reflect modern UI design, are often bogged down with poor UX, and hence may be difficult/unpleasant to use.
With these problems in mind, I created the following design goals to base my interface design piece around:
-
Create an easy one-click way to share medical history (with appropriate providers/viewers).
-
To provide more agency to the patient/user in terms of keeping track of their own medical information/histories.
-
A clean, easy-to-use, and pleasant interface design that more accurately reflects modern applications. The interface theme was to be "simple & approachable", since much of general healthcare information can feel scary/inaccessible (such as complex prescription names).
Wireframing
In order to design an interface, I had to map out some key user experiences and outline the main functionalities of my app concept. I first started with paper wireframes, solicited feedback, and moved on to low-medium-fidelity wireframes for further feedback:
Final high-fidelity design:
With feedback from my peers and instructors, I settled on the final interface layout and design below.
Final Design