Lofi Study Lounge
Target Group: Students | Group #2 | Surrey, BC
Some Context:
​
Fraser Heights Science Academy is an accelerated intensive program
that seamlessly blends math and science. It is also a joint venture with Simon Fraser University (SFU), which strengthens students' foundations and concepts in preparation for excelling in STEM fields in University and beyond.
​
I was a part of this program for Grades 11 and 12 in high school at Fraser Heights Secondary School. For our final project to conclude the program, we were encouraged to create a Science Academy Capstone project that showcased what we had learned throughout the 2 years.
​
One of the many things my partner and I learned was how to program and deploy websites using HTML, CSS, and JavaScript, so we used these skills primarily for our Capstone Project.​ As students, we noticed that it was often difficult to maintain our attention spans or there was a tendency to be easily diverted from the matter at hand (studying).
​
Our solution was to create a website to help time manage, organize to-dos, and keep accountability.
Some Inspiration:
​
- Lofi-Cafe: The fluid transitions between different stations playing different music were unique.
​
- Lofi.co: Has an interactive background with night and light mode.
Some Wireframes:
Troubleshooting:
​
- Z-Index: where some elements were misaligned and buttons were not in the right spots.
​
- Debugging Code: Some issues with classes and the ordering of objects.
Testing in Replit:
​
- Toggle Camera Functioning
​
- Spotify Embed
​
- Modeled Pomodoro Timer
​
- Dynamic Background
IN SUMMARY
​
- Lofi Study Lounge is a website that helps students with time management and accountability to be productive every day.
​
- It keeps users accountable through a toggle camera that directly displays their current state and a matching study with me video is right next to them.
​
- All the features are user-friendly with simple buttons for the Pomodoro timer, toggle camera, and Spotify embed.
​
- Tasks can be tracked with a comprehensive to-do list, all while having an interactive background without distractions.
​
​
Final Product:
Potential Next Steps:​​
​
- Facial Detection in Pomodoro Breaks: Using OpenCV, Flask, and Python to have a user detection feature.
​
- Summary Button: A button that would give the overall statistics on the study session.