Refinement

Feedback 1 - Mobile device lag

“Ahhh! It freezes for 5-10 seconds when I click the collection modal on my iPhone! Sometimes my browser just crashes entirely! 😫”

— Usability Tester (Mobile)

Root Cause Analysis

Compute overload

CPU/Memory spikes caused by simultaneous 3D load & export on mount.

Memory leak

Blob URLs lingering without revocation, increasing GC pressure.

Resource contention

GLTFExporter blocking main thread, dropping UI frames during swipes.

Engineering Solutions

General Approach: Compressed assets + Lazy loading pipeline. Modals now render placeholders first, upgrading visual fidelity progressively.

A

Blob-first Cache

Stored raw Blobs instead of strings. Added LRU cache (32 entries) with useEffect cleanup for URL revocation.

B

Concurrency Queue

Implemented an async semaphore. Serialized heavy tasks to a fixed capacity of 1 for background processing.

C

Progressive Activation

Only mount active + neighbor slides. Heavy models deferred via requestIdleCallback with placeholders.

D

Prop Consolidation

Lifted configuration logic to modal root to prevent redundant localStorage reads in children.

Status: Significant improvement, further mobile tuning in progress.

Future Roadmap

Feedback 2 - 3D Gesture Conflicts

“Every time I try to scroll down to see more clothes, I accidentally spin the 3D avatar wildly instead. The page just won't scroll, so frustrating!”

— Usability Tester (Mobile)

The UX Post-Mortem

Interaction Conflicts

Overlapping touch target zones for 3D model rotation (horizontal/vertical) and page scrolling (vertical), leading to frequent accidental inputs.

Thumb-Zone Principle Violation

Frequent "Equip/Buy" actions were placed in hard-to-reach areas of individual cards, making one-handed operation on mobile devices difficult.

Solving Interaction Conflicts: Zone Separation & Action Bar

BeforeAfter

Technical Implementation

Interactive Zone Separation: We disabled full-page vertical scrolling. The top 3D canvas is designated exclusively for gesture-based rotation, while the bottom accessory list utilizes isolated local scrolling (overflow-y: auto).

Fixed Action Bar: High-frequency actions like 'Equip' and 'Buy' were extracted from individual item cards and centralized into a floating Fixed Action Bar at the bottom screen edge (the optimal Thumb-Zone for mobile users).

Feedback 3 - Context-Aware Gamification: The Adaptive Quiz Engine

“The questions were weird. Like, I don't care which classroom is on Floor 4, I just want to know about the campus history! Meanwhile, my senior friend was yawning because she already knew everything.”

— Usability Tester (Visitor & Senior Pair)

The Gamification Post-Mortem

Cognitive Mismatch

A "one-size-fits-all" question bank alienated visitors with technical questions and bored seniors with trivial orientation tasks, disrupting the "Flow" state.

Lack of Personalization

The game felt generic and frustrating, failing to meet the distinct informational needs and cognitive goals of diverse stakeholders (Visitors vs. Students).

Architecture of Personalization: Adaptive Quiz Engine

Visitors

External Stakeholders

Campus culture, history & landmark storytelling

Hidden StoriesArchitectural StylePhoto Spots

Freshmen

The Novices

Survival Hacks & navigating academic facilities

Quickest RoutesFacility AccessStudy Zones

Seniors

The Experts

Hidden architectural details & design mastery

Design RationaleEaster EggsExpert Knowledge

Persona-Driven Content: We implemented an Adaptive Quiz Engine that customizes the narrative: Visitors focus on culture/history, Freshmen on "Survival Hacks" and navigation, and Seniors on hidden architectural details for a sense of mastery.

HCI Rationale (Cognitive Fit): By applying Cognitive Fit, information matches the user's existing knowledge and immediate needs. This Context-Aware interaction shifts the app from a generic directory to a personalized guide, enhancing Inclusivity and long-term engagement.

Feedback 4 - Anti-spoiler Gamification Loop

“I just started using this app, and when I opened the message wall filter menu, I could see the names of all the hidden locations on campus! It completely spoiled the surprise and ruined the fun.”

— Usability Tester (Exploration)

The UX Post-Mortem

Immersion Breaking (Spoilers)

Displaying all hidden locations in the filter dropdown prematurely revealed secrets, breaking the sense of exploration and surprise.

Lack of Progression

Users had full visibility of the locations list without needing to discover the physical NFC tags first.

Solving Spoilers: Progressive Dynamic Filter

BeforeAfter

Technical Implementation

Progressive Dynamic Filter: We transitioned from a static list to a content-aware dynamic list. Unvisited locations on the message wall are masked as "Mysterious Location".

Unlock-Based Options: The filter dropdown now exclusively shows location options that the user has physically unlocked via NFC interactions, preserving the gamified exploration loop.