Project Overview
Link: Discover the Blues Map
This project aimed to create an immersive, interactive web experience that celebrates the rich history of Blues music across five iconic U.S. cities. The goal was to combine storytelling, custom mapping technology, and audio integration, allowing users to explore the cultural heritage of Blues music in an engaging and educational way. By utilizing MapBox's open-source mapping platform alongside scroll-based interactions and authentic Blues music samples, the experience brings each city's unique contribution to the genre to life through visual and auditory elements.
Role
UX/UI Designer and Developer
- Hand-coded the web page and customized a MapBox map to create a seamless interactive experience.
- Developed content to highlight the historical contributions of each city to Blues music.
- Integrated well-known Blues songs into the content sections, enabling users to listen and experience the style of Blues originating from the area.
- Designed and implemented scroll-triggered animations that dynamically zoom in on city coordinates as users navigate through the content.
- Curated and edited audio samples to represent the authentic Blues sound of each featured city.
Project Scope
This comprehensive web development project combined technical skills, design thinking, and cultural storytelling:
Custom Map Integration
- Learned to use MapBox's open-source platform to customize a map design that aligned with the project's visual identity.
- Integrated the custom map into a web page while ensuring responsive behavior across different devices and screen sizes.
- Designed a custom map style that enhanced readability and highlighted the five featured cities.
- Implemented smooth transitions and zoom animations to create a cohesive visual narrative.
Interactive User Experience
- Used JavaScript to zoom in on coordinates for each city as the user scrolls through the web page, creating a dynamic storytelling experience.
- Developed scroll-based triggers that synchronize map movements with content sections.
- Created intuitive navigation to guide users through each city's Blues history in a logical and engaging sequence.
- Implemented smooth scrolling and parallax effects to enhance the immersive quality of the experience.
Audio Integration
- Utilized JavaScript to enrich the user experience by integrating music samples that represent each city's style.
- Curated authentic Blues recordings distinct to each geographic region.
- Added audio controls allowing users to play, pause, and adjust the volume for each city's musical sample.
- Optimized audio file formats and loading strategies to ensure smooth playback without impacting page performance.
Content Development
- Researched and crafted engaging historical narratives about each city's contributions to Blues music.
- Developed a consistent content structure that balanced educational information with captivating 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
