Project Overview
Link: Discover the Blues Map (opens in new tab)
This project combines storytelling, custom mapping technology, and audio integration into an immersive web experience that celebrates Blues music across five iconic U.S. cities. Using MapBox’s open-source platform, scroll-based interactions, and authentic Blues samples, the experience brings each city’s unique contribution to the genre to life through visual and auditory elements.
Role
UX/UI Designer & Developer
- Hand-coded the web page and customized a MapBox map for a seamless interactive experience.
- Wrote content highlighting each city’s historical contributions to Blues music.
- Integrated authentic Blues recordings into content sections so users can hear the regional sound as they explore.
- Built scroll-triggered animations that dynamically zoom into city coordinates as users navigate the page.
- Curated and edited audio samples representing each city’s distinct Blues sound.
Project Scope
A web development project combining technical skills, design thinking, and cultural storytelling:
Custom Map Integration
- Customized a MapBox map design aligned with the project’s visual identity.
- Integrated the custom map into a responsive web page optimized for all devices.
- Designed a custom map style that enhances readability and highlights the five featured cities.
- Implemented smooth transitions and zoom animations for a cohesive visual narrative.
Interactive User Experience
- Used JavaScript to zoom into city coordinates as the user scrolls, creating a dynamic storytelling experience.
- Developed scroll-based triggers that synchronize map movements with content sections.
- Designed intuitive navigation guiding users through each city’s Blues history in a logical, engaging sequence.
- Implemented smooth scrolling and parallax effects to deepen immersion.
Audio Integration
- Used JavaScript to integrate music samples representing each city’s distinct style.
- Curated authentic Blues recordings unique to each geographic region.
- Added audio controls for play, pause, and volume on each city’s musical sample.
- Optimized audio file formats and loading strategies for smooth playback without impacting performance.
Content Development
- Researched and wrote engaging historical narratives about each city’s contributions to Blues music.
- Developed a consistent content structure balancing educational information with compelling storytelling.
- Sourced and optimized images to capture the cultural atmosphere of each featured location.
Tools Used
- Adobe XD
- MapBox
- HTML
- CSS
- JavaScript
- Adobe Illustrator
- Adobe Photoshop
- GarageBand
