Inspiration

As students, we’ve all been there—wandering around campus searching for an available study spot, only to waste valuable time and end up frustrated. The same goes for the gym—showing up only to find it overcrowded can be equally demotivating. These challenges inspired us to create Spotlight, a real-time livestream platform designed to make campus life more efficient and less stressful.

What it does

Spotlight is a real-time campus assistant designed to help students find study spots and check gym availability with ease. Using livestream technology, Spotlight analyzes spaces to identify the number of people present and available seats, providing up-to-date data at a glance. By saving your course schedule, Spotlight suggests the closest available spaces based on your previous or next class. Spotlight simplifies campus life, saving you time and making your day more productive.

How we built it

• Design: Figma, Adobe Illustrator
• Frontend Development: Next.js, Tailwind CSS
• Streaming & Real-time Processing: Livepeer with WebRTC, Flask Server
• Object Detection and AI Integration: OpenCV, PyTorch, COCO8 Dataset, HLS Stream

1. Wireframe

The wireframe was designed to establish the fundamental structure of the MVP product and ensure the idea was clearly shared among the team.

Key Pages and Features

Home

Browse

Details

2. Styleguide

The design choices were made with the target audience—students—in mind. The aim was to create an interface that feels welcoming, bright, and friendly, encouraging engagement, usability, and supporting their study habits.

3. Hi-Fi

All colors and fonts have been applied consistently throughout the design. The banner on the home page features a yellow hue, creating a welcoming and vibrant atmosphere for users.

During the development phase, a Schedule page was added to enhance the app's usefulness for students

Schedule

4. Logo

Ideation

The logo design was inspired by the project name, "Spotlight," with the goal of creating a simple, easily recognizable mark. Basic shapes such as ellipses, squares, and triangles were used to form the spotlight shape. Straight lines were employed to align the selected font, Futura, ensuring a clean, modern look that complements the design’s simplicity and clarity.

Final logo

The version featuring eyes was selected to add a touch of friendliness, making the logo more approachable and engaging for users.

What's next for Spotlight

Privacy Enhancement: To further prioritize user privacy, a blur effect will be added to the streaming content. While Spotlight can already detect available spaces, the blur will obscure sensitive details in the stream, ensuring a more secure and private experience for users.

What I learned

I learned how to collaborate effectively with developers by using Figma to communicate design ideas clearly. I gained experience in creating an MVP with wireframes and discussing the design before moving on to the style guide or high-fidelity designs. This approach allowed developers to start working on backend and frontend core coding while the design evolved, enabling parallel progress and a more efficient development process.

Explore more about the project and its development below!