Inspiration
Living with chronic conditions myself, I saw how fragmented daily health management could be—juggling logbooks, reminder apps, and care team check-ins felt overwhelming. I wanted to create a single, calm, and intuitive space that meets the daily needs of those managing diabetes, hypertension, and other long-term health goals—something that felt human, not clinical.
What it does
Chronic Care Companion centralizes chronic disease management: track blood glucose, blood pressure, weight/BMI, activity, and sleep; manage medication schedules and adherence; log nutrition (including glycemic load for diabetes); communicate with care teams; and generate health trend reports—all with a warm, modern interface that reduces the stress of daily health tracking.
How we built it
I started with user-centric design in Figma, prioritizing the Western healthcare UI aesthetic (glassmorphism, soft gradients, intuitive navigation) that feels familiar and trustworthy. I built the frontend with HTML5, CSS3 (TailwindCSS for responsiveness), and JavaScript, using React for SPA behavior. Chart.js powered the animated trend charts, and custom CSS animations brought micro-interactions (hover lifts, count-up stats, smooth transitions) to life. I focused on responsive design to ensure usability across desktop and mobile—critical for on-the-go health logging.
Challenges we ran into
The biggest hurdle was balancing visual polish with performance: too many animations risked lag on mobile, so I optimized CSS transitions (200ms ease timing, staggered entrances) and lightweight Chart.js configurations. Validating health data (e.g., negative glucose values, illogical sleep times) required nuanced logic, and aligning status color coding with Western medical guidelines (e.g., red for danger, green for normal) demanded precise adherence to clinical standards.
Accomplishments that we're proud of
Creating an interface that’s both visually engaging and functionally intuitive—users don’t need a tutorial to log vitals or check medication adherence. The animated health trends make complex data easy to understand, and the glassmorphism design strikes the right balance between modern aesthetics and medical professionalism. Most importantly, it’s a tool that puts the user’s daily routine at the center, not just clinical metrics.
What we learned
I deepened my understanding of accessible medical UI design—clarity and trust are non-negotiable for health tools. I also learned to prioritize core functionality (data logging, adherence tracking) over feature bloat, and how to translate clinical guidelines (e.g., BMI categories, glycemic load formulas $GL = (GI × \text{Net Carbs (g)}) / 100$) into user-friendly interactions.
What's next for this project
First, integrate secure cloud storage for long-term data retention—critical for care team sharing. Next, add wearable device sync (e.g., fitness trackers) to auto-log activity/sleep, and expand diet management with a food database for faster nutrition logging. Finally, incorporate push notifications for medication reminders and refill alerts to boost adherence long-term.
Log in or sign up for Devpost to join the conversation.