An interactive web-based self-screening tool that evaluates daily hydration adequacy, energy levels, and kidney health risk factors through a modern, user-friendly questionnaire system.
HYDRA Kidney Score is a comprehensive health assessment platform designed to help users evaluate their kidney health and hydration status. Built as a client-commissioned project, this application combines medical knowledge with modern web technologies to deliver an engaging, educational experience. The system uses a 7-component questionnaire to calculate personalized risk scores and provide actionable health recommendations.
The work started by separating staff operations from customer booking needs, then turning both into clearer product requirements.
The primary challenge was translating complex medical assessment criteria into an intuitive digital experience while maintaining clinical accuracy. The client required a solution that could engage users without overwhelming them with medical jargon, while ensuring the assessment remained scientifically valid. Additionally, the system needed to handle various user inputs gracefully and provide personalized recommendations based on multiple risk factors.
Many individuals lack awareness of their kidney health status until serious complications arise. Traditional medical screenings are often inaccessible or intimidating for everyday users. The client identified a gap in the market for a lightweight, accessible tool that could provide preliminary kidney health insights without requiring medical expertise or expensive equipment. The challenge was to create a web application that could democratize basic health screening while encouraging users to seek professional medical advice when necessary.
The development followed an iterative approach working closely with the client's requirements. Initial wireframes focused on simplifying the medical questionnaire into digestible sections...
The visual design leveraged a cyan-to-teal gradient palette symbolizing water and hydration, reinforcing the application's core message. Each component was built mobile-first to ensure ac...
Version control through Git enabled parallel development of features while maintaining code stability. Feature branches allowed isolated development of the assessment engine, UI component...
The final implementation is a single-page application built with vanilla JavaScript, ensuring fast load times and minimal dependencies. The assessment flow uses a question-card navigation system with real-time progress tracking and input validation. Score calculation employs a weighted point system across seven health indicators including hydration frequency, fluid intake, physical activity, energy levels, caffeine consumption, family history, and urinary health markers.
Results are presented through an animated circular progress indicator with color-coded risk badges and personalized recommendations. The educational section provides context about kidney health, hydration importance, and preventive measures. The entire application is responsive, with mobile menu toggles, touch-friendly interfaces, and optimized layouts for screens ranging from 320px to desktop sizes.
Git workflow management ensured clean commit history with descriptive messages, enabling easy rollback and feature tracking throughout development iterations.
The application successfully delivers a user-friendly health screening tool that completes assessments in under 5 minutes. The intuitive interface reduced user drop-off rates compared to traditional form-based approaches. The visual feedback system, particularly the animated score reveal and color-coded risk categories, enhanced user engagement and comprehension of results.
The educational component increased user awareness about kidney health factors, with the warning box effectively communicating when to seek professional medical attention. The responsive design ensured accessibility across demographics, with mobile optimization enabling on-the-go health checks.
From a technical perspective, the modular JavaScript architecture allowed for easy maintenance and future feature additions. The Git repository structure with feature branching facilitated collaborative development and version management.
Start from the real workflow before deciding the interface structure.
Make system states visible so users know what happened and what to do next.
Write interface copy that reduces follow-up questions, not just fills empty space.