TrackQuiz

Project Overview

This course project involved creating a multiplayer music quiz web app connected to Spotify, designed to be played live with friends for a more engaging and social experience. We worked through a design process from ideation and prototyping to user testing and iteration, focusing on a clear and intuitive flow for hosting, joining, and playing quizzes. The app was built in React with a structured architecture. This kept the interface simple while still supporting real-time interaction and quiz logic. The project combined user-centered design with technical development.

Course

Tools

Technologies

Time Frame

Interaction Programming and the Dynamic Web 7.5 credits KTH

Jan 2025-May 2025 50% phase

React, JavaScript, HTML & CSS, Firebase, React Router

Figma, Excel, Visual Studio Code, GitHub

The process

Goal and Constraints

Deliver a fully working website built from scratch in code. Because the course emphasized implementation, we shortened the formal design process (no deep research, personas, POV/HMW). We focused on a lean, test-driven path to get a usable product live.

Approach (overview)

User Flow

Then we mapped out the user flow. End-to-end paths for Host and Guest from sign-in to scoreboard. This clarified which screens, decisions, and system states we actually needed and worked as a blueprint for information architecture and low-fi wireframes.

Low-Fidelity Wireframes

Sketches in Figma to explore navigation, different layouts, and screen hierarchy (Host vs. Guest, replay vs. create new).

Usability testing on LoFi wireframes

Method: Moderated, task-based usability testing (think-aloud) with 4 participants on a low-fi prototype.

Tasks given

1. Create an account – sign up and get started.

2. Visit your profile – explore info, then navigate back home.

3. Host a quiz (replay) – find an old quiz, start it.

4. Create a new quiz – use a favorite playlist to set up a fresh quiz.

Usability improvements (prioritized)

• Clarify account flow – state that Google login + connect Spotify after login.

• Easier “Home” – add Home button/tooltip (logo wasn’t obvious).

• Song ↔ question logic – show dynamic counter/explanation.

• Setting labels – tooltips (e.g., “instant feedback”).

• Replay confirmation – preview/confirm before jumping to waiting room.

• Lobby feedback – show who joined + simple countdown/ready state.

• Player question view – display full question on player screen.

• Answer feedback – highlight selected option when the correct answer is revealed.

• Clear end of game – consistent results/summary screen.

New feature suggestions

• Quiz preview before starting (especially for old quizzes).

• Duplicate & edit a previous quiz.

• Host insights – show which answers each player chose in real time.

• Progress indicators – question counter / mini live leaderboard between questions.

• Richer profiles – badges/achievements, history, compare with friends.

• Playlist previews – audio/sample or song list before building the quiz.

From Lo-Fi to Full Build (Tech)

After the lo-fi test, we shortened the design cycle and moved straight to building the full website, including the test insights into the implementation (clearer login, home navigation, songs↔questions logic, lobby feedback)

• React (SPA) + React Router; JavaScript, HTML, CSS

• MVP (Model–View–Presenter) architecture

• Firebase: Auth (Google Sign-In), Firestore (realtime)

• Spotify Web API for playlists/tracks

• Gemini API for AI-generated questions

• Realtime room codes & lobby/quiz sync

• Git & GitHub for versioning; env vars for API keys/secrets

User Testing on Ready App

Method: Moderated, task-based usability testing (think-aloud) with 6 participants (3 Hosts, 3 Guests) on the developed product.

Tasks given

Host

• Sign in with Google

• Learn how to play

• View profile

• Create a quiz

• Start quiz when guests join

• Finish quiz

• Return to menu

Guest

• Learn how to play

• View profile

• Join a quiz (enter session ID + name)

• Finish the quiz

• Return to menu

Key observations

Hosts

• Google sign-in felt fast and clear.

• “How to Play” was concise and useful.

• Profile was clean; desire for badges/history/comparison.

• Playlist fetch + track list was quick; good affordance when “Create Quiz” becomes enabled.

• Waiting room worked; liked seeing joins—asked for ready-check.

• During rounds, hosts lacked live visibility of players’ choices.

• Wanted a question/quiz preview before starting.

Guests

• “How to Play” clear; profile fine but wanted richer stats.

• Join with code worked, but lobby lacked player/host visibility.

• On player device, full question wasn’t visible (only options).

• After answering, no highlight of selected option; easy to forget choice.

• End of game felt abrupt; wanted a clear results summary.

• Wanted progress cues (question counter) and more independence from host screen.

Usability improvements (prioritized)

• Show the full question on the player screen.

• Highlight the player’s selected answer on reveal.

• Display all player names in the lobby (host & guests).

• Add a ready-check before starting.

• Provide a clear end-of-game results/summary screen.

• Clarify tracks ↔ questions mapping (short explanation or dynamic counter).

• Add a question counter/progress indicator during play.

New feature suggestions

• Host insights: show which answer each player selected in real time.

• Preview a generated question/quiz before start (esp. for replays).

• Live mini-leaderboard between questions.

• Richer profiles: badges/achievements, history, compare with friends.

• Playlist previews: audio/sample or song list before building.

• Match history / friend tracking and reuse previous quizzes (duplicate & edit).

Final Implementation & Wrap-Up

After the “Ready app” test, we programmed the last round of improvements and finalized the site for hand-off.

What we shipped in this round

• Player clarity

  • Show the full question on the player’s screen.

  • Highlight the selected answer on reveal.

• Lobby confidence

  • Player list (host & guests) and session host visibility.

• Game flow

  • End-of-game summary (scores, winner).

Usability polish

• Clear Home navigation.

Outcome and learning outcomes

Outcome

• Shipped a production-ready MVP that delivers the live music-quiz loop (host/guest, realtime play, scoreboard) with Spotify + Gemini integrated.

• Addressed the highest-impact usability issues from both test rounds.

• The site still has clear improvement areas, especially in UX (e.g., richer profiles, clearer end-of-game flow, player independence from the host screen, ready-check, quiz preview, progress cues, live insights for hosts).

• Stable foundation: clean React (MVP architecture) + Firebase realtime setup, making future iterations straightforward.

Learning Outcomes

• Design × Engineering integration: Learned to translate user flows into routes, presenters, and data models to keep views simple while the logic lives in presenters/hooks.

• Value of the design process: Skipping full discovery (personas/POV/HMW) saved time but increased ambiguity and rework. I now clearly see how a lightweight, early design process aligns the team around shared goals and speeds delivery later.

• Task-based usability testing: Practiced moderating think-aloud sessions, writing actionable tasks, and turning findings into a prioritized backlog (impact/effort).

• MVP mindset: Prioritized core value first; learned to slice features, set guardrails, and ship incrementally rather than aiming for perfection.

• Technical growth: Strengthened skills in React + React Router, MVP (Model–View–Presenter), Firebase Auth/Firestore realtime, Spotify OAuth + Web API, and Gemini-powered content generation.

• Collaboration & delivery: Improved at Git-based workflows.

IDEATION - USER FLOW - LOFI WIREFRAME - USABILITY TESTING - CODE PRODUCT - USABILITY TESTING - FINAL IMPLEMENTATION

Ideation

With tight time pressure, we skipped formal ideation (interviews, personas, POV/HMW, Crazy 8s, storyboards etc.). Instead we based this step on our team’s interest in live music quizzes and a clear gap: a real-time, Spotify-connected version. Guiding principles: social & simple (host/guest with room code), leverage Spotify to cut setup, and code-first feasibility.

The result