Sleep Clinic Online

Inspiration

As someone who’s struggled with sleep disruptions—and seen friends and family face insomnia, sleep apnea, and shift-work sleep issues—I wanted to create a solution that makes professional sleep care accessible. Too many people avoid in-clinic sleep tests due to cost or inconvenience, so I set out to build a platform that brings evidence-based care to their homes.

What it does

Sleep Clinic Online delivers comprehensive remote sleep care: standardized sleep assessments, structured CBT-I programs (the gold standard for non-pharmaceutical insomnia treatment), home sleep testing support, and personalized sleep hygiene guidance—all without requiring overnight clinic visits. Users can track sleep data, book doctor consultations, and build sustainable pre-sleep routines tailored to their needs.

How we built it

I started with defining the core user journey—from initial assessment to ongoing care—and mapped out a modular, card-based UI aligned with Western design preferences for minimalism and clarity. I used HTML5 and CSS3 for the foundational structure, adding dynamic animations (via CSS keyframes and Intersection Observer) to enhance engagement without overwhelming users. The responsive grid/flexbox system ensured the platform works seamlessly across mobile, tablet, and desktop—critical for users accessing care on the go.

Challenges we ran into

The biggest hurdle was balancing animation with accessibility: I needed to ensure dynamic effects (like progress ring animations and hover states) enhanced the experience without alienating users who prefer reduced motion. I also had to refine the color palette to strike a balance between a calm, night-time aesthetic and readability for users with visual impairments.

Accomplishments that we're proud of

Creating a fully responsive, accessible platform that mirrors the professionalism of clinical sleep care while feeling approachable. The scroll-triggered staggered animations and gradient hero section create a calming atmosphere, and the modular design makes the platform easy to navigate—even for users new to remote health tools.

What we learned

I deepened my understanding of accessible web design (including respecting prefers-reduced-motion settings) and how to translate clinical sleep care frameworks (like ISI and SDB assessments) into intuitive digital experiences. I also learned the importance of aligning design choices with cultural preferences for minimalism and directness in Western markets.

What's next for this project

I plan to expand the CBT-I program with interactive audio guides for relaxation techniques, integrate more wearable device data visualization tools, and add localized sleep hygiene guidance tailored to different lifestyles (e.g., shift workers, parents). Long-term, I want to partner with sleep clinicians to validate the assessment tools and expand access to affordable home sleep testing across more regions.

Built With

• canvas
• css3
• fontawesome
• html5
• intersectionobserver
• javascript