FocusForAll

UI Before analyzing in Re imagine.web
Visual Analytics
Heatmap
After using Reimagine web

Inspiration

The idea for FocusForAll came from the struggle many of us face every day , trying to read online while surrounded by distractions.
Bright screens, ads, and poor design make reading tiring and unfocused.
I wanted to design something calm, accessible, and human-centered, an app that helps users stay focused, comfortable, and in control of their reading experience.

What It Does

FocusForAll is a distraction free reading web app that lets users switch between Light, Dark, and Sepia modes to reduce eye strain and enhance focus.
It also tracks user interaction and engagement using Microsoft Clarity, allowing us to study which design choices help people concentrate better.
Users can read, relax, and enjoy ,while the app learns what works best for them.

How I Built It

I built FocusForAll using HTML, CSS, and JavaScript for a clean and fast frontend.
A Service Worker and Manifest file make it installable as a Progressive Web App (PWA) that runs smoothly on both desktop and mobile.
I integrated Microsoft Clarity for heatmaps and click analytics and deployed it on Netlify for easy public access.
Finally, I visualized the interaction data , showing that Dark Mode received the most engagement (19 clicks vs. 13 for others).

Challenges I Ran Into

Integrating analytics tracking within a dynamic web app.
Designing a UI that’s both aesthetic and accessibility-friendly.
Interpreting real user heatmaps and transforming raw data into visual insights.
Ensuring smooth performance and compatibility across devices.

Each challenge taught me something new from debugging scripts to understanding user psychology.

Accomplishments That I'm Proud Of

Successfully creating a PWA that’s both functional and user-friendly.
Collecting and analyzing real behavioral data through Microsoft Clarity.
Building a data-driven design insight that shows how color contrast impacts focus.
Completing a meaningful project as beginners that solves a real-world problem.

This project made me realize that even small ideas can create big impact when they are human-centered.

What I Learned

I learned the importance of combining design thinking with user analytics.
Through this project, I discovered that focus and comfort are not just design goals — they’re measurable through data.
I also learned how tools like Clarity can turn a simple app into a platform for understanding real human behavior.
Most importantly, I learned how to collaborate, test, and iterate like true developers.