Web Design project at Capilano University
Project Overview
Melody is a streaming music service that provides millions of songs and playlists for your listening pleasure. Melody offers a free service which has limited playlists and ad interruptions, they also offer a premium paid service which is ad free and has unlimited playlists and gives you the ability to download songs to your device. For this project I wanted to develop visuals and designs to reach a target audience and entice them to sign up for the premium service.
My Contributions
I was the designer, illustrator, and web developer for this project.
Target audience
Young men and women aged 20 to 35. Who are passionate about music, and willing to pay for the premium service.
User persona
To begin the user experience process, we worked in small groups. We chose between two user personas, a 35-year-old female, and a 20-year-old male. From these two personas we then identified their personality and lifestyle characteristics. Using the selected persona, we ran through believable scenarios that would encourage the personas to switch from being a free account to a paid subscriber. These scenarios were then used to map out selling features and pain points for becoming a subscriber. My group chose to use the female persona (Chloe). We mapped out several scenarios from the perspective of Chloe being a free user, and then changing to a paid subscription user.We imagined Chloe as a working professional, who may occasionally work remotely at a café, and would often listen to music while working or doing exercise. She would have moderate understanding of computer technology but would be put off by too many steps in the process.
We ran through a variety of scenarios. To explore what would convince Chloe to become a subscriber, and what would validate her choice to remain a subscriber.In scenario one, Chloe is on a crowded noisy subway, which makes her uncomfortable and anxious. Being in a subway she cannot access the internet, but she has the premium subscription that has allowed her to download the tracks and listen while offline.In scenario two Chloe is at work, listening without headphones on the free service and she’s not using headphones while she listens to music. Because she isn’t on premium, a loud ad interrupts her work and disturbs her co-workers and embarrasses her. If she had the premium service this could have been avoided.In Scenario three Chloe has writer’s block and is browsing music playlists. A song from her youth catches her attention, she plays the song and it reminds her of when she was 16. This makes her happy and gives her the inspiration to write, thanks to the Melody music algorithm. Having access to the unlimited playlists on Premium have helped her gain inspiration.After crafting the scenarios, the groups broke apart for individuals to pursue the final site direction.
User experience
Insights and Audience
Drawing on these scenarios and referring back to the personas, I crafted a variety of sales pitch slogans based on the responses of Chloe.
“Upgrade to Premium and take your music anywhere”,
“Upgrade to Premium and Listen without annoying ad breaks”, and
“Upgrade to Premium and Find the Music you love with our smart playlists”.

Using slogan 3 “Upgrade to Premium and Find the Music you love with our smart playlists” slogan I further developed a user experience journey in comic form. Bringing life and personality to the situation and further informing the emotional selling point of the messaging.
Final creation
Inspired by the scenarios, I developed graphics for all three slogans. All of which I incorporated into the final site. For the final page I tried to use the same bright colours from the illustrations in the site design.

Motion Graphic

Additionally Ideveloped a motion graphic version of the hero image to incorporate into the site.Ultimately I would want to animate all three.

Poster Series
I think they aslo made for really striking images on the final page design. I decided to further develop the images and build an ad campaign for Melody to accompany the website.