RememberOurStoriesInSG presents

Lumina Studio

AI Music Platform — Create · Play · Earn

Create music videos in minutes · play to learn the music · earn in the marketplace

SELVAKUMAR Sachin 250941Z  ·  Immanuel Khoo 253680U  ·  Kiu Fa An 254400K

Client: Violet Tay (RememberOurStoriesInSG)  |  Module: IT2114 Digital User Experience Design  |  Assignment 1

Figma Design File · musicprojectcreate.vercel.app

Roadmap

Presentation Overview

01
Executive Summary & Context
Create · Play · Earn · technology
02
Client & Problem
RememberOurStoriesInSG · requirements
03
User Research & Synthesis
Interviews · affinity · insights · HMW
04
User Personas
Marcus · Rachel · Farid
05
Information Architecture
Site map · flows · service blueprints
06
Individual Component
Wireframes · evolution · hi-fi · rationale
07
Design System
Colour · type · components
08
Technical Architecture
Stack · pipeline · performance
09
Future Roadmap
Metrics · partnerships · risks
10
Conclusion & AI Declaration
Takeaways · integrity · thank you
Section 01

Executive Summary

One platform, three connected pillars — Create, Play & Earn

Lumina Studio, built for client Violet Tay (RememberOurStoriesInSG), is an AI music platform that turns one idea into a finished, shareable music video — then turns that song into a game people play, learn from, and pay for.

Create — the Music Video Creator collapses a 40+ hour manual production (lyrics, composition, filming, editing) into minutes, via Gemini 2.5 (lyrics) → Lyria (music) → ComfyUI (video rendering).

Play & Learn — every song becomes a Rhythm and Piano game that gamifies learning its beats, notes and melody. Earn & Share — the Marketplace lets creators publish and players buy songs, powered by a leaderboard-and-energy economy.

Section 01 · What Lumina Studio Actually Is

Create · Play · Earn

A creator-economy music platform: AI-powered music video generation + gamified play-to-earn marketplace.

1 · Create
Efficiency & Time-Saving

The Music Video Creator makes finished music videos effortlessly — a 40+ hour manual pipeline done in minutes. Type an idea; AI writes lyrics, composes the song, and renders cinematic scenes.

Gemini 2.5LyriaVeo · ComfyUI
2 · Play & Learn
Engagement & Play-to-Earn

The Rhythm & Piano games turn each song into engaging play — players earn AI credits by hitting notes and climbing leaderboards, unlocking songs and generation credits.

Rhythm GamePiano ModeBeat Detection
3 · Earn & Share
Community & Monetization

The Marketplace is a self-sustaining creator economy — browse, play-to-buy, leaderboard multipliers, an ad-funded energy loop, and a creator revenue share.

LeaderboardsEnergy + Ads70 / 30 Share
Section 01 · By the Numbers

Platform Overview

3
AI Models
Gemini · Lyria · Veo
3
Core Pillars
Create · Play · Earn
40h→15m
Creation Time
Manual → AI pipeline
2
Game Modes
Rhythm & Piano
70/30
Revenue Share
Creator-favoured
F2P
Ad-Funded Loop
Free to play, ads restore energy
Section 01 · What Sets Us Apart

Key Features

AI Song Generation Create

Turn any idea into a catchy, original song with AI lyrics, melody and professional vocals — no music skills required.

Gemini 2.5LyriaNatural Voice
Music Video Creation Create

Auto-generate cinematic music videos from the song — stitched from AI scenes, rendered and exported in HD.

Veo · ComfyUIScene PlanningHD Export
Rhythm Game Play

A falling-note rhythm game built from any song — learn its beats and timing by playing, scored with combos & accuracy.

Beat DetectionCombos
Piano Mode Play

Virtual piano with a falling-note guide that teaches a song note-by-note — adjustable density from chill to chord-chaos.

Interactive KeysNote Guide
Gamified Marketplace Earn

Browse and preview songs, play-to-buy, climb leaderboards, and earn points — creators publish and take a revenue share.

Play-to-BuyLeaderboards
Energy & Rewards Economy Earn

An ad-funded energy loop keeps play free: watch an ad to restore energy, convert points to AI credits, buy songs with IWSC watermark.

Energy + AdsPoints → Credits
Section 01 · Built With Modern Tools

Technology Stack

Frontend

React 18
Component-based UI framework
TypeScript
Type-safe development
Tailwind CSS v4
Utility-first styling
Web Audio API + Essentia.js
Real-time beat detection & gameplay
React Router v7
Client-side routing

AI + Cloud Backend

Gemini 2.5
Lyric generation & prompts
Lyria
Music composition
Veo + ComfyUI (GPU cloud)
Cinematic video generation
AWS (EC2 · RDS · S3)
Compute, user data, marketplace records, credits & media storage
Supabase Auth
Authentication only — login, signup, sessions & identity verification
Architecture Clarification
Supabase Auth is used only to confirm who the user is. AWS stores and manages user data, songs, generated media, marketplace records, credits and AI job records.
Section 01 · Impact Statement

Our Vision

Vision

To make music creation effortless, learning playful, and creativity rewarding — one platform where anyone can create a song, play it to learn it, and earn from it.

Mission

Give creators professional music videos in minutes, give players a fun way to learn music by playing it, and give the community a fair economy to share and monetize songs.

Core Values

Effortless Creation
Cut a 40-hour craft down to minutes with AI
Learning Through Play
Master songs, beats & notes by playing, not lecturing
Fair Monetization
Creator-favoured revenue share; free to play
Community-Owned
A marketplace that rewards players and creators alike
Section 02 · RememberOurStoriesInSG

Client Overview

Client Profile
Violet Tay
RememberOurStoriesInSG · ACRA Sole Proprietor · UEN 53407470K
musicprojectcreate.vercel.app
Existing Song Works
Original patriotic / heritage songs, registered with COMPASS
Primary Distribution
YouTube — uploads her own AI-generated music videos
Time Saved / Project
~40 hours → minutes (design goal)
Assigned Problem Statement — Manual Production Pipeline
ChallengeCurrent Manual ProcessAI Solution
Song LyricsComposer manually writes all lyrics from scratch for every projectGemini 2.5 Flash auto-generates lyrics from a topic
Melody ScoreComposer manually composes melody scores using traditional methodsLyria AI generates full musical compositions in minutes
Music ProductionManual Logic Pro X arrangement & mastering — time-intensiveAI handles arrangement, mixing & mastering automatically
On-Site FilmingTravelling on-site to film scenery — costly and slowVeo 3 / ComfyUI generate cinematic scenes from text prompts
Section 02 · Before vs. After AI Integration

Workflow Transformation

Current Manual Workflow
1
Write Song Lyrics
From scratch — research, drafting, revisions
4–8 hours per song
2
Compose Melody Score
Traditional notation, deep theory knowledge
6–12 hours per score
3
Logic Pro X Production
Manual DAW arrangement, mixing, mastering
8–20 hours per track
4
On-Site Filming
Travel to locations — weather-dependent
1–3 days per project
Lumina Studio AI Solution
1
AI Lyric Generation (Gemini 2.5)
Type a topic → culturally accurate, age-appropriate lyrics
Under 30 seconds
2
AI Music Composition (Lyria)
Melody, harmony, instrumentation matched to lyrics
1–3 minutes
3
AI Music Production (Auto)
Pro-quality output, no DAW knowledge needed
Included in generation
4
AI Video Generation (Veo 3 / ComfyUI)
Cinematic SG-context scenes — no filming
8–15 minutes total
Section 02 · Balancing Vision with Feasibility

Requirements Analysis

Accepted & Implemented
Helicopter + SG Flag karaoke
The client's signature concept — delivered as AI-generated cinematic helicopter/flag visuals with karaoke lyrics from her own songs.
AI music using her lyrics
Client's own COMPASS-registered songs & lyrics are the foundation. Neural composition engine implemented.
Rhythm game & Piano mode
Gamified learning fully implemented — all game modes live and functional.
Heritage Show module
Core B2B offering — cinematic render pipeline & production references implemented.
Story Kiosk & Avatars
Avatar creation, 360° library & pre-survey CRM all implemented.
Respectfully Declined — Infeasible at Student Scale
Full AR/VR experience
Requires $50K+ hardware, Unity team, $125M+ budget. Deferred to commercial phase.
Live real-time drone/helicopter sync
The physical, live-synced version (vs. our accepted AI visuals) needs CAAS permits, GPS infrastructure & MINDEF coordination. Operationally infeasible.
Multi-venue projection mapping
Needs dedicated AV hardware, projection licenses, on-site crew. $2M+ per event.
Real-time AI performer avatar
Requires real-time neural rendering & motion-capture rigs beyond our deployment.
Section 02 · The Real Problems We Solve

The Problem

Creating, learning and monetizing music are all slow, hard and disconnected — one problem per pillar.

01
Making a Music Video Takes 40+ Hours

Writing lyrics, composing, mixing in a DAW, then filming and editing — a solo creator burns days on a single video.

Create · 1–2 videos a month is the realistic ceiling
02
Learning Music Is Passive & Forgettable

Watching a video isn't practising. Without active feedback, beats, notes and melody don't stick.

Play · No feedback loop means low retention
03
Creators Can't Monetize or Distribute

Songs scatter across YouTube and various platforms with unclear earnings — distribution friction stalls income.

Earn · No single place to publish, play & sell
04
Music Skills Are a Barrier to Entry

Composition, mixing and mastering in tools like Logic or GarageBand have a steep curve most people never climb.

All pillars · The craft gatekeeps everyone
Section 02 · One Platform, Three Pillars

Our Solution

Problem
Creating, learning & monetizing music are slow, hard and disconnected
Solution
One platform: Create with AI · Play to learn · Earn in the marketplace
Result
Minutes not hours, learning by playing, a self-sustaining creator economy
Create — Music Video Creator
+Idea → lyrics → song → video in minutes
+No music or editing skills required
+Cinematic AI scenes, HD export
+Full creative control & preview
Play & Learn — Games
+Rhythm & Piano games from any song
+Learn beats, notes & melody by playing
+Immediate scoring, combos & accuracy
+Difficulty scales from chill to expert
Earn & Share — Marketplace
+Publish, browse & play-to-buy songs
+Leaderboard multipliers & points
+Ad-funded energy keeps play free
+Creator revenue share (70 / 30)
Section 02 · Our Competitive Advantage

Why Lumina Studio?

Effortless Creation
Before
40+ hrs per video · 1–2 a month
After
Minutes per video · scale to 10+/month
40h → 15m creation time
Learn By Playing
Before
Passive watching, nothing sticks
After
Rhythm & piano play = active recall
Play is the practice
Built-in Monetization
Before
Scattered, manual distribution
After
Marketplace + leaderboard economy
70 / 30 creator share
Zero Skill Barrier
Before
Requires music + video editing skills
After
Type an idea, AI does the craft
100% skill barrier removed
Part A

Group Component

User Research · Synthesis · Information Architecture · Service Design

SELVAKUMAR Sachin · Immanuel Khoo · Kiu Fa An

Section 03 · Understanding Our Users

User Research

Our research is grounded in 4 in-depth interviews — one with our client/stakeholder (Violet Tay) and three with target users across the create, play and earn pillars — supported by hands-on competitive review of existing AI-music and rhythm-game tools.

Total Interviews
4
45–60 min each, in-depth
Stakeholder
1
Client — Violet Tay
User Interviews
3
Creator · Player · Adopter
Tools Reviewed
Several
AI-music & rhythm-game apps
Section 03 · Synthesis of 4 Interviews

Interview Overview

4
Total Interviews
1
Stakeholder
3
Users
Stakeholder — Key Findings
Prototype AI human face not yet realistic enough
Composer overloaded — wants AI to reduce workload
Realistic AI avatars for participants
Site to gather stories from song lyrics → 360° video
Gamification via AR/VR + recording-studio capsule
Interactive web game of SG past/present/future + YouTube
Users — Key Findings
Creating a music video by hand takes far too long
Prioritise speed & ease over perfection
Want a fun, active way to engage with music — not passive watching
Gamification & competition boost motivation & repeat use
Open to paying / earning if a clear marketplace exists
Overall Insight  Stakeholder and users point to one platform that makes creating music videos effortless, makes engaging with music fun and active, and gives creators a way to earn.
Section 03 · Discussion Guide

Interview Template

This template is for the Stakeholder
No.Question
Q1Can you walk us through your current end-to-end production workflow for a single music video?
Q2Which parts of that workflow consume the most time, money, or effort today?
Q3How are your existing songs (lyrics, melodies) currently created, registered, and reused?
Q4What is your vision for using AI in this process — what would "success" look like?
Q5Who are the audiences and platforms you most want to reach (e.g. YouTube, the public)?
Q6How important is staying true to your original lyrics & melody when AI generates the video?
Q7What gamified or interactive experiences do you envision for your audience?
Q8What concerns do you have about AI-generated avatars, voices, or visuals?
Q9Which features are essential vs. "nice-to-have" within a student-project scope and budget?
Q10How will you measure whether the platform genuinely reduces your workload?
Section 03 · Discussion Guide

Interview Template

This template is for the Users
1Can you walk me through a typical weekday for you?
2What creative or side projects do you do outside your main job?
3What draws you to music videos / music games specifically?
4Have you tried creating music content before? What stopped you?
5How much time can you realistically dedicate per week?
6What kinds of songs or themes would you create or play?
7Who is your target audience for these songs?
8Which AI tools have you explored for content creation?
9What would make an AI music generator trustworthy for you?
10How important is customisation versus speed?
11Biggest frustrations with existing music-creation or rhythm-game apps?
12If you could sell or earn from songs, what's your ideal outcome?
13Would learning a song by playing it (rhythm/piano) appeal to you?
14How do you feel about AI voices versus human vocals?
15Would points, leaderboards & challenges motivate you to play more?
16What pricing model fits your usage and budget?
17How important is mobile access versus desktop?
18Anything about your needs or concerns we haven't covered?
Section 03 · User Interview #1 (Create)

Darren Wong Wei Jie

Aspiring Music-Video Creator, 32 · Side Hustler

Profile

Marketing professional who wants to build a music / music-video channel for passive income, but has zero music or video-editing background.

Key Quote

"I want to put music videos on YouTube, but I have zero music background. If an AI can do the heavy lifting, I'm willing to pay."

Primary Goals
+Build passive income from a music channel
+Produce many music videos quickly
+Eventually sell / earn from his songs
Pain Points
×Zero music production skills
×Uncertainty around copyright & licensing
×Severe time constraints (3–4 hrs/week)
×Tool fatigue from complex pro software
Section 03 · User Interview #2 (Play)

Rachel Lim Su Yin

Casual Player & Parent, 32 · Tampines

Key Quote

"My daughter remembers a song after one listen. If she can actually play it and learn the notes, that's so much better than just watching."

Core Needs & Goals
+Active, playable music — not passive watching
+Something fun & safe she can share with her kids
+A free way in — earn points by playing to unlock songs
Key Pain Points
Passive Apps
Most music apps are watch-only — her kids zone out after a few minutes with nothing to do.
Paywalls
Good songs are locked behind subscriptions before she can even try them.
Time Constraints
Only fragmented windows — nap times or evenings — to play, so it has to be quick to pick up.
Section 03 · User Interview #3 (Earn / Adopt)

Mr. Farid Rahman

Institutional Adopter, 41 · Brings tools to a group

Key Quote

"My learners actually remember a melody they've played. If a platform lets them learn music by playing — and I can license it simply for a group — that's transformative."

Pain Points
×Most "learning" tools are passive & dry
×Hard to justify cost without proof of engagement
×Worried about content safety & moderation
Goals
+Get a whole group learning music by playing
+Simple group licensing & credit top-ups
+A safe, moderated catalogue of songs
Section 03 · What We Learned

Key Insights

Create — Behaviour
Making a video by hand takes far too long
Most lack music / video-editing skills
Want speed & ease over perfection
Value keeping creative control
Play — Behaviour
Active play beats passive watching
Songs stick better when you play them
Immediate feedback keeps them engaged
Competition & scores drive repeat play
Earn — Behaviour
Want a clear way to earn / save money
A free way in matters (points, ads)
Distribution friction stalls creators
Trust & safety matter for adoption
Section 03 · Research Synthesis

Affinity Mapping

7 key themes clustered from user & stakeholder interviews

01 · Time Constraints
Speed over perfection
3+ hrs searching for videos
Need creation under 15 min
02 · Skills Gap
Zero music production skills
DAWs too hard to learn
Need it done automatically
03 · Active vs Passive
Watching isn't engaging
Playing makes songs stick
Wants immediate feedback
04 · Trust & Copyright
Ownership of AI songs
Clear commercial licensing
Safe, moderated content
05 · Monetization
Desire to earn / save money
Free way in (points, ads)
Integrated marketplace
06 · Engagement
Learn by playing, not watching
Gamification boosts motivation
Rhythm & piano games
07 · Community
Share & discover songs
Compete on leaderboards
Creators & players together
7
themes → 7 insight statements → 3 HMW opportunities
Section 03 · Themes → Actionable Insights

Insight Statements

01
Time Poverty
Users need to create complete videos in under 15 minutes because fragmented schedules and 3+ hour searches make current workflows unsustainable.
02
Active Engagement
Users want to play music, not just watch it because active play makes songs, beats and notes actually stick.
03
Skills Gap
Users need a zero-skill creation flow because traditional DAWs (GarageBand, Logic) have a barrier most people can't cross.
04
Trust & Copyright
Users need clear ownership & licensing because safe monetisation and confidence in AI-generated content depend on it.
05
Monetization
Users need an integrated marketplace & earnings view because manual distribution across scattered platforms is friction that stalls income.
06
Learning by Playing
Users need gamified rhythm & piano play because engagement and repeat play are what make the music actually learned.
07
Community & Earning
Users need a marketplace to share, play & earn because scattered, manual distribution stalls both discovery and income.
These 7 insights directly seed our How Might We opportunities →
Section 03 · Problem Framing
Main · How Might We
How might we let anyone turn an idea into a
music video they can create, play & earn from
no music skills, in minutes?
Appropriate Action
Let anyone create, play & earn
For Whom
Creators, casual players & adopters
Desired Outcome
A finished, playable, monetizable song — in minutes
Section 03 · Design Opportunities

Sub How-Might-We

01
Create · Speed

How might we let someone with no music or editing skills generate a complete music video in minutes instead of 40+ hours?

02
Play · Learning

How might we turn any song into play that teaches its beats & notes, so learning happens through the game rather than passive watching?

03
Earn · Economy

How might we let players & creators earn and access songs through a fair, free-to-play marketplace funded by points, ads & a revenue share?

Section 03 · Evidence Base

Relevant Research to Support

1
Music & melody boost memory encoding
Information set to melody is recalled significantly better than spoken text — the basis for song-based learning. Wallace (1994), Memory for Music; Ludke et al. (2014).
Supports HMW: Pedagogy & retention
2
Multimedia & dual-coding improve learning
Combining words, audio and visuals leverages dual channels and reduces cognitive load for better retention. Mayer (2009), Multimedia Learning; Paivio (1986).
Supports HMW: Speed + engagement
3
Simplicity & low cognitive load drive adoption
Simple, intuitive interfaces reduce extraneous load and increase adoption by non-expert users. Sweller (1988); Nielsen Norman Group, Usability Heuristics.
Supports HMW: Skills gap / speed
4
Visibility of system status builds trust
Clear feedback (progress, status, sourcing) increases perceived reliability and user confidence. Nielsen Norman Group, Visibility of System Status.
Supports HMW: Trust & accuracy
5
Gamification increases motivation & persistence
Game elements (points, feedback, challenge) raise engagement and learning persistence when tied to goals. Hamari et al. (2014); Deci & Ryan, Self-Determination Theory.
Supports HMW: Pedagogy & engagement
Section 03 · Guiding Our Decisions

Design Principles

01
Simplicity First

Every feature should be immediately understandable. If it needs explanation, redesign it.

e.g. one-click song generation with sensible defaults
02
Delight Through Motion

Smooth animations and micro-interactions make the experience feel polished and engaging.

e.g. floating orbs, tilt effects, smooth transitions
03
Learning by Playing

Don't lecture — let people learn a song's beats & notes by playing it in the rhythm & piano games.

e.g. falling-note feedback, score & combos
04
Progressive Disclosure

Show only what's needed at each step. Advanced options exist but never overwhelm.

e.g. basic flow vs. advanced settings panel
05
Immediate Feedback

Every action gets a visible, immediate response to maintain engagement.

e.g. loading states, progress indicators, toasts
Principles applied consistently across all 3 personas' journeys & the hi-fi prototype.
Section 04 · Meet Our Primary Users

User Personas

Based on our research, we identified three primary personas representing our target audience. Each has distinct needs, goals and pain points that shaped our design decisions — and each is owned by a team member in the Individual Component.

Marcus Tan
Content Creator / Side Hustler
Sachin
Rachel Lim
Casual Player & Parent
Kiu Fa An
Mr. Farid Rahman
Institutional Adopter
Immanuel
Section 04 · Persona 01

Marcus Tan

Content Creator & Side Hustler

Age
28 years old
Location
Singapore
Education
Poly Diploma, Media
Tech
High — daily creator
Bio

Marcus is a content creator juggling a day job with a YouTube music channel. He spends 40+ hours per video on lyrics, composition, filming, and editing — time he could spend creating more content or earning. He needs AI to handle production so he can focus on creative direction and publishing.

Goals
+Idea → finished music video in under 15 minutes
+Publish multiple videos per week to YouTube
+Monetise without compromising authenticity
+Keep full creative control
Frustrations
×Manual production (lyrics, composition, filming, editing) takes 40+ hours per video
×Limited time means fewer videos → slower channel growth
×Copyright takedowns hurt velocity
×No all-in-one create-to-publish tool
Motivations
Creative income that compounds
Audience growth & recognition
His music reaching a wider audience
Behaviours
Batches content on weekends
Repurposes one video across 4 platforms
Tracks watch-time religiously
Section 04 · Persona 02

Rachel Lim

Casual Player & Parent

Age
34 years old
Location
Singapore
Education
Bachelor, Communications
Tech
Med-High, screen-cautious
Bio

Rachel is a 34-year-old parent who wants her kids to learn music in a fun, interactive way — not passively watching videos. She plays music herself and believes active engagement (like learning piano or rhythm) sticks better than passive listening.

Goals
+Learn songs by playing rhythm and piano games
+Earn points to unlock new songs without paying
+Share discoveries with family and friends
+Something safe she can dip into anytime
Frustrations
×Most music apps are passive listening — no active learning
×Paywalls block casual players — can't try before buying
×Limited time to play means slow progress
×Wants to learn songs she loves, not just any song
Motivations
Music is a lifelong skill — wants kids to enjoy learning it
Plays piano herself; values hands-on learning
Quality family time
Behaviours
Plays music herself; values hands-on learning
Plays during commute or lunch break
Shares music discoveries with family and friends
Section 04 · Persona 03

Mr. Farid Rahman

Institutional Adopter / Group Buyer

Age
42 years old
Location
Singapore
Education
Masters in Education (NIE)
Tech
High — evaluates platforms for a group
Bio

Mr. Farid Rahman is a music enthusiast and community organizer who wants to introduce engaging music experiences to groups — whether friends, family, or community members. He's looking for a platform that's easy to share, fun to play, and doesn't require musical expertise.

Goals
+Introduce friends and community to music gaming
+Build a shared leaderboard and friendly competition
+Easy song discovery and sharing
+Track group progress and celebrate wins
Frustrations
×Hard to find one platform where everyone can play together
×Most music platforms are designed for solo play
×Unclear how to invite others or track group progress
×Wants to share discoveries but no easy way to do it
Motivations
Values community and shared experiences
Comfortable with tech but prefers simplicity
Enjoys sharing discoveries with his network
Behaviours
Hosts game nights with friends
Tracks leaderboard rankings
Recommends apps to his network
Section 04 · Different Needs, Unified Solution

Persona Comparison

AspectMarcus TanRachel LimMr. Farid Rahman
Primary GoalFast, monetizable music videosFun way to learn music by playingEngaging, safe platform to adopt
Key MetricTime-to-publishSongs played & learnedGroup engagement
Pain PointTool fragmentation, copyrightPassive apps, paywallsPassive tools, group setup
Platform UseCreator StudioMusic Game (Rhythm + Piano)Marketplace + Group Admin
Success MeasureVideos shipped & sharedSongs her kids play unpromptedRolled out to a whole group
Owned BySachinKiu Fa AnImmanuel Khoo
Section 05 · Platform Site Map

Information Architecture

Marketplace is included as the ecosystem bridge connecting Creator Studio, Music Game, Learning Hub and group adoption.

Lumina Studio — Home
Creator Studio
Write Lyrics
Compose Music
Cinematic Render
Music Video View
Publish to Marketplace
Marketplace Bridge
Discover Songs
Buy / Unlock Songs
Play to Earn Credits
Creator Uploads
Group Content Access
Music Learning Game
Game Home
Song Library
Rhythm Game
Piano Mode
Create Song
Performance Results
Learning Hub
Science
Music
Chinese 华语
Citizenship
History
Recipes & Culture
Story Kiosk
Avatar Creation
Pre-Survey CRM
360° Scene Library
Heritage & Travel
Heritage Show
Source Songs
Production References
Travel Around SG
Walking Trails
Partner CRM
Architecture Logic   Creator Studio produces songs and music videos → Marketplace distributes and monetizes them → Music Game turns them into playable rhythm/piano experiences → Results award credits → credits return to Marketplace, forming a full create-play-earn loop.
Section 05 · Full Create · Play · Earn Loop

User Flow

The flow now connects Sachin's Creator Studio, Immanuel's Marketplace bridge, and Fa An's Music Game into one repeatable ecosystem loop.

1
Screen
Creator Studio
Action
Creator enters a topic / lyrics and generates a song + music video
Decision
Regenerate or approve output?
2
Screen
Music Video Viewer
Action
Reviews generated song, lyrics, scenes and final video
Decision
Keep private or publish?
3
Screen
Marketplace
Action
Published song appears for discovery, preview, purchase and group access
Decision
Buy with credits or play to earn?
4
Screen
Song Library
Action
Player selects a song from Marketplace / library and chooses Rhythm or Piano mode
Decision
Rhythm Game or Piano Mode?
5
Screen
Rhythm Game / Piano Mode
Action
Player learns the song through active gameplay, combos and note feedback
Decision
6
Screen
Results
Action
Score, accuracy, combo and earned credits are shown
Decision
Spend credits or keep playing?
7
Screen
Marketplace
Action
Player uses earned credits to unlock songs originally uploaded by creators
Decision
Buy song or create own?
8
Screen
Create Song / Creator Studio
Action
Player can become a creator by making their own song
Decision
Keep private or publish to Marketplace?
Loop Summary   Create → Publish → Discover → Play → Earn Credits → Buy / Unlock → Create Again → Publish or Keep Private
Section 05 · Blueprint 1 — Creator Flow

Service Blueprint · Creator

1 · Setup
2 · Topic & Style
3 · AI Generation
4 · Review
5 · Export & Sell
User Actions
Login / start free trial
Enters topic, picks style & voice
Monitors progress bar (~10–15 min)
Watches video, checks accuracy
Downloads MP4/MP3 or publishes
Frontstage (UI)
Auth screen + onboarding wizard
Topic input, style dropdowns, Generate
Animated progress + time estimate
Video player + synced lyrics panel
Export menu, license, share link
Backstage
Validate credentials, check tier
Parse input, inject SG-context prompts
Gemini → Lyria → Veo 3 orchestration
Align audio with video, embed subs
Compile files, generate listing
Support Systems
Supabase Auth
Prompt-template engine DB
GPU cloud render (ComfyUI)
AWS S3 + RDS — media, user data & marketplace records
Stripe payments + creator payouts
Section 05 · Blueprint 2 — Learner Flow

Service Blueprint · Learner

1 · Discover Video
2 · Play Game
3 · Earn Points
4 · Leaderboard
5 · Unlock Content
User Actions
Selects a music video to play
Hits notes to the beat of the song
Completes song, views final score
Checks ranking among peers
Spends points on avatar items
Frontstage (UI)
Video player + game-mode options
Hit feedback (Perfect / Good / Miss)
Rank screen + points animation
Highlights user's current position
Equips new item to avatar
Backstage
Fetch video metadata + beatmap
Calculate accuracy & combo multiplier
Update user profile database
Query global / school ranking DB
Deduct points, save inventory state
Support Systems
Essentia.js beat analysis
Web Audio scoring engine
Supabase Auth — login/session only
AWS user profile & credits store
AWS leaderboard service
AWS inventory / rewards database
Section 05 · End-to-End Service Ecosystem

Combined Service Blueprint

Blueprint 1 — Creator Journey (Marcus, Stakeholder)
Setup & Login
Topic & Style
AI Generation
Review
Export & Sell
Shared media library Beat-mapped songs feed the game Cloud storage & CDN
Blueprint 2 — Learner Journey (Rachel / Farid's students)
Discover Video
Play Game
Earn Points
Leaderboard
Unlock Content
Key Takeaway  Both blueprints share the same content engine and storage — a creator's output (Blueprint 1) becomes a learner's playable, gamified experience (Blueprint 2), closing the loop between production and education.
Part B

Individual Component

Persona · Journey Map · Wireframes · Hi-Fi Prototype & Design Rationale

Sachin
Creator Studio · Marcus Tan
Kiu Fa An
Music Game · Rachel Lim
Immanuel Khoo
Learning Hub · Mr. Farid
Individual Component · Member 01

SELVAKUMAR Sachin

Creator Studio & AI Pipeline · Persona: Marcus Tan (Content Creator)

01
Persona & Journey Map
02
Low-Fi → Hi-Fi Wireframes
03
Design Rationale & AI Declaration
Sachin · Assigned Persona

Persona · Marcus Tan

Role
Content Creator & Side Hustler
Age · Location
28 · Singapore
Tech Savviness
High — YouTube, TikTok, CapCut daily
"I need to make my creative work pay rent — but every minute spent learning to edit is a minute I don't earn."
Goals
+Topic → polished 3-min video in under an hour
+Grow a heritage channel, keep weekends
+Monetise without losing authenticity
Pain Points
×Pro tools siloed and slow
×Manual lyric writing kills momentum
×Copyright takedowns hurt velocity
Motivations & Behaviours
Creative income that compounds
Batches content on weekends
Repurposes one video across 4 platforms
Need Statement
Marcus needs an all-in-one, speed-first creation pipeline so he can turn a topic into a shareable, copyright-safe SG music video in minutes — keeping full creative control.
Sachin · Marcus Tan · Before Lumina Studio

User Journey Map · Before App

Goal: Create and monetise SG-themed music videos manually while juggling limited time, tools and skills

01 Idea
Weekend
02 Research
Day 1
03 Create Audio
Day 2–4
04 Make Video
Day 5–7
05 Publish
Week 2
06 Monetise
Month 2+
Touchpoint
Thinks of an SG heritage song idea after work
Searches YouTube, Google and old references for inspiration
Tries lyrics, melody and vocals using separate tools
Uses CapCut / stock clips to build a rough music video
Uploads to YouTube and manually writes title, tags and description
Checks views, waits for ad revenue, looks for buyers manually
Emotion
Pain
Good idea, but no clear starting workflow
Too many references; wastes hours searching
No music skills; tools feel too technical
Editing takes too long; visuals feel inconsistent
Copyright and licensing feel unclear
No marketplace or earnings dashboard
Opportunity
Give starter prompts and SG topic templates
Recommend verified SG references automatically
One guided flow for lyrics, song and vocals
Auto-generate cinematic video scenes
Show licensing status before publishing
Add marketplace, analytics and earnings view
Sachin · Marcus Tan · After Lumina Studio

User Journey Map · After App

Goal: Build $300–1000/month passive income from SG-themed AI music

01 Discovery
Week 1
02 Trial
Week 1–2
03 Validation
Week 2–3
04 Consistency
Week 4–8
05 Monetization
Month 3
06 Scaling
Month 4–6
Touchpoint
LinkedIn post on AI music tools → finds site
Free trial: "Singapore Water Story Song"
Uploads to YouTube, shares with friends
Creates 5 more songs, Sunday routine
First ad revenue + sells 2 licenses = $47
Reaches $320/mo, upgrades to annual
Emotion
Pain
Too many tools, no visible pricing
Too many settings, licensing unclear
No community, unsure next steps
Topic fatigue, no analytics
Manual distribution, no earnings view
Growth plateau, hard to reach schools
Opportunity
Free trial + SG examples gallery
Guided wizard + auto license cert
Creator forum + trending topics
Content calendar + analytics dash
Marketplace + earnings dashboard
Mastermind groups + school partners
Sachin · Low-Fidelity Wireframes

Creator Studio · Wireframes

Low-Fidelity Wireframe
Component Breakdown
1
Topic Input — free-text field feeding the Gemini 2.5 prompt engine
2
Config Selectors — genre, vocal, render backend preview vs HQ
3
Generation Controls — primary CTA plus progress indicator
4
Output Preview — video player to review before export
Pain Points Covered
3+ hrs searching solved by Song Library filters (<2 min)
ISWC-registered songs show clear licensing status
Music Video View gives cinematic output + share CTA
Sachin · Hi-Fi Prototype & Rationale

Hi-Fi Prototype & Design Rationale

01 · Lumina Home
02 · Creator Studio
03 · Music-Video Viewer
Design Rationale
Speed-First Creation
3-step wizard (lyrics → config → render) collapses 40+ hours to under 15 minutes — core value for creators like Marcus.
One-Click Generation
Sensible defaults (genre, BPM, vocal style) let creators skip configuration — immediate gratification and faster publishing.
Marketplace Integration
Finished videos export directly to Creator's Song Library for marketplace publishing — no manual upload friction.
Creator Revenue Share
70% of marketplace sales go to creator — incentivizes quality content and repeat creation.
Sachin · Individual Project

Use of AI Tools & Declaration

AI ToolParts of the WorkHow AI Was UsedMy Use / Adaptation
Gemini 2.5Creator Studio lyric flow, prompt structureDrafted SG-context lyric prompt templates & flow logicReviewed every prompt for cultural accuracy; rewrote for P5 tone
Figma / MakeCreator Studio & Home UI layoutsGenerated layout drafts & component suggestionsCustomised all spacing, colour & hierarchy to our design system
ComfyUICinematic scene generation for music videosGenerated video scenes from text prompts for demo songsSelected, sequenced & stitched clips; verified visual quality
LyriaBacking tracks for demo songsGenerated melody, harmony & instrumentationCurated outputs; matched tempo to rhythm-game beatmaps
AWS (EC2/RDS/S3)Full backend infrastructureArchitected scalable backend from Figma Make prototypeMigrated from Supabase to AWS for production reliability
Declaration  AI tools were used for asset generation and ideation only. All UX research, wireframing, journey mapping and design rationale are my own work. — Sachin
Low-Fidelity · Creator Pipeline (Screens 01–03)

Create Flow — Topic to Music Video

01 · Home Hub
02 · Creator Studio
03 · Video Viewer
01 · Home — Hub Landing

Entry hub ("Compose, Create, Captivate") routing to Creator Studio or the Music Game. States: empty (no productions yet) and populated — production stats, How-It-Works, Studios & Modules grid, live render progress, and a library of finished songs.

02 · Creator Studio

3-step AI wizard. Step 1 Lyrics: paste/write → "Enhance with AI" chat asks clarifying questions → approved lyrics. Config: genre, BPM, key, vocal (Soprano AI + Choir), chord progression, scene list. Step 2 Render Pipeline: Narrative / Continuous / Text-to / Image-to-Cinematic + voice → Generate, then live progress.

03 · Music Video Viewer

Cloud render tracker (e.g. 2/4 scenes), scene-by-scene preview, then the full player with synced Lyrics · Composition · Scenes panels. Shows ComfyUI/WAN render status cards, retry, and the in-browser FFmpeg "Merging clips" step; empty state offers "Generate Video".

Individual Component · Member 02

KIU Fa An

Music Game · Play & Learn · Persona: Rachel Lim (Casual Player & Parent)

01
Persona & Journey Map
02
Low-Fi → Hi-Fi Wireframes
03
Design Rationale & AI Declaration
Kiu Fa An · Assigned Persona

Persona · Rachel Lim

Role
Casual Player & Parent
Age · Location
34 · Tampines, Singapore
Tech Savviness
Med-High — confident, screen-cautious
"My daughter remembers a song after one listen — if she can play it and learn the notes, it sticks even better."
Goals
+Turn passive screen time into active music play
+Help her kids — and herself — learn songs by playing
+Earn points by playing to unlock more songs free
Pain Points
×Most music apps are passive, not playable
×Paywalls block casual players from songs
×Only has fragmented time to play
Motivations & Behaviours
Her children's academic confidence
Pre-screens every app before installing
Shares finds in parent WhatsApp groups
Need Statement
Rachel needs a fun, mobile-friendly way to learn music by playing — rhythm and piano games that teach the notes — free to start and safe for her kids.
Kiu Fa An · Rachel Lim · Before Lumina Studio

User Journey Map · Before App

Goal: Help her child learn songs actively, safely and affordably without relying on passive music apps

01 Need
02 Search
03 Try App
04 Paywall
05 DIY
06 Practice
07 Share
08 Give Up
Touchpoint
Wants daughter to learn a song through play
Searches YouTube, App Store and parent groups
Downloads a music / piano learning app
Finds good songs locked behind subscription
Tries GarageBand / keyboard tutorial manually
Child watches but does not practise actively
Sends links to family / parent WhatsApp group
Stops using the app after a few days
Emotion
Pain
Wants active learning, not just watching
Too many apps, unclear which is safe
Most apps feel passive or too difficult
Cannot try enough songs before paying
High music barrier; setup takes too long
No feedback, score or motivation loop
Hard to share progress meaningfully
No habit forms; child loses interest
Opportunity
Show rhythm + piano as active learning
Curated safe song library for families
Simple game-first onboarding
Free songs + points-based unlocks
No-skill piano guide with falling notes
Instant score, combo and progress feedback
Shareable results and family challenges
Daily streaks and short practice sessions
Kiu Fa An · Rachel Lim · After Lumina Studio

User Journey Map · After App

Goal: Discover Lumina, learn songs by playing, earn points to unlock more — and get her kids hooked

01 Problem
02 DIY Fail
03 Discovery
04 Trial
05 Routine
06 Community
07 Monetize
08 Collab
Touchpoint
Daughter struggles with P2 Chinese
GarageBand attempt, 4 hrs, gives up
FB parents group → Lumina link
Free trial "HDB Homes" song
2 songs/week, Wed schedule
Posts on TikTok, 50+ comments
Earns points, unlocks a song for free
Co-creates album with teacher friend
Emotion
Pain
No localized content
High music barrier
Doubts AI quality
Anxious during wait
Runs out of topics
No way to share templates
External store hassle
No collaboration features
Opportunity
Creator-led discovery on socials
"Zero skills" messaging
Audio samples + free trial
Lyric preview + tips
Topic generator by age
Shareable templates
Built-in storefront
Multi-user workspaces
Kiu Fa An · Low-Fidelity Wireframes

Music Game Home · Wireframes

Low-Fidelity Wireframe
Component Breakdown
1
Hero Entry Point — introduces IDOL MUSIC ACADEMY and directs users into the game flow
2
Game Mode Cards — Play Song, Create Song, and Piano Mode options for different learning styles
3
Feature Explanation — rhythm game, piano practice, AI song creation, and progress tracking
4
Learning Navigation — clear routes into song library, rhythm game, piano mode, and creation tools
Pain Points Covered
Gamified home page makes learning music feel playful and less intimidating
Piano Mode supports beginners who do not know music theory or GarageBand
Song Library gives Rachel quick access to safe, structured, educational songs
Kiu Fa An · Hi-Fi Prototype & Rationale

Hi-Fi Prototype & Design Rationale

01 · Music Game Hub
02 · Rhythm Game
03 · Piano Mode
04 · Song Library
Design Rationale
SG Music + Karaoke
Client-requested karaoke lyrics following SG songs — feasibly implemented.
Gamification
Score + Combo + Accuracy meets Rachel's need for interactive learning.
Zero Music Barrier
Piano Mode guided keys removes the GarageBand barrier entirely.
MOE-Aligned Library
SG curriculum songs solve the "no localized content" pain point.
Kiu Fa An · Individual Project

Use of AI Tools & Declaration

AI ToolParts of the WorkHow AI Was UsedMy Use / Adaptation
Gemini 2.5Persona content, journey-map draftingGenerated persona structure & journey stage ideasRewrote with real interview data; verified SG context
Figma / MakeGame Hub, Rhythm & Piano UISuggested game-screen layouts & componentsDesigned scoring HUD, lane visuals & states myself
LyriaBacking tracks & beatmaps for game modesGenerated melodies for rhythm-game songsBeat-mapped tracks with Essentia.js; tuned difficulty
Microsoft CopilotResearch summarising & report wordingSummarised UX articles, improved clarityRe-worded for accuracy; checked against sources
Declaration  AI tools were used for asset generation and ideation only. All UX research, wireframing, journey mapping and design rationale are my own work. — Kiu Fa An
Low-Fidelity · Game & Practice (Screens 04–07)

Play Flow — Idol Music Academy

04 · Game Home
05 · Song Library
06 · Rhythm Game
07 · Piano Mode
04 · Music Game Home

"Idol Music Academy" landing — three modes (Play Song, Create Song, Piano Mode) plus feature cards: Rhythm Game, Piano Practice, AI Song Creation, Score & Progress.

05 · Song Library

Song picker with difficulty filter, custom-URL / file upload, and star-rated song cards. Two views: Rhythm mode and Piano mode; custom-URL-ready state validates the track before play.

06 · Rhythm Game

4-lane falling-note gameplay. States: difficulty select → "Analysing your track" beat-detection → playing (Score / Combo / Accuracy HUD) → AutoPlay demo → Paused overlay.

07 · Piano Mode

Virtual keyboard with a falling-note guide. Note-density selector (2-bit Chill → Mix Chord-chaos); playing state shows falling notes, Score / Streak / Hits, and an upcoming-notes queue.

Individual Component · Member 03

Immanuel Khoo

Marketplace & Monetization Engine · Persona: Mr. Farid Rahman (Institutional Adopter)

01
Persona & Journey Map
02
Marketplace Wireframes
03
Monetization Engine & AI Declaration
Immanuel Khoo · Assigned Persona

Persona · Mr. Farid Rahman

Role
Institutional Adopter / Group Buyer
Age · Location
42 · Singapore
Tech Savviness
High — evaluates & rolls out platforms for a group
"My learners actually remember a melody they played. If a platform lets them learn music by playing — and I can license it simply for a group — I'm in."
Goals
+Get a group of learners playing & learning music
+Simple group licensing & credit top-ups
+A safe, moderated marketplace of songs
Pain Points
×Most "learning" tools are passive & dry
×Hard to justify cost without engagement proof
×Worried about content safety & moderation
Motivations & Behaviours
Backs tools that drive real engagement
Runs a small pilot before rolling out
Champions what works to peers
Need Statement
Farid needs an engaging, moderated, easy-to-license platform where learning happens through play — so he can bring it to a whole group and see them actually stick with it.
Immanuel Khoo · Mr. Farid Rahman · Before Lumina Studio

User Journey Map · Before App

Goal: Find a safe, engaging music-learning tool that can work for a group, not just one person

01 Need
02 Research
03 Trial
04 Group Test
05 Evaluation
06 Decision
Touchpoint
Wants a music activity for friends / community group
Searches for music-learning apps and rhythm games
Tests a few apps alone before showing others
Shares one app with group through WhatsApp / link
Checks if people actually learn, return and stay engaged
Drops the idea or keeps looking for a better platform
Emotion
Pain
Needs something fun but still meaningful
Too many solo apps, not group-focused
Apps feel passive, dry or too gimmicky
No shared leaderboard or group progress view
Hard to prove engagement equals learning
Pricing, safety and sharing are unclear
Opportunity
Position as play-to-learn, not just entertainment
Show group-use examples and safe catalogue
Offer instant demo with rhythm + piano modes
Add group rooms, invites and leaderboard
Use scores, accuracy and progress as proof
Provide clear group pricing and moderated links
Immanuel Khoo · Mr. Farid Rahman · After Lumina Studio

User Journey Map · After App

Goal: From discovering the platform to rolling the play-to-learn marketplace out to a group

01 Discover
02 Try the Game
03 See Them Learn
04 Buy / Top-Up
05 Roll Out
06 Advocate
Touchpoint
Finds Lumina via a creator's YouTube video
Plays a song in Rhythm + Piano mode himself
Group plays, earns points, retains the melody
Buys songs / tops up AI credits for the group
Sets up a group space & leaderboard
Recommends it to peers, shares songs
Emotion
Pain
Skeptical of "just another app"
Worried it's too gimmicky to teach
Needs proof engagement = learning
Unclear group pricing / credits
No group space or progress view
Hard to share songs safely
Opportunity
Creator-led discovery on YouTube
Instant, fun first-play (no setup)
Score/accuracy shows skill growth
Simple credit packs & group billing
Group leaderboard + admin dashboard
Shareable, moderated song links
Immanuel Khoo · Low-Fidelity Wireframes

Learning Hub · Wireframes

Low-Fidelity Wireframe
Component Breakdown
1
Curriculum Modules — Science, Music, Chinese, Citizenship, History, and Recipes & Culture cards
2
Readiness Indicators — progress bars show how ready each module is for classroom adoption
3
Reference Inspiration — connects the learning hub to MOE map games, Singapore Story exhibitions, and heritage playlists
4
Partner Integration — designed for MOE LMS, GovTech, MCCY, Science Centre, and other education partners
Pain Points Covered
Helps Farid find curriculum-ready learning materials faster instead of spending hours searching
Organizes learning content by subject so teachers can quickly match lessons to classroom needs
Supports school adoption through LMS-ready modules and education partner alignment
Immanuel Khoo · Hi-Fi Prototype & Rationale

Hi-Fi Prototype & Design Rationale

01 · Learning Hub
02 · Story Kiosk
03 · Heritage Show
04 · Travel Around SG
05 · Marketplace
Design Rationale
Song Discovery & Filtering
Learning Hub displays all songs with difficulty levels, creators, and previews — helps players find songs matching their skill and interests.
Difficulty Progression
Easy, Medium, Hard modes let players progress at their own pace — builds confidence and skill retention through play.
Creator Visibility & Leaderboards
Creator profiles show rank, published songs, and earnings — incentivizes quality and builds community trust.
Play-to-Earn Credits
Scoring well in rhythm/piano games earns credits that unlock songs or fund AI video generation — removes paywall friction.
Ad-Funded Energy Loop
When energy runs out, watch ads to restore it — creates sustainable revenue while keeping gameplay free-to-play.
Shared Marketplace Bridge
Marketplace connects creator-made songs from Sachin’s Creator Studio to Fa An’s playable music game, while giving Farid a moderated content library for group adoption and licensing.
Immanuel Khoo · Individual Project

Use of AI Tools & Declaration

AI ToolParts of the WorkHow AI Was UsedMy Use / Adaptation
Claude / GeminiMonetization model & persona / journeyDrafted energy-economy options & revenue logicChose & tuned the model; rewrote with our numbers
Gemini 2.5Unit-economics & break-even projectionsEstimated ad CPM vs compute cost scenariosAdjusted to real API/render costs; sanity-checked
Figma / MakeMarketplace, leaderboard & checkout UIGenerated layout drafts & component ideasDesigned final flows, energy gate & checkout myself
Essentia.jsKaraoke subtitle word-by-word syncAudio analysis for timestamp alignmentImplemented client-side; tested with real tracks
Declaration  AI tools were used for asset generation and ideation only. All UX research, wireframing, journey mapping and the monetization design are my own work. — Immanuel Khoo
Low-Fidelity · Results & Monetization (Screens 08–09)

Earn Flow — Results, Leaderboard & Marketplace

08 · Results
09 · Marketplace
08 · Results Screen

Post-game results with an animated rank grade (S / A / B / F), final score, accuracy, max combo, star rating, and a hit breakdown (Perfect / Good / Miss). Actions: Play Again · Choose Song · Home. The grade and points feed the leaderboard multiplier.

09 · Gamified Marketplace

The monetization loop in one flow:

1
Browse — "Discover AI Music Videos", AI-credit balance, Trending cards with audio preview.
2
Play to earn — rhythm game with a Global Leaderboard and a rank-based point multiplier (e.g. 2.5×).
3
Energy gate — Out-of-Energy → "Watch Ad to Restore Energy" (+credits) → Energy Restored.
4
Checkout — points buy the track (leaderboard-rank discount); choose burn-in animated karaoke subtitles or a separate subtitle file; IWSC watermark; Download Started confirmation.
Low-Fidelity Wireframes · Complete Screen Inventory

Screen Gallery — All 9 Core Screens

Reverse-engineered low-fidelity wireframes covering every core screen of the working Lumina Studio build — structure & flow first, before hi-fi polish.

01 Home Hub
02 Creator Studio
03 Video Viewer
04 Game Home
05 Song Library
06 Rhythm Game
07 Piano Mode
08 Results
09 Marketplace
Interactive Hi-Fi Prototype · Additional Platform Modules

More Live Screens

Beyond the three core flows — these supporting modules are also live, interactive screens in the working build.

Heritage Show
Cinematic render showcase for the client's heritage songs.
Travel Around SG
Interactive map module linking songs to places.
Story Kiosk
Avatar creation & 360° story capture.
Learning Hub
Module library that surfaces songs to learn & play.
Section 07 · Brand Palette & Usage

Colour System

Primary
Purple Primary
#A78BFA
Primary actions, borders
Purple Deep
#7C3AED
Gradients, hover states
Pink Accent
#EC4899
CTAs, highlights
Pink Deep
#DB2777
Gradient ends, active
Secondary
Blue
#3B82F6
Information, secondary
Green
#10B981
Success, positive
Orange
#F59E0B
Warnings, badges
Red
#EF4444
Errors, destructive
Neutrals
Background
#0A0818
Surface
#1E1B4B
Border
A78BFA·30%
Text Primary
#FFFFFF
Text Secondary
F4F4F8·70%
Section 07 · Font Hierarchy & Usage

Typography

Space Grotesk
Weights 700, 800 · Modern, bold, tech-forward · Display headings & titles
Lumina Studio
72px / 800 / uppercase
Module Title
24px / 700
Inter
Weights 300–700 · Clean, readable, versatile · Body, UI & buttons
Body paragraph text with excellent readability across the platform.
16px / 400
Button Label
14px / 600
Type Scale
Aa
Display
72px
Aa
H1
48px
Aa
H2
32px
Aa
H3
24px
Aa
Body Lg
18px
Aa
Body
16px
Aa
Small
14px
Section 07 · Reusable UI Elements

Component Library

Button · Primary
Default · Hover · Active · Disabled
Generate Song
Button · Ghost
Glass, blur, purple border
Learn More
Card · Feature Tile
Glass bg, gradient border
Glassmorphic tile, 12px radius
Input · Text
Focus, error, disabled
Enter topic…
Progress Bar
Linear · circular · stepped
Chips / Tags
Pill, filter, status
GeminiVeo
Toast Notification
Success · error · warning · info
Song generated successfully
Numbered Badge
Steps, ranking, annotations
01
02
Section 08 · High-Level Overview

System Architecture

Presentation Layer
React 18 + TypeScript
Pages · Components · Routing · State — Creator Studio, Game & Marketplace UI
Application Layer
Business Logic
Game engines · Web Audio beat detection · AI orchestration · points/energy economy
Integration Layer
API Clients
Gemini · Lyria · ComfyUI · Stripe · Ad-network clients
AI Services
Generation APIs
Gemini 2.5 (lyrics) · Lyria (music) · Veo / ComfyUI (video) · Essentia.js (audio)
Infrastructure
AWS + Supabase
AWS EC2 (compute) · RDS (data) · S3 (media) · GPU cloud render (ComfyUI) · Supabase (auth, marketplace, leaderboards)
Section 08 · From Idea to Playable, Purchasable Song

Song Generation Flow

1
User Input
Enters a topic or idea
→ Raw text
2
Gemini 2.5
Enhances idea into structured lyrics
→ Song lyrics
3
Lyria
Composes melody & vocals from lyrics
→ Audio
4
Essentia.js
Analyses audio, extracts beat map
→ Beat map
5
Veo / ComfyUI
Generates cinematic scene clips
→ Video clips
6
FFmpeg + Karaoke Sync
Merges clips, syncs word-by-word subtitles
→ Final MP4
7
AWS S3
Stores & streams media via CDN
→ Streaming URL
8
Game + Marketplace
Beat map powers the game; song lists for sale
→ Playable & purchasable
Section 08 · Implementation Highlights

Key Technical Features

Rhythm Game Engine
React · Canvas · Web Audio API · Essentia.js

Real-time beat detection, falling-note generation, hit detection with timing windows, combo system and smooth canvas rendering.

Approach: requestAnimationFrame loop, audio-context timing, debounced input.
Piano Mode
Web Audio API · Tone.js

Virtual piano with sound synthesis, falling-note guide, note highlighting and adjustable note density.

Approach: pre-loaded samples, oscillator pooling, CSS-transform feedback.
AI Generation Pipeline
Gemini 2.5 · Lyria · Veo / ComfyUI

Multi-step pipeline: lyric enhancement, music composition, video generation, FFmpeg merge and karaoke sync.

Approach: progress indicators, background jobs, retry logic, fallbacks.
Cloud Backend
AWS EC2 · RDS · S3 · Supabase

Compute orchestration, metadata, media storage and a marketplace / leaderboard data layer with streaming delivery.

Approach: migrated off edge functions to AWS; CDN caching, signed URLs.
Section 08 · How the Backend Changed

Architecture Evolution

We outgrew our first setup and re-platformed onto AWS for heavy AI render & storage.

Before — v0
Supabase Edge Functions
Basic PaaS hosting
Inline calls to AI APIs
Limited for long GPU renders
Re-platformed
Moved heavy compute, data & media off edge functions onto a scalable AWS stack with GPU render.
Now — AWS
+AWS EC2 — API & job orchestration
+AWS RDS — metadata & transactions
+AWS S3 — video / audio storage + CDN
+GPU cloud render (ComfyUI)
+Supabase — auth, marketplace, leaderboards
Expected pipeline (design target)  Lyrics ~30s · music 1–3 min · video 8–15 min · karaoke sync ~2 min · encode & store ~1 min  →  a full video in well under the 40+ hours it takes by hand.
Section 08 · Protecting Users & Creators

Security & Privacy

Authentication & Keys
API keys in server env, never in client code
Supabase auth & session handling
Server-side AI calls only
Data Protection
Minimal data collection
HTTPS everywhere, encrypted in transit
Stripe handles payment data (PCI)
Content & Moderation
Input validation & sanitisation
Automated filtering on generation
IWSC watermark + AI-generated labelling
Compliance (Aim)
PDPA-aligned by design
Clear creator licence terms at upload
Account data export & deletion
Section 09 · Proposed 12-Month Plan

Product Roadmap

Q3 2026
Polish & Launch
Creator Studio + Video Viewer v1
Marketplace + energy/ads economy live
Migrate Supabase edge → full AWS
Public beta with first creators
Q4 2026
Scale & Monetize
Mobile apps (iOS + Android)
Global leaderboards & rank multipliers
Creator payouts (70/30) via Stripe
Ad-funded energy loop at scale
Q1 2027
Enhance & Engage
Karaoke subtitle pipeline (GA)
Live multiplayer rhythm battles
Creator analytics & earnings dashboard
Friend challenges & social sharing
Q2 2027
Grow the Economy
Open creator API & embeds
Premium AI-credit packs
Adaptive difficulty & recommendations
Regional creator expansion
Section 09 · How We Measure Success

Success Metrics & Targets

Illustrative launch targets — the loop only works if engagement funds the compute.

Player Engagement
10,000+
Daily active players
15+ min
Avg. session duration
80%
Song completion rate
60%
7-day return rate
Creator Economy
5,000+
Songs in marketplace
1,000+
Active creators
70/30
Creator revenue share
40h→15m
Time per music video
Monetization (Unit Economics)
$3–5
Ad CPM (rewarded video)
≥100%
Compute cost covered by ads*
F2P
Free to play, ads on energy refill
Points
→ AI credits or song purchase
Platform Health
99.9%
Uptime
< 0.1%
Error rate
> 95%
Render-job success
< 5%
Players needing support
Section 09 · What We Build On & Where We Reach

Ecosystem & Distribution

We're not claiming corporate partnerships — these are the providers we build on and our routes to market.

Today — Foundations
Violet Tay · RememberOurStoriesInSG
Client & first creator — generates videos for her own songs, distributes on YouTube
Client
NYP · SCCCI PoC Pilot
Academic project context & proof-of-concept pilot (Assignment 1)
Project
AI Providers — Gemini · Lyria · Veo / ComfyUI
Generation APIs we call (not partnerships)
Built on
AWS · Supabase · GPU Cloud
Compute, data, media storage & GPU render (ComfyUI)
Infra
Planned — Reach & Revenue
Ad Network (e.g. Google AdMob)
Rewarded video on energy refill — funds the free-to-play loop
Q4 2026
Stripe Payments
Creator payouts & premium AI-credit packs
Q4 2026
App Stores (iOS · Android)
Mobile distribution for the game
Q4 2026
Music Distribution (e.g. DistroKid)
Push marketplace songs to streaming platforms
2027
Section 09 · Anticipating Obstacles

Challenges & Mitigation

Compute Cost vs Ad Revenue
High
The whole model hinges on ad revenue covering AI/render costs.
Cache & reuse generated assets
Energy limits pace expensive calls
Premium credits subsidise heavy users
Content Moderation
High
User-generated songs & videos in the marketplace.
Automated filtering on generation
Human review for flagged uploads
Community reporting tools
Copyright & IP
Medium
Ownership of AI-generated & purchased songs.
IWSC watermark on purchased tracks
Clear AI-generated labelling
Creator licence terms at upload
Ad-Dependency Risk
Medium
Over-reliance on a single revenue stream.
Diversify: credits, marketplace cut
Cap ad frequency to protect UX
Optional ad-free premium tier
Data Privacy
High
PDPA compliance for accounts & payments.
Minimal data collection
Encrypted storage & transit
Export & deletion tools
Each risk has an owner & review cadence in the team's project log.
Section 10 · Group Project · Academic Integrity

Use of AI Tools & Declaration

AI ToolParts of the WorkHow AI Was UsedExample PromptsOutput & Our Use
Gemini 2.5 FlashIdeation, persona drafting, lyric & rationale writingIdea generation, structuring narrative, drafting content"Give SG-context lyric ideas for a P5 HDB topic"Feature ideas, persona drafts — reviewed, rewritten & verified by us
Imagen 3UI mockups, 360° scene concept artGenerating visual assets & references"Clean dashboard UI for a learning hub"Reference images — final UI designed by us
ComfyUI (GPU cloud)Cinematic video rendering & pipelinesAdvanced render of complex SG scenes"High-quality cinematic still frame of {scene}"Rendered clips — curated, sequenced & fact-checked
Suno / LyriaMusic generation, beatmaps for gameAudio synthesis & backing tracks"Upbeat children's song about Singapore hawkers"Tracks — beat-mapped & tuned for gameplay
Microsoft CopilotResearch summarising, report wordingSummarising articles, improving clarity"Summarise NN/g findings on system status"Summaries — reworded & checked against sources
Academic Integrity Declaration

"We declare that this assignment is our original work. AI tools were used strictly for asset generation and ideation, as permitted by the module guidelines. All UX research, wireframing, journey mapping and design rationale are our own intellectual property." — Sachin · Kiu Fa An · Immanuel Khoo

Section 10 · What We Accomplished

Key Takeaways

A Complete Creator Platform
+End-to-end: create a song → play to learn it → earn from it
+Three connected pillars — Create, Play & Earn
+Three personas with tailored journeys
+A real, working full-stack build — not just mockups
Cutting-Edge Technology
+Latest AI models (Gemini 2.5, Veo, Lyria)
+Modern stack (React 18, TypeScript, Tailwind v4)
+Real-time gameplay at 60fps
+Scalable cloud architecture
User-Centered Design
+Research informed every decision
+Iterative process from lo-fi to hi-fi
+Accessibility & inclusivity prioritised
+Delightful micro-interactions
Measurable Impact
40h→15m
Creation time
70/30
Creator revenue share
F2P
Ad-funded energy loop
3
Pillars, one platform
Section 10 · Questions & Discussion

Thank You

Open for questions — let's discuss Lumina Studio

Sachin
Creator Studio & AI Pipeline
Kiu Fa An
Music Game & UX Research
Immanuel Khoo
Marketplace & Monetization
Live Prototype  musicprojectcreate.vercel.app

IT2114 Digital User Experience Design — Assignment 1