UX Research Projects in IslamabadUX Research Projects in Islamabad🎤 Encore — Your Sound, Verified
A concept demo built for the artist/fan/venue platform brief
📌 What This Is
Encore is a front-end concept demo — a single-page, mobile-first web experience designed to show how the platform described in the brief could feel to use. It's not just a mockup of screens; it's a working, interactive build: real animation, real 3D motion, real responsive layout, all in the browser.
The goal wasn't to illustrate "a music app." It was to design around the actual problem stated in the brief: AI and infinite streaming have flooded the market, and the one thing that can't be faked is a room full of real people who showed up for one specific artist. Every design decision traces back to that idea.
🎯 The Core Idea (Signature Concept)
The centerpiece of the whole design is a simple visual metaphor:
Noise → Signature
On page load, the hero section shows a waveform made of random, chaotic bars — representing the flood of AI-generated tracks. Over about 2 seconds, it smoothly resolves into a clean, deliberate waveform shape — representing a real artist's identity emerging from the noise. This one animation is the pitch: your sound survives the flood because it's yours.
That same idea — human signal standing out against synthetic noise — is echoed quietly throughout: in the copy, in the "verified" badges, and in the rotating light-ray silhouette behind the hero text.
🎨 Design System
Color palette (named, not generic defaults):
#0E0B12 Stage — near-black background, like a dim venue
#161019 Stage 2 — slightly lifted panel background
#1F1826 Card — surface color for cards/passes
#FFB84D Amber — warm spotlight accent
#B24BF3 Violet — electric stage-light accent
#F5F0EB Paper — main text color
#6EE7A8 Green — small "verified/confirmed" indicator only
Typography (three roles, chosen for character, not defaults):
Fraunces (serif) → headlines. Warm, a little vintage, feels human rather than corporate
Inter (sans) → body copy. Clean, highly readable at small sizes
IBM Plex Mono → tags, roles, timestamps, eyebrows. Gives a "verified/technical" feel to labels like CONFIRMED · MOBILE
Layout logic: every section either shows the brief's real content (roles, event lifecycle) or reinforces the noise→signature theme. Nothing decorative was added just to fill space.
🧩 Section-by-Section Breakdown
🧭 Nav — sticky, blurred glass background, quick links + waitlist CTA
🎙️ Hero — the noise→signature waveform animation, headline built directly from the brief's own stat (750k tracks/day, 400k AI-made), rotating light-ray performer silhouette as ambient background
📉 The Problem — three animated counting stats (53%, 750k, ~1%) pulled straight from the brief's numbers, plus one closing line of copy
🎫 Who's In (Roles) — three "backstage pass" style cards for Fan (guest → registered → confirmed), Artist (approved, Stripe-connected — marked as the core role), and Local Business (approved, Stripe-connected). Each tilts in 3D toward the cursor
🕒 Before / During / After — the real event lifecycle from the brief, shown as a genuine numbered sequence (this is the one place numbering is justified, since order actually matters here)
🌟 Real People, Real Rooms — a horizontally scrollable roster of fictional artist cards (unique gradient avatars, genre, city) — social proof without using anyone's real photo or name
📱 The App — a tilting phone mockup showing what a confirmed fan actually sees: artist card, live "audio bars," setlist voting, check-in button
🖋️ Footer — simple sign-off
🛠️ What's Actually Used (Tech Stack)
HTML5 — semantic structure, no frameworks
CSS3 — custom properties (CSS variables) for the whole color system, Flexbox layout, clamp() for fluid type scaling, CSS mask-image for the fading carousel edges, keyframe animations
Vanilla JavaScript — no libraries, no build step:
<canvas> + requestAnimationFrame for the waveform animation
IntersectionObserver for scroll-triggered stat counters and section reveals
Mouse-position math for the 3D tilt effect on cards and the phone
Inline SVG — the hero performer silhouette and light rays, hand-built, no external image files
Google Fonts — Fraunces, Inter, IBM Plex Mono
No dependencies, no npm install, no server required — it's three files (index.html, style.css, script.js) that run with a static file server like VS Code's Live Server.
✨ Motion & Interaction Details
🌊 Hero waveform: chaos → order animation on load, then idles with a gentle breathing motion
🔢 Stats count up from 0 the moment they scroll into view
🃏 Role cards & artist cards tilt in 3D toward the cursor, and lift slightly on hover
📲 Phone mockup tilts in full 3D based on cursor position — sells the "real device" feeling
🎇 Background light rays rotate slowly and continuously — ambient, not distracting
🪄 Sections fade/slide in as you scroll, instead of appearing all at once
You can check out my project live here: https://encore-demo-saifullah.netlify.app (https://encore-demo-saifullah.netlify.app/)
It is mobile and web-based. 
