Project Type: Personal UX/UI Concept
Tools Used: Figma · FigJam · Coolors · Google Fonts · Phosphor Icons
Overview: This case study explores the creation of Neural Archive, a soft sci-fi narrative interface project where players step into the role of an AI reconstructing its lost identity through emotional memory logs. The project focused on designing an emotionally-driven UI system that supports immersive storytelling, character evolution, and user interaction with layered emotional data.
Project Goals:
Craft Emotional Depth: Build a UI that reflects shifting emotional states through visuals, animations, and layout.
Encourage Exploration: Let users uncover fragments of memory at their own pace, encouraging curiosity and emotional investment.
Balance Clarity and Mystery: Use layered visual storytelling to leave some entries partially obscured, creating a sense of discovery over time.
Research: The design process began with an exploration of narrative UX, emotional interface systems, and soft sci-fi aesthetics. Inspiration was drawn from titles like Nier Automata and 13 Sentinels, which blend data logs with storytelling. Key design questions focused on how to convey emotion non-verbally through color, micro-interactions, and visual feedback.
Design Process:
1. Ideation and Wireframing: Early wireframes mapped out the memory log system, emotional tagging, and timeline-based navigation. The focus was on usability and maintaining a strong emotional tone without overloading the player.
2. User Flows: A simple user journey was mapped:
→ Open memory log → Select entry → View emotional tag → Track emotional evolution → Return to gameplay.
3. UI Design: The visual language emphasizes cool-toned blues, soft gradients, and glitch-inspired effects. Memory entries are categorized as stable, warm, or corrupted—each with unique backgrounds, animations, and icons to reflect their emotional state. Fonts were kept minimal, with glitch accents used sparingly to hint at memory instability.
4. Interactive Prototyping: Prototypes were created in Figma to explore hover states, transitions, and log-entry animations. Emotional tags trigger subtle UI responses (e.g., heartbeat pulses, flickers, soft chimes) to reinforce mood and AI sentiment.
5. Feedback & Iteration: Playtest feedback emphasized clarity and emotional engagement. Based on this, additional layers were added to highlight emotional shifts over time, improve icon clarity, and emphasize memory progression without hand-holding the user.
Results: The redesigned TravelEase app showed significant improvements in both user engagement and user satisfaction. Key outcomes included:
Strong Emotional Engagement: Testers noted the atmosphere felt “intimate” and “hauntingly human.”
Clarity of Progression: Timeline structure and tags helped users intuitively track AI evolution.
Rich Visual Feedback: Subtle interactions (pulse, color shifts, audio) added meaningful immersion.
Conclusion: Neural Archive highlights how UI/UX design can evoke emotion and narrative depth, especially within sci-fi contexts. Through user-centered flow mapping, intentional aesthetic choices, and emotional UI logic, the interface becomes more than a menu—it becomes a window into a fragmented digital soul. This project underscores the power of blending narrative design and UX to create meaningful, interactive experiences.