Mindmap
Web app audio visualizer using digital media
The Problem
Holding onto memories is a highly complex process. People simple need a way to anchor vivid experiences to enrich memories.
Outcome
Mindmap — an audio visualizer for digital media to solidfy memories with sound association 🎧
Research
The fear of forgetting drives much of our experiences with media: capturing photos to remember an event, journaling to capture feelings, creating a playlist to commemorate a special occasion.
Music, however, has a unique relationship with memory.
See "The Neural Architecture of Music-Evoked Autobiographical Memories" study for more details
The Goal
Enable users to create meaningful, memory-driven audio visualizers through personal media.
An audio visualizer is a multi-dimensional experience engaging sound, sight, and the environment. The design approach needed to be intuitive, informational, and carefully abstracted.
Ideation
To help users curate an authentic experience, the motion and interaction design of the user adoption needed to be clean.
I decided to create my wireframes in an animation-style storyboard to prioritize crisp motion and interaction design.
Visual Identity
The color palette design elements, and design UI building blocks draw inspiration from the design of early immersive audio experiences (speaker baskets, cones, and spiders translate nicely to UI buttons).
Motion Design
Audio visualizers are visually fluid and natural looking. Taking note from Uber's motion design playbook, each UI animation follows a cubic bezier to emphasize easing to allow movement to "mimic motion in the real world."
Final Designs
Next Steps
Mindmap helped me learn the amount of conceptual work that goes into motion and interaction design for consumer-facing products. In the future, I hope to develop Mindmap into a 3D visualization experience using Three.js.
That's all for now, cheers!