Focus Health: Privacy-First Health Tracking Application

Tim

Tim Green

Case Study: Focus Health

Sensitive Domain Applications Built with Care

Project Overview

Client: Self-initiated proof-of-concept Timeline: Rapid prototype to production deployment Role: Sole designer and full-stack developer Technologies: React, TypeScript, Tailwind CSS, shadcn/ui, Vite, localStorage persistence Live Demo: focushealth.rawveg.co.uk

The Problem

Patients on warfarin anticoagulation therapy need to monitor their INR (International Normalized Ratio) readings carefully. Values outside therapeutic range indicate either bleeding risk (too high) or clotting risk (too low). Combined with blood pressure monitoring, this data forms a critical picture of cardiovascular health.
Existing tracking solutions often fall short in several ways. Generic health apps lack the specific metrics that matter for anticoagulation therapy, such as Time in Therapeutic Range (TTR). Specialised medical tools frequently suffer from dated interfaces that discourage regular use. And many solutions require cloud accounts, raising legitimate privacy concerns about sensitive health data.
I wanted to demonstrate that healthcare applications could combine clinical utility, beautiful design, and absolute data privacy without compromise.

The Solution

Focus Health is a health tracking application specifically designed for INR and blood pressure monitoring. It provides clinically meaningful analytics whilst keeping all data entirely local to the user's device.
Domain-Appropriate Design:
The application understands what INR tracking actually requires. Configurable target values accommodate different prescriptions. Tight tolerance monitoring (plus or minus 0.2 for normal, plus or minus 0.4 for monitoring range) reflects real clinical thresholds. TTR calculation provides the metric that healthcare providers actually use to assess anticoagulation control.
Thoughtful Status Communication:
Health applications carry responsibility for how they present potentially concerning information. Focus Health uses "Contact Clinic" rather than alarming language like "Critical" or "Danger." The goal is to prompt appropriate action without inducing unnecessary anxiety. This distinction matters when users check their readings.
Privacy as Foundation:
All data stores locally in the browser. No accounts. No cloud synchronisation. No data transmission to external servers. No analytics or tracking. Users own their health data completely. Export functionality enables sharing with healthcare providers on the user's terms.

Technical Implementation

Frontend Architecture:
React 18 with TypeScript provides type safety throughout the application, which matters more than usual when handling health data. Tailwind CSS paired with shadcn/ui delivers the polished, professional interface that encourages regular use. The visual design draws inspiration from Apple's Human Interface Guidelines, using glass-morphism effects and smooth transitions.
Vite handles the build pipeline, producing optimised production bundles suitable for deployment on static hosting.
Data Model Design:
The reading structure accommodates both INR and blood pressure entries with appropriate fields for each type. INR readings capture value and timestamp. Blood pressure readings capture systolic, diastolic, optional pulse, and timestamp. The unified structure enables combined analytics and chronological views across reading types.
Settings persist separately, storing the user's prescribed INR target for accurate therapeutic range calculations.
Analytics Calculations:
The TTR calculation implements the standard methodology: percentage of readings falling within the configured therapeutic range over a specified period. This is the metric anticoagulation clinics use to assess therapy effectiveness, making the application immediately useful in clinical conversations.
Blood pressure categorisation follows established guidelines, classifying readings as normal, elevated, or requiring clinical attention. Trend analysis compares recent readings against historical baselines, surfacing improvement or decline patterns.

Application Capabilities

INR Monitoring:
Users configure their prescribed target INR (commonly 2.5 or 3.0 depending on indication). Each reading receives automatic classification: in range, monitoring range, or contact clinic. The analytics tab shows percentage of readings in target, TTR over thirty days, and trend direction.
Blood Pressure Tracking:
Systolic and diastolic readings with optional pulse capture. Automatic categorisation against clinical thresholds. Statistical summaries showing averages, minimums, and maximums. The same attention to meaningful presentation applies throughout.
Professional Export:
The export system generates reports suitable for medical appointments. CSV download provides raw data for spreadsheet analysis. Clipboard copy enables quick pasting into messages or documents. Summary reports format the data for healthcare provider review. Users control exactly what they share and when.
Reading Management:
Full CRUD functionality for all readings. Edit capability corrects data entry errors. Deletion removes incorrect entries. The "All Readings" tab provides chronological view across both reading types. Tab state persists between sessions, returning users to their preferred view.

Results and Demonstration Value

The application successfully demonstrates that healthcare tools can be both clinically useful and genuinely pleasant to use. The TTR calculation provides real value for anticoagulation patients. The thoughtful status language respects users' emotional state. The privacy architecture addresses legitimate concerns about health data.
The local-only approach proves that sophisticated applications do not require cloud infrastructure. Everything functions offline. Data never leaves the device unless the user explicitly exports it. This model suits any domain where data sensitivity outweighs synchronisation convenience.

Key Challenges Overcome

Challenge: Health status indicators must prompt appropriate action without causing unnecessary alarm.
Solution: Language choices throughout the application prioritise helpful guidance over dramatic warnings. "Contact Clinic" communicates the same information as "Critical" but without the emotional charge. "Monitoring Range" acknowledges deviation from target without implying danger. These distinctions seem small but matter significantly for user wellbeing.
Challenge: Clinical metrics like TTR require domain knowledge to implement correctly.
Solution: Research into anticoagulation therapy management informed the analytics implementation. TTR calculation follows the standard methodology used by clinics. Target ranges and tolerance bands reflect actual clinical practice. The application speaks the language healthcare providers use.
Challenge: Export functionality must serve real clinical workflows.
Solution: Multiple export formats address different use cases. CSV provides data portability for detailed analysis. Clipboard copy enables quick sharing via messaging. Summary reports format information for appointment discussions. The export system serves actual needs rather than offering generic "download" functionality.

What This Demonstrates

Sensitive Domain Competence: Healthcare applications carry responsibilities beyond typical software. This project demonstrates the research, care, and thoughtfulness required when building tools that touch people's health and wellbeing.
Privacy-First Architecture: The local-only data model is not a limitation but a feature. For applications handling sensitive information, this approach provides absolute privacy without sacrificing functionality. The pattern applies across healthcare, finance, legal, and any domain where data sensitivity matters.
Domain Research and Understanding: The TTR calculation, the tolerance bands, the clinical language: these details reveal genuine engagement with the problem space. Building effective tools requires understanding the domain, not just the technology.
Consistent Design Quality: Even in a functionally-focused healthcare application, the interface remains polished and pleasant. Glass-morphism effects, smooth transitions, responsive layout. Quality does not diminish because the domain is serious.

Engagement Opportunities

If you're looking to:
Build applications in healthcare, finance, or other sensitive domains
Create tools requiring privacy-first architecture and local data ownership
Develop tracking or monitoring applications with meaningful analytics
Design interfaces that handle serious subject matter with appropriate care
Focus Health demonstrates the approach: domain understanding, thoughtful UX, absolute privacy, professional polish. Let's discuss what we could build for your sensitive domain requirements.
Project Links:
GitHub Repository: github.com/rawveg/focus-health
Like this project

Posted Nov 30, 2025

Developed Focus Health, a privacy-first health tracking app for INR and blood pressure monitoring.