NG All projects
Case Study · 07 / 08

MediCheck · Healthcare Interface System · UX Design

MediCheck
Kiosk

A concept intelligent hospital kiosk experience built around clarity, speed, and a simplified self-service flow designed for patients of all ages.

MediCheck Kiosk single-screen mockup showing the patient self-service interface
01

Overview

A 24/7 self-service station designed to simplify the hospital visit experience.

Hospitals can be overwhelming, especially for patients who are in pain or unfamiliar with the check-in process. MediCheck Kiosk is an interactive touchscreen application that serves as a 24/7 patient self-service station — enabling patients to select their visit purpose, rate pain visually, pinpoint discomfort on an interactive body map, and trigger emergency alerts for critical pain levels.

As both designer and developer, I created the multi-screen user flow, visual identity, custom backgrounds, pain scale icons, and animated UI — then built the application using HTML, CSS, and JavaScript with GSAP animations, interactive body mapping, and an emergency alert system.

Client
Concept Project
Category
Healthcare UI · Kiosk Design
Year
2026
Interaction
Touch-based kiosk navigation
Focus
Speed, clarity, accessibility
Stack
HTML · CSS · JavaScript · GSAP
02

Objectives & Challenges

Designing for speed, clarity, and accessibility in clinical environments.

Hospital kiosks operate in high-stress, time-sensitive situations where users may be anxious, unwell, or unfamiliar with digital systems. The challenge was to design an interface that minimizes confusion while enabling fast, independent navigation for essential tasks.

Primary Objectives

  • Reduce check-in time through simplified self-service flows
  • Make navigation intuitive for users of all ages and tech literacy levels
  • Improve accessibility and readability in public hospital settings
  • Present complex hospital services in a clear, structured way
  • Minimize dependency on staff for basic patient interactions

Key Challenges

  • Designing for stress-sensitive and non-technical users
  • Ensuring readability under varied hospital lighting conditions
  • Keeping flows extremely short while still covering multiple services
  • Balancing simplicity with functional depth across modules
  • Creating a consistent interaction model across all kiosk screens
MediCheck Kiosk multi-screen comparative view showing all four key interface states
Kiosk system — four key screens: welcome, menu, pain scale, and body map.
03

Process

Research, interface design, and full front-end development.

  1. 01

    Research

    Conducted research into patient hospital experiences and universal design principles, identifying pain points such as long queues, confusion, and staff dependency. Defined the four core kiosk screens: welcome, menu, pain scale, and interactive body map.

  2. 02

    Interface Development

    Developed wireframes and high-fidelity UI designs balancing accessibility with visual calm. Designed custom pain scale icons, anatomical body illustrations, and a clear typographic system using Cormorant Garamond and Clash Display Variable.

  3. 03

    Front-End Build

    Built the kiosk application using HTML, CSS, and JavaScript with GSAP animations, touchscreen-optimized interactions, an interactive body-mapping system, and an emergency alert trigger for critical pain levels.

MediCheck wireframe sketch showing kiosk screen layout planning
Wireframe — kiosk screen layout and flow planning.
MediCheck kiosk desktop viewport demonstration
Interface — kiosk viewport in context.
Pain scale icon — high pain (sad) expression for MediCheck kiosk
Pain scale — high
Pain scale icon — moderate pain (neutral) expression for MediCheck kiosk
Pain scale — moderate
Pain scale icon — serious pain expression for MediCheck kiosk
Pain scale — serious
04

Deliverables

What was designed and delivered.

01

Brand Identity & Visual System

Full visual identity for MediCheck — including custom pain scale icons, anatomical body map illustrations, calm color palette, and a typographic system using Cormorant Garamond and Clash Display Variable.

02

Four-Screen UI Design

High-fidelity UI for all four kiosk screens — welcome, menu, pain scale, and interactive body map — designed with large touch targets, high-contrast layouts, and clear visual hierarchy for stress-sensitive environments.

03

Live Interactive Kiosk

A fully functional web-based kiosk built with HTML, CSS, JavaScript, and GSAP — featuring touchscreen-optimized interactions, interactive body mapping, and an emergency alert system for critical pain levels.

Tool Stack HTML · CSS · JS GSAP Figma Photoshop Illustrator UX Design
Front anatomical body illustration used in the MediCheck interactive body map
Body map — front anatomical illustration.
Back anatomical body illustration used in the MediCheck interactive body map
Body map — back anatomical illustration.
05

Outcomes

A concept validated through real-world usability thinking.

0 Core kiosk modules — check-in, navigation, guidance
<200ms Target interaction response — fast, low-friction UI feedback
0 Accessibility-first design principles applied

MediCheck demonstrates end-to-end product thinking in a healthcare context — spanning brand identity, UX design, custom illustration, and live front-end development. The result is a calm, accessible kiosk experience with four distinct screens, custom pain scale icons, an interactive body map, and emergency alert logic, all designed to reduce friction for patients in high-stress clinical environments.

Interactive Prototype

Explore the
MediCheck kiosk.

View the interactive kiosk prototype — patient check-in flow, department navigation, and symptom guidance system designed for real hospital environments.

View Prototype