CASE STUDY

Medical Diagnosis App

Type
Client
Platform
Web
Status
Published

1 — Project Goal

Create a web app for qualified medical personnel to diagnose a telemedicine patient in 20 minutes or less. This covers the web application used by the healthcare professionals, not the mobile app used by the patients.

2 — Target Audience

The user for this web application is an educated, trained, and licensed nurse practitioner — the highest rank of nurse, legally sanctioned for diagnosing patients and writing limited prescriptions.

Persona card for Nancy who represents the nurse practitioners who use the web app process and diagnose patients.
Persona card for William who represents users of the mobile app to be treated and older users.

3 — Research & Key Challenges

Research inputs were provided by SMEs such as representative nurse practitioners and the CEO in direct, face-to-face communication. This web application needs to fit and work on small laptops to ensure maximum hardware compatibility. Controls are designed to be large enough for easy, non-precise clicking. Color choices are limited to reserve high-intensity colors for important status or patient-related info.

4 — Initial Design Concepts & Wireframes

The wireframes were collaboratively designed with the CIO and CEO, using their backgrounds in medicine and informatics, to guide the placement of widget regions. We iteratively arranged the regions until the executive team was satisfied.

Original digital wireframe of widget areas for the financials screen.
Original digital wireframe of the widget areas for the messages screen.

5 — Usability Testing

Usability testing data was recorded in a spreadsheet for each of the participants. The responses were transformed into affinity groups to find themes.

Incentivizing feature requests from medically-trained subject matter experts.
Constraint feature requests from medically-trained and administrative subject matter experts.

6 — Conclusion

Relief Telemed hoped the users, nurse practitioners, would be able to interact with one patient every twenty minutes. The actual rate turned out to be approximately one patient every 13 minutes.

Try the prototype →

Skills

Accessibility

Designing and coding within accepted standards to ensure equal access regardless of technology.

  • Accessible Markup
  • Proper ARIA
  • WCAG 2.2
  • Screen Readers

Design

Design means intentially creating for both the users’ task outcomes and the business goals.

  • Inclusive Design
  • Design Systems
  • Product Design
  • Visual Design

Technical

Technology is how we build products. We must consider feasibility, accessibility, and timelines.

  • Accessible Markup
  • Frontend
  • HTML, SCSS, CSS
  • Working within technical constraints

User Experience

This means learning about users and designing for their needs while respecting the business goals.

  • User Research
  • Information Architecture
  • Accessible Content
  • Public Speaking

Certifications

Practical Accessibility
Certified by Sara Soueidan
2025-01-07
DHS Trusted Tester
Certified by Department of Homeland Security
2024-10-28
Smart Interface Design Patterns
Certified by Smashing Magazine
2024-05-31
Designers Accessibility Curriculum
Certified by Deque University
2023-03-09
W3C Intro to Accessibility
Certified by W3C via edX
2021-12-22
Google UX Design
Certified by Google via Coursera
2021-11-24
Interaction Design
Certified by UC San Diego via Coursera
2018-05-27

Talks

Just in Time Usability

Isral Duke presents why accessibility is important for business. He also presents 10 things that site owners can do to quick check their site's accessibility and usability. Presented at a local ecommerce group lunch.

Accessible, Friendly Content

Isral Duke demonstrates how iOS and MacOS VoiceOver presents a simple web page. This talk promotes the use of semantic, meaningful markup to make a better user experience. Presented at Google Developer Groups.

Building Pelican Design System

Isral Duke presents version one of Pelican Design System. He talks about how it was created, and what's coming next in version two. Presented at SQL Saturday.

References

James Alt’s LinkedIn avatar. James Alt Chief Architect at Louisiana Office of Technology Services Kristina Truong’s LinkedIn avatar. Kristina Truong UX Designer at Louisiana Office of Technology Services Elle Waters’s LinkedIn avatar. Elle Waters Accessibility at Workday Guy J. Anglade’s LinkedIn avatar. Guy J. Anglade Director of Website Content at Morgan Stanley Patrick Rills’s LinkedIn avatar. Patrick Rills Engineering Manager at RevenueCat Glynnis Ritchie’s LinkedIn avatar. Glynnis Ritchie UX / UI and Product Designer at Flagrant Dr. James Davis’s LinkedIn avatar. Dr. James Davis Freelance client at Louisiana State University Matthew Magnuson’s LinkedIn avatar. Matthew Magnuson Managing Partner at DMM Motorsports Mike Cole’s LinkedIn avatar. Mike Cole Product Manager at Harman