UI Health/OSF Community Eye Screening
Web Prototype & Brochure
Project Overview
Summary
This multimedia project was developed for fulfillment of my Master of Biomedical Visualization. With this project, I wanted to learn more about designing accessible resources. This project was brought to me by OSF Innovation, who in partnership with UI Health, are hosting community eye screenings for unhoused Chicagoans. Initially, the project was introduced as solely a website or app. Upon further research of the audience's needs, I decided to add on a digital and print-ready pamphlet to accompany the website.
Problem
-
UI Health and OSF Innovation are hosting an eye screening for unhoused Chicagoans. They wanted a digital educational deliverable that patients could autonomously go through.
Audience
Unhoused Chicagoans and recent asylum seekers, aged 40 years and above (Chicago Point-in-Time Count 2023).
Project Limitations
-
Unable to test and work with audience
-
Limited research-based data on audience
-
Relying on committee feedback as user testing
-
Team of one!
Process
Research-guided Solution
Main obstacles in healthcare
-
Distrust in healthcare
-
Inaccessibility of information and services
-
High reading level in medical copy
-
Competing needs
Solution
-
Design copy to have a reading level of 8th grade
-
Comprehensive list of resources in one space
-
All elements within WCAG standards
-
Digital and print deliverable to expand access
Sketches and copy development
The design stage began with several wireframe sketches. This allowed for quick ideation and experimentation with different layouts. Copy was then developed and ran through WebFX's reading level checker to ensure it was below an 8th grade reading level.
High-Fidelity Wireframes
Based on information sourced from PDB, the protein receptor and ligand were isolated through VMD. Two versions of the protein were exported; one to showcase the overall form, and the other to show the relationship to the ligand when zoomed in. From there, the 3D meshes were imported to Blender for
With the copy finished, high fidelity wireframes were then created in Figma to plan how the copy would be laid out with planned visuals.
​
A style guide and small design system was then created. All colors were ran through a contrast checker to ensure they passed minimum WCAG requirements of 4.5:1.
Product Development and Testing
With a design system and color scheme created, the last step of production was to produce the assets. Illustrations were completed in Adobe Illustrator and photographs to represent symptoms were completed in Photoshop. Once integrated, all frames and components were then prototyped through Figma. After prototyping was completed, the corresponding brochures were then designed and connected to the prototype.
Results
To evaluate the prototype's success, it went through four evaluations: a reading checker, a contrast checker, a quantitative survey based on Morville's Honeycomb theory, and a qualitative discussion with the research committee. Though the prototype passed quantitatively, the qualitative discussion found that there was much room for opportunity. All comments were tagged and categorized through Notion with the main comments pertaining to addressing the audience, the readability of the text, and general design comments.
.png)
Preview it here.
Results
This project was a great opportunity to practice designing for an underserved patient population: unhoused individuals and asylum seekers. I learned so much about accessible design as well as how to build a Figma design system and functioning prototype.
It also stressed to me the importance of being able to involve your user. Research based design only goes so far, and that reflected in my results. Though it passed quantitatively, the qualitative evaluation showed flaws that would be best found through user testing. Having direct user feedback is essential to creating a deliverable that has the intended impact.