Responsive Artist Website

Screen Shot 2022-05-25 at 11.56.47 AM.png
Screen Shot 2022-05-25 at 11.57.41 AM.png

Role

Product Designer

Tools

Pen and Paper

Adobe XD

Duration

05/2022 - 05/2022

 What do music fans want to see on their  favourite artist's website?

Music streaming services have overshadowed artists' websites and their ability to connect to their fans in recent years. After a survey was conducted among my peers, I found that there is a desire to visit artists' websites if the shopping flow was equally important to the original music player as well as a way for the website to connect to other artists'

2.gif
3.gif
4.gif
6.gif

Project Timeline

Research

Survey

Initial research was conducted with a six question survey that was participated by seven respondents. The survey produced useful insights from a variety of different backgrounds, from musicians to listeners. The overwhelming themes  were fans were willing to visit an artists website to purchase hardcopies of music and to learn more about the music.

Screen Shot 2022-05-11 at 5.22-3.png
Screen Shot 2022-05-11 at 5.22-2.png
 
Frame (3).png

Research

Frame (2).png

Ideate

Group 15.png

Hi Fi

Group 14 (4).png

Iterate

Frame.png

Evaluation

Survey
Persona's
Competetive Audit

Crazy 8's
Paper Wireframes
Digital Wireframes

 

Visual Design
Interactive Design
Motion Design

 

User Testing

 

Reflection
Next Steps


 

Screen Shot 2022-05-11 at 5.22-1.png
Screen Shot 2022-05-11 at 5.22.png
Screen Shot 2022-05-11 at 5.23.png

Persona's

After collecting the survey responses I created two Personas. The first one, Emily, is based on an average user looking for music during the day. In this sense, the ease and simplicity of the design had to be the main competitive factor of other streaming services. The second, Mike, was based off the other respondents who were musicians themselves and represented their willingness to support artists directly. 

Frame 1.png

Competitve Audit

Frame 2.png

Lastly, I conducted a competitive audit on music ordering websites. I looked at direct competitors, which would be buying from artists directly from their website, and indirect competitors which would include large and small music labels. 

Ideation

Frame 7.png

Crazy 8's and Paper Wire Frames

To begin my ideation process, I started with a couple proven techniques to mass ideas: crazy 8's and hand drawn wireframes. I ended up borrowing one or two ideas from each idea to eventually guide my digital design prototype

IMG_3989.HEIC
 

Checkout

Main Page

Checkout

IMG_3992.HEIC
IMG_3990.HEIC

Desktop Digital Wire Frames

Music Format options + Original Music Player

IMG_3992.HEIC
Web 1920 – 10.png
CD 2.png
Web 1920 – 5.png

Generic checkout with music player in top right corner

Order review includes the format + quantity

A sign of appreciation with links to other bands' websites/social medias

Mobile Digital Wire Frames

Web 1920 – 2.png
Web 1920 – 3.png
Web 1920 – 4.png
iPhone 8 Plus – 5.png
iPhone 8 Plus – 1.png
iPhone 8 Plus – 4.png
iPhone 8 Plus – 3.png
iPhone 8 Plus – 2.png

Desktop Hi Fidelity Design

The Hi Fi design was guided by minimalism and focuses on the aspects of music that bring fans to a site: information, hard copy purchases, and the music itself. I made up a band name (one that I've thought about using myself..) and incorporated visual design elements that would fit an imaginary punk band called Lint Lung. 

Screen Shot 2022-05-25 at 12.01.22 PM.png
Screen Shot 2022-05-25 at 12.01.22 PM.png
 
3.gif

The music player is minimalist with no progress bar to encourage the listener to browse the album as a whole. Clicking on the track reveals a write up about the song, lyrics, and track credits. 

6.gif

Motion design was one of the main studies of this project.

4.gif

Hovering over "if you like us" reveals artist suggestions. More motion design as well when clicking the different formats. 

7.gif

Drop downs have a "homemade" feel

8.gif

Checkout is pretty standard, with some unique motion design.

9.gif

Mobile Hi Fidelity Design

The mobile design was much the same, only that the hover states were replaced with tap options. As well, to make use of the limited space, horizontal scrolling was utilized for the final frame. 

iPhone 8 Plus – 2.jpg
iPhone 8 Plus – 3.jpg
iPhone 8 Plus – 8.jpg
iPhone 8 Plus – 4.jpg
iPhone 8 Plus – 5.jpg

Iteration

Upon a small sample of user tests, the feedback received was generally aimed towards the graphic and visual design elements. A few comments mentioned the navigation being slightly un-user friendly, however it wasn't fond to be un-navigable in any sense. This will be reviewed upon further iterations. 

 

Evaluation

Reflection

|Research Research Research|
I'm really starting to understand how vital research and testing is to guide design process. Truly trying to understand what a user will be guided to do can only be done with well thought out research plans. This design was particularly simple, but deceivingly so because I found it easy to assume how the user will navigate. 

 

|Define the User|
In the case of a specific artists' website, the key point of the research would have been to identify the types of listeners, as the products on the page are directed toward a very specific user. This is different than assuming a website design can be made for a 'music listener'. The design was limited in what it could accomplish because the design was for a made up band, with a variety of survey respondents that served as a 'music listener' user. Ultimately, the case study resulted in a graphic and motion design study, which produced great feedback, but lacked in a meaningful user experience study.  

Next Steps

The next steps will be to clean up the animation bugs, include sound in the components for the music player, create pages for all the suggested links to calm some of the confusion during testing, and conduct more research on the ability for a band's website to be competitive with popular music services.

Thank you!

d

c