MedConnect
A healthcare platform connecting patients, doctors, and ward rounds designed across three surfaces,
built around one holistic system.
ROLE
Solo UX/UI Designer
Type
Mobile, Tablet, Desktop
CONTEXT
15 weeks (2025)
TOOLS
Figma, ProtoPie
PROBLEM 01/06
TIME & WORKLOAD
Reports add hours to an overloaded clinical routine
FRAGMENTED DATA
No single source of truth across systems
DELAYED DISCHARGE
Report bottlenecks slow hospital-to-home handover
CLARITY GAP
Medical jargon excludes patients from their own care
DESIGN APPROACH 02/06
Instead of one responsive interface, MedConnect was built as three distinct surfaces each around a different physical context. A doctor at a desktop, a physician at the bedside, a patient at home. All three share one data layer.
01
Desktop
Doctor's Desktop
KEY FUNCTIONS
PIN login for shared machines
Patient history at a glance
AI-powered report template
Colleague communication
02
TABLET
Ward Rounds View
KEY FUNCTIONS
Live vital signs overview
Real-time report updates
Immediate bedside entry
03
MOBILE
Patient App
KEY FUNCTIONS
Personalised treatment plan
Medication calendar
AskMed AI + e-signature
DESIGN 03/06
Bridging the gap between data and diagnosis. By providing real-time access to patient health records via tablet, MedConnect allows for immediate status checks and on-site documentation, ensuring that medical records are updated the moment a clinical decision is made.
Bridging the gap between data and diagnosis
By providing real-time access to patient health records via tablet, MedConnect allows for immediate status checks and on-site documentation, ensuring that medical records are updated the moment a clinical decision is made.
The doctor-facing surfaces prioritise information density and access speed. Every design decision was shaped by one constraint: clinical staff cannot afford friction.
PIN not password
Hospital PCs are shared; full auth cycles create dangerous friction in emergencies
All critical info above fold
Diagnosis, active medication, last visit visible without scrolling
AI report template
Reduces manual documentation from a multi-step process to a structured, auto-populated form
The patient app brings medical information into plain language. Every screen was designed around one question: what does a patient actually need to feel informed and in control of their own recovery?
Appointment overview and details
Patients can view their upcoming appointments and receive additional information
Medical document management
Patients can view medical documents such as surgical consent forms, prescriptions, or medical reports and sort them by treatment or chronological order
Medication management
Current medication can be viewed through the calendar feature, with additional information available
Individual treatment plan for optimal recovery
Patients receive a personalised treatment plan with clear recommendations. The overview displays all self-managed actions for effective recovery at a glance
AI-based health advice
The app features an AI chat function that answers questions about health status, explains medical terminology, and provides recommendations for a doctor's consultation
Secure email exchange
Patients can exchange securely encrypted emails with their treating doctors
DESIGN System 04/06
Montserrat
8-point grid
5 tokens
Montserrat was chosen for legibility at small sizes in data-dense
clinical contexts.
The 8-point grid ensures consistent spacing across three
device pixel densities.
Blue (#4593F0) is the established global signifier for
medical digital products.
Reflection 05/06
WHAT WORKED
The three-surface architecture kept information consistent without duplication. PIN login solved the shared-machine problem in a way a responsive web approach could not. The AI chat reduced the cognitive barrier for patients who would otherwise avoid engaging with medical information.
WHAT I WOULD DO DIFFERENTLY
Run usability tests with nurses during a simulated ward round before finalising the tablet layout. The tablet flow was designed top-down. Field observation would have revealed edge cases in how vitals are recorded in practice. I would also address the AI chat's expectation gap more explicitly in the UI.
resources 06/06
Notes:
All medical values, data, and information were generated using ChatGPT 3.0. They are intended as placeholders only and make no claim to accuracy or completeness.
All the following literature sources were partially or fully read by the designer to gain a deeper understanding of the workflows in a hospital:
Junk, M., Messing, A. & Grossmann, J.-P., 2015. Angewandtes Case-Management: Ein Praxisleitfaden für das Krankenhaus. 1. Aufl. Stuttgart: Kohlhammer.
Pfannstiel, M. A., Focke, A. & Mahlich, H., eds., 2017. Management von Gesundheitsregionen 3 - Gesundheitsnetzwerk zur Optimierung der Krankenversorgung durch Kooperation und Vernetzung. Wiesbaden: Springer Gabler.
Ebert, D. D. & Baumeister, H., eds., 2023. Digitale Gesundheitsinterventionen: Anwendungen in Therapie und Prävention. Berlin: Springer Verlag GmbH.
Matusiewicz, D., ed., 2023. Plattformen und Tech-Giganten: Die neuen Player im Gesundheitswesen. Berlin: Medizinische Wissenschaftliche Verlagsgesellschaft.