Productivity Tool
We created a website that helps users stay focused with cute cat visuals and a peaceful, interactive environment.
Design Context
This is a side project I built from scratch. I was inspired by how study livestreams like lofi girl help people stay focused, and noticed that many users cheer each other on in chatrooms. So, we wanted to combine a Pomodoro timer with a study livestream vibe to make a website that supports both focus and social connection.
Ｗhat We Did
We built a website with a chatroom and focus tracking features. Users can log their sessions and talk with others while studying. The site is still being improved.
Main page
This page allows users to log in and choose how they want to start their focus session. They can enter a public room, create their own room, or join an existing one with a code. The layout is responsive (RWD), ensuring a consistent and user-friendly experience across desktop and mobile devices.
Study Room Page
This is where users do their focus sessions. A Pomodoro timer helps them stay on track, while cute animated cats keep things fun. On the right, there's a chatroom where people in the same room can cheer each other on and stay connected.
Setting Page
Users can personalize their focus experience by choosing background music—like lofi, forest, rain, or wave sounds—and selecting their favorite cat character to accompany them during sessions.
Report Page
This page shows a weekly summary of the user's focus time, with a bar chart and pie chart for better visualization. Users can track their progress by day and by activity type (e.g., study, reading, or exercise), helping them stay motivated and consistent.