The Ideation & UX Strategy

The strategy began with a universal human truth: we might struggle to retain daily facts, but we rarely forget the artists behind our favourite music. While major streaming platforms have turned annual listening data into a massive cultural phenomenon, that data remains a passive viewing experience.

The goal of this project was to gamify that data, shifting users from passive spectators into active players, testing their music expertise. By taking direct design inspiration from premium dark-mode streaming aesthetics, the interface instantly feels familiar, sleek, and intuitive.

The Functional Experience

To elevate the experience from a simple children's game, a specialised "A-to-B" matching system was designed. Instead of matching identical pictures, players must actively pair an artist's name with their corresponding song title, forcing the brain to retrieve knowledge rather than just recognise visual patterns. The game keeps users hooked through three escalating tiers of difficulty:

• Level 1: A relaxed grid built to establish player confidence and introduce the mechanics.

• Level 2: The grid expands, the countdown timer accelerates, and a disruptive "remix" feature randomly reshuffles unrevealed cards mid-game to keep players on their toes.

• Level 3: The ultimate test featuring a massive board, tighter time constraints, and a high-reward streak system that awards bonus points for rapid, back-to-back matches.

To maximise user retention and emotional closure, completing the final level rewards the user with a custom music personality profile tailored strictly to their performance speed and accuracy.

Deep Dive: Engineering Journey

The Pattern-Matching Logic

Every time a player flips two cards, a specialised internal script runs to instantly determine whether a match has occurred. This routine serves as the functional heart of the application, managing player actions, scores, and systemic safety.

• Instant Interaction Tracking: The moment a second card is revealed, the interface counts it as an official move. This action tracking is isolated into a dedicated function to keep the codebase modular and cleanly structured.

• The Element Identity System: Rather than performing expensive data lookups across the system, identification data is embedded directly into the visual cards during board generation. When a song card and an artist card share the same identifier, the system immediately recognises a valid match without lagging.

• Event Cleanup: On a successful match, the system plays a tactile audio cue, updates the scoring array, and immediately detaches the interaction triggers from those specific cards. This step ensures that completed pairs become inactive and cannot be clicked again to manipulate the score.

• The Race Condition Shield: To ensure a smooth player experience, a brief visual delay was engineered to allow the flip animations to complete naturally. To prevent the system from getting confused if a player clicks rapidly during this window, the code captures the card identities into isolated temporary variables before safely resetting global tracking indicators.

Scoring System to User Personalities

Upon surviving all three levels, the application triggers a sorting system to calculate which distinct Sound Persona the user has unlocked. This calculation required solving a complex mathematical design flaw.

• The Range Variance Challenge: Initially, player percentages were measured against a generic scale of 0 to maximum points. However, because completing all levels requires successfully matching every card, the absolute minimum score a surviving player can achieve is actually significantly higher than zero. This meant that the lower tiers of the personality profile were mathematically impossible to hit.

• Implementing a Normalisation Curve: To resolve this, a mathematical normalisation curve was introduced. The engine subtracts the absolute minimum achievable score from the user's total and divides it by the true scoring range. This accurately projects any survival score onto a perfect, balanced 0 to 100 percentage scale, making all four personality tiers accessible.

• Defensive Array Management: To evaluate the user's ranking without accidentally modifying the master game data, the application uses modern copying patterns to create an isolated duplicate of the profile tiers. It then sorts these tiers from highest to lowest threshold using an automated comparison function, ensuring that the lookup process accurately checks the highest qualifying ranking first.

Randomisation System

At the start of every new level, the application takes an ordered set of cards and reshuffles them so that no two playthroughs are ever identical. Achieving this required moving past basic, default sorting routines.

• The Statistical Bias Trap: The simplest method to randomise items in programming is using basic, default sorting formulas. However, these formulas suffer from deep statistical bias, causing certain item configurations to appear far more frequently than others due to the way elements are iteratively compared.

• The Fisher-Yates Implementation: To provide an equitable, casino-grade shuffle, the classic Fisher-Yates algorithm was implemented. The system copies the master card list, then loops backward through the elements. For every position, it calculates a mathematically precise random index within the remaining bounds and swaps the elements instantly.

• Optimising with Modern Syntax: The swap mechanic is built using advanced array destructuring syntax, which allows elements to switch places cleanly in a single line of code without requiring a cluttered, temporary storage variable. The function returns a pristine, un-mutated, randomly arranged array ready for layout rendering.

Remix (Shuffle) Engine

The hallmark feature of the greater difficulty tiers is the mid-game remix mechanic. At specific countdown intervals, all unmatched cards physically dance across the page and swap places, completely disrupting the user's spatial memory.

• Interface Interruption Protection: The moment the shuffle triggers, the system immediately locks the interface, stopping the user from clicking anything while cards are moving. If any cards are currently flipped face-up, the system gracefully un-flips them and clears active references to prevent internal system errors.

• Filtering Active Elements: The application queries the page layout and converts the elements into an array. It then applies a filter to exclude any cards already marked as successfully matched. This step guarantees that solved pairs stay exactly where they are, maintaining fairness for the player.

• The Dynamic Element Swap: Swapping live interface elements on a webpage is fundamentally different from rearranging variables in code. If you move Element A directly onto Element B, Element B is lost from the layout tree. To solve this, the script dynamically manufactures an invisible layout placeholder element in memory to act as a physical bookmark. Element A moves to Element B's position, Element B moves to the bookmark's position, and the placeholder is cleanly deleted.

• Multi-Layer Visual Synergy: Once the layout swap is finalised, the engine applies an animation class to the remaining cards, triggering a physical shake animation. A time-delay function watches this animation and unlocks the game board precisely as the movement ends, demonstrating seamless coordination between data logic, time tracking, and visual styling.

Accessibility & Quality Assurance

A great digital product must be usable by everyone. The development cycle included a dedicated phase for strict quality checking and universal accessibility standards:

• Visual Contrast Auditing: Colour selections were passed through contrast checking software to guarantee that all text elements are highly readable and compliant with official digital web accessibility guidelines.

• Screen-Reader Compatibility: Every single visual element includes detailed background descriptions (alt-text) and contextual accessibility labels, ensuring screen-reading software can interpret the application perfectly for visually impaired users.

• Ergonomic Guardrails: Interactive touch elements were significantly scaled up to accommodate natural touch behaviours and remain forgiving for users with reduced physical precision.