This project explores how music and design can combine to create an immersive and interactive digital platform to enhance the listening experience.
Problem
With the pandemic eliminating live concerts, artists need a new way to support their album releases. Songs In The Night gives the audience an opportunity to have a richer, more immersive experience.
Similar Websites
The Alienist: Angel of Darkness – Explore 1897 New York
An interactive website created for the second season of the show The Alienist. Users can explore a map of New York that highlights key show locations, and provides behind the scenes content.
Aesop
Their interactive website takes users through a journey to discover and learn about Aesop’s products. Animated visuals and music create an immersive experience.
Strategy
Creating a journey for users to follow helps them connect to the music they hear. Sound and imagery need to complement and enhance each other to make a cohesive experience.
User Persona
Name: Jamie Harrell
Key Attributes: Likes making music playlists, detail oriented
Needs: A clear path with directions that are easy to follow, engaging content
Challenges: Slow Internet connection, gets distracted easily
Opportunities: Always clicks on extra links, enjoys sharing content with friends
Quote: “Just listening to music isn’t enough, I want to be able to experience the music too.”
Structure
The website structure has two main layouts. Alternating between them creates a feeling of progression and allows breathing space between songs. This structure could be as long or short as needed depending on the amount of music and content desired.
Layout A Features
1. Black ‘starry night’ style background
2. Centered text that fades in and out
3. Beginning page features a centered text button to proceed
4. Following pages feature navigation on either side of page
Layout B Features
1. Full width background image of a scene that relates to the storyline and song
2. Song title and artist at the top
3. Music player below song title and artist
4. Song lyrics down the center
5. Movable elements sit in the middle
6. Navigation on either side of page
Website Link
