Code Blue
Professor Antaki (of Carnegie Mellon University's Biomedical Engineering Department) was preparing to test a non-biased LVAD decision aid video on seniors with end-stage heart failure. Code Blue was brought to format the video into a web app.
Design Role
UI/UX Design
Visual Design
Branding and Identity
Deliverables
Wireframes
Visual Design
Logo
Project Branding Materials
Tools
Illustrator
Photoshop
Design
Starting Out
Based on research and user interviews, Code Blue realized that a Hypertext FAQ wasn't enough. A web-app prototype with these three features was needed to satisfy user needs.
One: Hypertext FAQ
Two: Search Option
Three: Easy-to-understand prognostic information
Pleased with our proposal, Prof. Antaki gave the go-ahead for us to proceed.
UI/UX Design
The main challenge was creating a format that senior citizens who were also seriously ill could easily use. This goal set up three metrics I had to make the UI meet:
One: Compatible with aging senses and motor skills on both a desktop computer and on a patient-provided Apple tablet
Two: Simple and forgiving to users; most seniors don't use smart technology because they feel embarrassed that they can't use it without significant help
Three: Keeping users calm with the presentation of sensitive, possibly depressing information
First Wireframe
2nd Wireframe
3rd Wireframe
4th Wireframe
All features are simple, prominent, and easy to understand to make the interface easy to use by seniors. All buttons and links are large to handle shaky motor control and trigger tablet vibration.
While designing the UI, I quickly realized that I needed to throw out the more modern UI conventions, such as a hamburger menu icon. Early research and play-testing confirmed that our target audience prefers the older, more familiar, and ingrained UI behaviors they learned when they were younger.
I also implemented a soothing color palate to keep a sense of calm. After much play-testing, I used shades of warm green and brown (8).
The result is a straight-to-the-point, blunt but non-stresser interface. The web-app prototype helped cut Prof. Antaki's research timeline while giving room for improvement during his testing.
Graphic Design
For Code Blue's branding, I focused on the theme of finding and connecting information. This is carried out with the idea-webs throughout the design. Since our users were heart-failure patients, I tied that in with our logo by turning the "B" into a heart with a monitor line.
