Role
Web Developer
Year
2025
Tools
HTML, CSS, Vanilla JavaScript
Team Size
1 Members
Challenge
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.
Problem Statement
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.
Design Process
The development followed an iterative approach working closely with the client's requirements. Initial wireframes focused on simplifying the medical questionnaire into digestible sections with visual feedback. We implemented a progressive disclosure pattern where users answer one question at a time, reducing cognitive load and improving completion rates.
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 accessibility across devices. The scoring algorithm was calibrated based on established medical guidelines, with three distinct risk categories to provide clear, actionable insights.
Version control through Git enabled parallel development of features while maintaining code stability. Feature branches allowed isolated development of the assessment engine, UI components, and educational content before integration.
Solution
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.
Impact & 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.
Key Learnings
User-Centered
Always put users first in every design decision
Iteration
Continuous testing and refinement leads to better outcomes
Collaboration
Great products are built by great teams working together