← Back to project overview

Case Study: Digital Health Onboarding

Overview

Digital Health Onboarding is an interactive online course module developed for students entering the digital health field. The 60-minute experience guides emerging healthcare professionals through critical concepts, best practices, legal considerations, and real-world scenarios they would encounter delivering care remotely.

Role: Designer (UX/UI) + Frontend Developer.
Collaborators: Subject Matter Expert (healthcare/telehealth content).
Tech Stack: HTML/CSS/JavaScript (custom).
Duration: 3-6 months.
Status: Live and actively used in current training.

The Problem

The training relied heavily on dense text-based content - long paragraphs and traditional page layouts that felt disconnected from how healthcare professionals actually absorb and retain critical procedural information.

Emerging healthcare practitioners in digital health needed to understand:

• Specialized terminology (VPN, encryption, EHR, and more).
• Best practices (confidentiality, privacy, and professional conduct).
• Legal and regulatory requirements.
• Real-world scenarios and how to handle edge cases.

The challenge: How do you make complex, compliance-heavy content engaging and memorable for busy students in a fast-paced learning environment?

Early feedback indicated students were:

• Struggling to retain key concepts from text-heavy sections.
• Not feeling confident they could apply knowledge to real situations.
• Finding navigation through multiple topics confusing and overwhelming.
• Lacking context for why certain practices mattered.

Design Approach

Rather than simply prettifying existing content, I worked with the subject matter expert to restructure the information architecture around how healthcare practitioners actually think about their work.

Information Architecture & Navigation

The module is organized into seven progressive sections, each building on the previous:

1. Introduction - Video overview of digital health’s relevance and scope.
2. Digital Health Terms - Flip cards for domain-specific terminology
3. Best Practices - Accordion-style guidance on confidentiality, privacy, safety, consent, assessments, and documentation
4. Getting Started & Supervision - Practical setup and workflow guidance
5. Laws and Guidelines - Expandable sections for regulatory compliance
6. Special Considerations - Scenario-based cards showing real situations
7. Conclusion - Reinforcement and next steps

Why this structure works:

• Tabbed navigation lets users jump to relevant sections without scrolling through irrelevant content.
• Progressive disclosure reduces cognitive load by revealing details only when needed.
• Scenario-first design connects abstract rules to real dilemmas.

Visual Design & Interactive Patterns

Flip Cards (Digital health Terms)

Eight key terms are presented as interactive flip cards. Selecting a card reveals the definition and context. This pattern reinforces vocabulary through active engagement and supports different learning preferences.

Accordion Sections (Best Practices)

Nine best-practice topics are organized as expandable panels, each with a clear heading and icon, concise guidance, and links to related resources. This prevents wall-of-text fatigue and lets learners focus on what is immediately relevant.

Scenario Cards (Special Considerations)

Seven real-world situations are presented as image and text cards:

• Working with multiple clients - Managing individual attention and fairness.
• Adolescents or children - Consent and privacy with minors.
• Crisis assessments - Responding to emergencies over video.
• Patient impairment - Handling substance use or altered mental states.
• Disabilities or special needs - Accessibility and accommodation.
• Lack of confidentiality - Interruptions and family presence.
• Unprofessional behavior - Boundaries and professionalism standards.

Key Design Decisions & Rationale

1. Interactive Over Passive

Flip cards, expandable sections, and selectable scenario cards make learning active rather than reading-focused. Healthcare professionals are task-focused; they need to do something with the information, not just absorb it passively.

2. Visual Hierarchy Through Color & Layout

Consistent use of color, spacing, and typography creates clear information hierarchy. Students immediately understand what is important and how sections relate to each other, reducing cognitive load.

3. Accessibility (WCAG 2.1 AA Compliance)

• Keyboard navigation - All interactive elements are fully keyboard accessible.
• Semantic HTML - Proper heading hierarchy, ARIA labels, and form semantics.
• Color contrast - All text meets WCAG AA standards.
• Focus indicators - Clear, visible focus states on interactive elements.
• Video accessibility - Video transcripts provided for the introduction.

Accessibility is essential for everyone and aligns with regulatory compliance expectations.

4. Progressive Disclosure

Information is revealed in layers - students see headlines first and expand only what is relevant. This prevents cognitive overload by breaking complex topics into digestible chunks.

5. Scenario-Based Learning

Instead of abstract rules, the Special Considerations section presents situations first, then guidance. This makes the module memorable and immediately applicable.

Design Process & Collaboration

Discovery: The subject matter expert provided existing training materials, learning objectives, and compliance requirements. Through conversations, I identified where information density was creating comprehension barriers.

Wireframing & Structure: I mapped out the information architecture, proposing a tab-based structure with progressive disclosure patterns. The SME validated that this reflected best practice for how students consumed the content.

Design & Prototyping: I created mid-fidelity comps showing the interactive patterns and proposed a color system. The SME reviewed for accuracy and tone.

Development & Iteration: I built the module in custom HTML/CSS/JavaScript, focusing on semantic markup for accessibility from day one.

Feedback & Polish: SMEs, colleagues, and a student sampling tested the module, providing feedback on clarity, navigation, and relevance.

Outcomes & Impact

User Feedback

• Engagement: Students reported enjoying the interactive elements.
• Confidence: They felt more confident handling telehealth situations.
• Retention: The students retained key concepts better than with previous text-heavy materials.
• Applicability: Many students reported applying the Special Considerations guidance in real situations.

Usage Metrics

• The module became a standard part of the digital health training.
• Completion rates were higher than comparable text-based modules.
• Low dropout rates indicated sustained engagement throughout the experience.

Technical Implementation

Built with semantic HTML, custom CSS, and vanilla JavaScript, the module prioritizes:

• Performance: Optimized images, lazy loading, and minimal external dependencies.
• Maintainability: Consistent naming conventions and modular design.
• Accessibility: ARIA labels, keyboard handlers, focus management, semantic headings, and high-contrast text.
• Responsiveness: Fluid layouts and touch-friendly targets for mobile learners.

What I’d Do Differently

1. User Testing Upfront: Earlier usability testing would have validated navigation preferences sooner.
2. Analytics & Tracking: Detailed learning analytics would provide richer data on what content resonates most.
3. Personalization: A student preference option could tailor the learning path.

Key Takeaways

This project demonstrates how strategic information architecture, thoughtful interaction design, and accessibility-first development can transform compliance and training content from tedious to engaging.

• For healthcare educators: Interactive, scenario-based design makes complex learning stick.
• For designers working with subject matter experts: The best designs come from understanding how the audience thinks about and applies the material.
• For accessibility: Building inclusivity from day one produces better design for everyone.

Skills Demonstrated

• UX/UI Design: Information architecture, interaction patterns, visual hierarchy, and accessibility.
• Frontend Development: Semantic HTML, responsive CSS, and vanilla JavaScript.
• Healthcare Education Design: Learning theory and compliance-aware content design.
• Collaboration: Working effectively with subject matter experts.
• Accessibility: WCAG 2.1 AA compliance and inclusive design thinking.