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
Method
Competitive Analysis · User Journey Mapping · Persona Development · Service Blueprint · Design System
PROBLEM 01/10
INDUSTRY DESIGN CHALLENGE
MedConnect was designed in response to a real-world industry brief: Ekipa Design Challenge Nr. 5, commissioned by SmartHospital.NRW. A state-funded hospital digitisation initiative led by Universitätsmedizin Essen in collaboration with Fraunhofer IAIS and RWTH Aachen. The challenge: design around AI-generated discharge letters and the critical transition between inpatient and outpatient care. Four systemic problems were identified from the challenge brief and secondary research into clinical workflow literature:
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
Research 02/10
Research was conducted across three methods: competitive landscape analysis, clinical workflow process mapping, and user journey modelling across both patient and physician contexts.
Five existing solutions were mapped on two axes: patient-facing vs. physician-facing, and AI-assisted vs. PDF-template. No existing product bridges both sides of the care transition simultaneously. arztbrief-online.de was AI-capable but physician-only. Ping an Doktor was patient-facing but lacked clinical integration.
The discharge letter process was mapped across 9 steps — from hospital admission through GP follow-up. Four friction points identified: high manual documentation load, error-prone data entry without validation, comprehension gaps between clinical and patient-facing language, and continuity breaks at discharge.
A full patient journey was mapped across 8 phases — from admission through GP aftercare — including emotional states, clinical actions, and backend documentation layer across the visible/invisible service line.
DESIGN PROCESS 03/10
The project followed a Design Thinking framework (Stanford d.school). Research and process mapping formed the Empathize phase. Two personas defined the core tension in the Define phase. Three surface architectures were ideated before the multi-device split was selected as the only architecture capable of serving three physically distinct use contexts without compromising any of them.
EMPATHIZE
Competitive analysis and clinical workflow mapping. Understanding the system as it exists before proposing anything new.
DEFINE
Two personas identified a core tension: a physician who needs speed and precision under pressure, and a patient who cannot parse her own care plan.
IDEATE
Three surface architectures were considered. A single responsive layout was rejected. The split-surface architecture emerged as the only structurally honest solution.
PROTOTYPE
High-fidelity UI in Figma across all three surfaces. Interactive flows built in ProtoPie.
TEST
Reviewed by external evaluators from University of Potsdam and University of Tübingen as part of the Ekipa challenge framework.
PERSONAS 04/10
The design brief required serving two user groups with fundamentally different needs, cognitive contexts, and relationships to the same clinical information. Neither could be deprioritised.
DESIGN QUESTION 05/10
One discharge event generates two entirely different information needs. The physician needs precision, speed, and structured sign-off. The patient needs comprehension, reassurance, and a clear recovery path. MedConnect's three-surface architecture is the structural answer to that tension, not a feature, but the core design decision.
DESIGN APPROACH 06/10
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 07/10
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
AskMed is scoped as a care plan explainer: it contextualises the patient's specific treatment documentation in plain language. It does not provide medical diagnosis or general health advice.
Secure email exchange
Patients can exchange securely encrypted emails with their treating doctors
Visual foundations 08/10
Montserrat
8-point grid
5 tokens
Colour tokens validated against WCAG 2.1 AA contrast requirements.
Montserrat selected for legibility performance at 12px body text in high-ambient-light clinical environments.
The 8-point grid ensures consistent spacing across three
device pixel densities.
Blue (#4593F0) is the established global signifier for
medical digital products.
Reflection 09/10
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 10/10
Notes:
All medical values, data, and information were generated using ChatGPT 4.5. They are intended as placeholders only and make no claim to accuracy or completeness.
Grounded in clinical workflow literature
The clinical workflow decisions are grounded in nursing documentation research and hospital process literature.
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.
Selected outcome of the Ekipa × SmartHospital.NRW open innovation challenge.