Case Study
MediScan
An AI-powered healthcare companion designed to simplify how users scan, understand, organize, and act on medical reports.
Problem
Medical reports can be difficult to interpret because important values, ranges, and terminology are presented in clinical formats. Users need a clear way to see what matters, understand abnormal results, and access explanations without losing context.
Design Goals
- Turn complex medical reports into readable, structured information.
- Surface abnormal or noteworthy values without overwhelming the user.
- Create a trustworthy, calm visual hierarchy for sensitive information.
- Provide an accessible path from report review to AI-assisted explanation.
Process
Design process
- 01
Empathize
Healthcare context, user needs, pain points and report-understanding journeys.
- 02
Define
Core problems around comprehension, hierarchy, trust and information overload.
- 03
Ideate
Dashboard structure, report grouping, status patterns and AI-assistance entry points.
- 04
Design & Prototype
Mobile information architecture, high-fidelity screens and reusable components.
- 05
Testing
Review of scan/report flows, readability, status interpretation and interaction clarity.
Key UX Outputs
Stakeholder insights · Problem framing · Information architecture · User flows · Wireframes · High-fidelity UI · Interactive prototype · Usability feedback
Design Decisions
Style guide
- Primary Blue#1976F3Primary CTA / interaction / focus
- Deep Navy#050A4EHeader / brand foundation / high contrast
- Cyan Mint#66E5D1Positive supporting accent / visual balance
- Soft Blue#F2F8FEPage background / information surfaces
- Success Green#16866ANormal / healthy status
- Warning Amber#C78318Borderline / attention status
- Concern Coral#D95C3DElevated / concern status
- White#FFFFFFCards / report surfaces
Approach
Design principles
Hierarchy
Use size, weight, spacing and contrast to make the next action or most important information obvious.
Consistency
Repeat components, states, spacing and interaction patterns so users can build familiarity.
Accessibility
Maintain strong text/background contrast and avoid relying on color alone to communicate status.
Feedback
Make changes, exceptions, success and confirmation visible at the moment they happen.
Content clarity
Prefer concise labels, meaningful status language and progressive disclosure over dense explanation.
See every screen, state and interaction behind the MediScan interface in the full Figma file.
Explore the full design in FigmaMore Work
