// CaseStudyFootCare.jsx — Preventive Foot Care Platform case study if (!document.getElementById('fc-case-styles')) { const s = document.createElement('style'); s.id = 'fc-case-styles'; s.textContent = ` .fc-constraints-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 900px) { .fc-constraints-grid { grid-template-columns: 1fr !important; } } @keyframes fc-icon-spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fc-title-reveal-once { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } .fc-decision-title { transition: transform 0.2s ease; } .fc-decision-btn:hover .fc-decision-title { transform: translateX(4px); } .fc-decision-icon-wrap { display: inline-flex; transition: transform 0.25s ease; } .fc-decision-btn:hover .fc-decision-icon-wrap { transform: rotate(90deg); } `; document.head.appendChild(s); } const CaseStudyFootCare = ({ goTo, goToWork }) => { const sections = [ { id: 'context', label: '01 · Context', heading: 'Foot conditions are among the most manageable when caught early, and most costly when caught late.', body: [ 'For people with diabetes in particular, late detection is a leading cause of serious complications.', 'The technology to detect early warning signals exists. Pressure mapping, gait analysis, and foot geometry measurement are established clinical methods. What does not exist at scale is a digital system that makes those signals interpretable and actionable for the people who need them.', 'This project explored what that system could look like.', ], }, { id: 'problem', label: '02 · The problem', heading: 'Current approaches are built around symptoms, not patterns.', body: [ 'Current approaches are built around symptoms, not patterns. A person visits a clinic when something hurts. A clinician interprets the data. An intervention is recommended. The process is reactive, episodic, and dependent on in-person expertise at every step.', React.createElement('span', null, React.createElement('em', null, 'The gap:'), ' subtle changes in pressure or gait that precede visible symptoms by weeks or months are either never captured outside clinical settings, or captured but never translated into something a non-specialist can act on.' ), 'The design challenge was not to build a diagnostic tool. It was to make biomechanical data interpretable enough to support earlier awareness for both individuals and the professionals working with them.', ], }, { id: 'users', label: '03 · Users & Context', heading: 'Two user types, one system, a need for both to trust the output.', body: [ 'Two distinct user types. Overlapping needs, different data literacy, and a shared requirement to trust the output for different reasons.', ], users: [ { type: 'Individuals', desc: 'People managing ongoing foot health risks, often without specialist knowledge. They need a clear signal. Is this normal, or is this something to pay attention to? Not raw pressure or gait data.', }, { type: 'Professionals', desc: 'Clinicians, orthotists, and foot care specialists. They want interpretive depth and a shared reference point for conversations with patients who are not specialists.', }, ], bodyAfter: 'The design challenge: one system, two levels of data literacy, both needing to trust the same output for different reasons.', }, { id: 'constraints', label: '04 · Constraints', heading: 'Four constraints that shaped the architecture.', constraints: [ { title: 'No access to real patient data', body: 'Validation was limited to expert evaluation of design plausibility, not real longitudinal use. The work produced a tested architecture, not a clinically proven system.', }, { title: 'The boundary between monitoring and diagnosis.', body: 'A system that surfaces anomalies can easily harm by overclaiming. Defining where the system\'s responsibility ends was as important as the interface itself.', }, { title: 'Long-term engagement as a design requirement', body: 'A one-time measurement is not preventive care. Sustained use over time places demands on motivation, habit formation, and how the system communicates progress.', }, { title: 'Dual-user design within one coherent system', body: 'Building separate products for individuals and professionals was out of scope. The challenge was serving both without compromising clarity for one or depth for the other.', }, ], }, { id: 'decisions', label: '05 · Key design decisions', heading: 'Four decisions that defined the product.', }, { id: 'validation', label: '06 · Validation', heading: 'Expert usability testing with professionals across clinical foot care and biomechanics.', body: [ 'Expert usability testing with professionals across clinical foot care, orthopedic shoe technology, product development, and biomechanics-adjacent practice.', 'Three questions guided the sessions: was the workflow structure navigable, was the information hierarchy useful to professional users, and did the core interaction patterns support the kind of clinical reasoning the system was designed to facilitate.', 'Findings confirmed the structure and navigation held up for professional users. They also surfaced concrete areas for a next iteration.', ], }, { id: 'outcome', label: 'Outcome & Reflection', heading: 'A tested product architecture for a dual-user preventive monitoring system.', body: [ 'Expert evaluation confirmed that the workflow structure, core navigation, and information hierarchy were understandable and useful for professional users, the higher-literacy of the two user types the system was designed to serve.', 'Four concrete areas for a next iteration: feedback states needed more clarity, recommendation editing required greater flexibility, secure data sharing was missing, and data visualisation needed refinement for clinical interpretation. Scoped, solvable problems, not structural failures.', 'The most significant open question is the individual user engagement model. Whether a real person managing ongoing foot health risk would return to a monitoring tool consistently requires longitudinal behavioral research outside the scope of this project. The architecture is designed to support that validation. The behavioral hypothesis has not yet been tested.', ], }, ]; return (
{/* ── Hero ── */}
{/* Cover video — bottom-right, scaled to 2/3 */}
{/* Gradient overlays — for text legibility only, video stays dominant */}
{/* Back button */}
{/* Counter */}
Case study: 02 / 02
{/* Content */}
HCI Master's Thesis  ·  Healthtech  ·  Biomechanics  ·  Research-to-Product
Translating biomechanical research into a digital system for early detection and proactive monitoring.
{/* Meta bar */}
{[ { label: 'Role', value: "Product Designer (HCI Master's Thesis)" }, { label: 'Scope', value: 'Domain Research · Product Strategy · UX · Prototyping' }, { label: 'Industry', value: 'Healthcare · Biomechanics' }, { label: 'Context', value: 'University of Siegen, with clinical & academic experts' }, ].map((item, i) => (
0 ? '24px' : 0, paddingRight: i < 3 ? '24px' : 0, borderRight: i < 3 ? '1px solid rgba(255,255,255,.07)' : 'none' }}>
{item.label}
{item.value}
))}
{/* Scroll indicator */}
Scroll
{/* ── Body sections ── */}
{sections.map((section, si) => ( ))}
{/* ── Bottom CTA ── */}
That's the work

If you're working on something complex, I'd be glad to connect.

Get in touch
{/* ══ NEXT: ABOUT ═════════════════════════════════════════════ */}
); }; // ── Accordion state (module-level so it persists across re-renders) ── const accordionOpen = {}; // ── Section renderer for foot care ── const FootCareSection = ({ section, idx }) => { const [, forceUpdate] = React.useReducer(x => x + 1, 0); const sectionRef = React.useRef(null); const decisionRowRefs = React.useRef({}); const isAlt = idx % 2 === 1; const isDecisions = section.id === 'decisions'; const bg = isAlt ? '#f5f5f7' : '#ffffff'; const col = { maxWidth: 'var(--content-width)', margin: '0 auto', padding: '0 var(--page-padding)' }; // Heading+subtitle block: same scroll-reveal as the Selected Work heading React.useEffect(() => { if (typeof gsap === 'undefined' || !sectionRef.current) return; const ctx = gsap.context(() => { window.animWorkHeading(sectionRef.current); }); return () => ctx.revert(); }, []); // Decision rows — one-time scroll-into-view animation (icon spin + title reveal) React.useEffect(() => { if (!isDecisions) return; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; const rowEl = entry.target; const icon = rowEl.querySelector('.fc-decision-icon'); const title = rowEl.querySelector('.fc-decision-title'); if (icon) { icon.style.animation = 'fc-icon-spin-once 0.4s ease'; icon.addEventListener('animationend', () => { icon.style.animation = ''; }, { once: true }); } if (title) { title.style.animation = 'fc-title-reveal-once 0.3s ease'; title.addEventListener('animationend', () => { title.style.animation = ''; }, { once: true }); } observer.unobserve(rowEl); }); }, { threshold: 0.5 }); Object.values(decisionRowRefs.current).forEach((el) => { if (el) observer.observe(el); }); return () => observer.disconnect(); }, [isDecisions]); const toggleDecision = (id) => { accordionOpen[id] = !accordionOpen[id]; forceUpdate(); }; const decisions = [ { id: 'd1', n: '01', title: 'Layered detail rather than separate views', text: 'One option was two separate interfaces, one simplified for individuals, one detailed for professionals. The problem: a person and their clinician looking at different representations of the same data creates communication friction rather than reducing it.\n\nI chose a single layered system instead. The default view surfaces a clear signal accessible to anyone. A deeper layer, available on demand, exposes the full data for professional interpretation. Both users see the same event at different depths.', tradeoff: 'Trade-off: the default layer loses some interpretive nuance for expert users. The benefit: individual and professional can look at the same screen and have a meaningful conversation.', diagram: ( {/* Top box */} One data source, two user types {/* Fork lines */} {/* Option A */} Option A Separate interfaces {/* Option B — chosen */} Option B, chosen Single layered system {/* Arrow down from B */} {/* Individual + Professional */} Individual + Professional Same screen, different depth ), }, { id: 'd2', n: '02', title: 'Insight framing, not raw data display', text: 'Pressure maps and gait outputs are accurate but largely uninterpretable without training. Showing raw sensor data to a general user produces either anxiety without context, or indifference without meaning.\n\nThe system translates patterns into named insights: areas of concern, changes over time, comparisons to previous readings. The interface communicates what the data means, not what the data is.', tradeoff: 'Trade-off: expert users lose direct access to raw data in the primary flow. Acceptable, because the professional layer provides it on demand.', diagram: ( {/* Left: Raw data */} Raw data Pressure maps, gait outputs Accurate but uninterpretable without training {/* Arrow */} {/* Center: Interpretation Layer */} Interpretation Layer Patterns named, changes flagged, readings compared {/* Arrow */} {/* Right: Named insight */} Named insight What it means, what to consider Readable by anyone. Detail available on demand. {/* Bottom caption */} The interface communicates what the data means, not what the data is. ), }, { id: 'd3', n: '03', title: 'Positioning as an early warning tool, not a diagnostic one', text: 'A system that surfaces anomalies can easily harm users by overclaiming. Framing a pressure change as a warning creates anxiety that may not be warranted. Framing it as "something has changed" invites attention without clinical overreach.\n\nEvery output was structured the same way: here is what we detected, here is how it compares to your baseline, here is what you might consider doing. Clinical judgment stays with the professional, not the product.', tradeoff: 'Trade-off: the most consequential decision in the project is also the least visible in the interface. That invisibility is the point.', diagram: ( {/* Horizontal axis */} {/* Center dot — chosen */} {/* Left: Diagnostic verdict */} Diagnostic verdict Overclaims clinical significance Creates anxiety, Harms trust {/* Center: Chosen awareness tool */} Chosen: awareness tool Here is what we decided. Here is how it compares to your baseline. Here is what you might consider doing {/* Right: Too cautious */} Too cautious No actionable signal Reduces utility. No reason to return. {/* Bottom caption */} The interface communicates what the data means, not what the data is. ), }, { id: 'd4', n: '04', title: 'Designing for change over time, not a single session', text: 'A monitoring system that only reports current state has limited preventive value. Making change visible required a temporal data model: every measurement stored, compared against previous readings, communicated as a trend rather than a snapshot.\n\nI prioritized a simple directional signal (improving, stable, attention needed) over a detailed historical chart. The chart is available in the professional layer. The individual user sees a clear direction.', tradeoff: 'Trade-off: simplifying the longitudinal view means expert users see less detail by default. The individual engagement model is also the biggest untested hypothesis in the project.', diagram: ( {/* Left: Single session snapshot */} Single session snapshot {/* Dashed connector */} {/* Right: Longitudinal record */} Longitudinal record Chosen approach {/* Arrows down */} {/* Left card */} Reading No baseline. No context. Is this normal? Unknown {/* Right card */} {/* Chart */} Direction visible over time. Improving, stable, or attention needed {/* Bottom caption */} A one-time measurement is not preventive care. ), }, ]; return (
{/* ── Constrained column: label + heading + body ── */}
{section.label}

{section.heading}

{section.body && section.body.map((para, i) => (

{para}

))} {/* Two-user cards */} {section.users && (
{section.users.map(u => (
{u.type}

{u.desc}

))}
)} {/* Users diagram — rendered before bodyAfter */} {section.id === 'users' && (
{/* Top label */} Shared measurement session {/* Top box */} Foot pressure + gait data Pattern detection · Baseline comparison · Change over time {/* Fork */} {/* Individual */} Individual No biomechanical literacy assumed {/* Professional */} Professional Clinician, orthotist, foot care specialist {/* Arrows */} {/* Simplified insight */} Simplified insight (default) Pattern, change signal, next step {/* Detailed data */} Detailed data (default) Pressure maps, trend charts, readings {/* Arrows */} {/* Detail on demand */} Detail on demand Same data, more context if needed {/* Shared view */} Shared view Same session, basis for conversation {/* Dashed connector */} {/* Caption */} One session, two levels of access – both users see the same event, at different depths
)} {section.id === 'users' && (
Results
)} {section.bodyAfter && (

{section.bodyAfter}

)} {/* Constraints grid — 2×2 */} {section.constraints && (
{section.constraints.map(c => (
{c.title}

{c.body}

))}
)} {/* Decisions accordion */} {isDecisions && (
{decisions.map((d, i) => { const isOpen = !!accordionOpen[d.id]; return (
{ decisionRowRefs.current[d.id] = el; }} style={{ borderTop: '1px solid #e0ddd8', borderBottom: i === decisions.length - 1 ? '1px solid #e0ddd8' : 'none', }}>
{d.text.split('\n\n').map((para, pi) => (

{para}

))}

{d.tradeoff}

{d.diagram}
{d.id === 'd1' && ( UX sitemap )} {d.id === 'd2' && (
Questionnaire and pre-examination screen Questionnaire and pre-examination screen with tooltip open
)} {d.id === 'd3' && ( New customer pop-up )} {d.id === 'd4' && ( Data history view )}
); })}
)}
{/* ── Patient process (after problem section) ── */} {section.id === 'problem' && (
Patient process diagram
)} {/* ── Validation screenshot (after validation section text) ── */} {section.id === 'validation' && (
Doctor's diagnosis view
)} {/* ── Bottom padding ── */}
); }; Object.assign(window, { CaseStudyFootCare, FootCareSection });