top of page
dylan cooper
UX Designer
Responsive Artist Website
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'.
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.
Research
.png)
Research
.png)
Ideate
Hi Fi
.png)
Iterate
Evaluation
Survey
Persona's
Competetive Audit
Crazy 8's
Paper Wireframes
Digital Wireframes
Visual Design
Interactive Design
Motion Design
User Testing
Reflection
Next Steps
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.
Competitve Audit
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
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.
Ideation
Checkout
Main Page
Checkout
Desktop Digital Wire Frames
Music Format options + Original Music Player
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
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.
Hi-Fi
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.
Motion design was one of the main studies of this project.
Hovering over "if you like us" reveals artist suggestions. More motion design as well when clicking the different formats.
Drop downs have a "homemade" feel
Checkout is pretty standard, with some unique motion design.
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.
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.
Iteration
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.
Evaluation
|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
bottom of page