Music Label Site Redesign (Case Study)
Top Dawg Entertainment is one of the most well known independent music labels in America, because of the success in the music industry they gained from artists like Kendrick Lamar, SZA, etc.
Personally, I have been a hip-hop fan for as long as I can remember and have seen the music genre grow into the culture it is today. This case study is a unwarranted site redesign where I analyzed the current site interface to create an improved user experience.
For this case study I acted as a user interface designer developing insights through user experience research. As UI designer my role was to develop the interface that users would interact with while navigating through the site.
Going into this project my main goal was to showcase my design skill set and prototyping in Figma, I also wanted to develop a user research methodology and the thinking that went into the redesign. Through this site redesign I aim to increase site navigability and raise artist awareness by providing a simple and modern approach to the current interface.
Research
To start I designed a survey in Google Forms to gain insights into the type of people that primarily would use this site. I gained most participants through convenience sampling methods, mostly people on social media channels (Twitter, LinkedIn), and from personal contact. Through this survey I was able to gain insights into the demographic that were aware of the brand and what preferences they had towards this interface.
The main insights I gained from the survey were:
-9/12 respondents preferred to shop online with laptop (75%)
-9/12 responded more likely to buy merchandise based on music quality (75%)
-5/12 respondents purchased clothing online six or more times in the past year (41.7%)
-4/12 respondents purchased clothing online once in the past year (33%)
The site runs primarily as an e-commerce store to sell artist merchandise and music. I believe there is an opportunity through the redesign to provide more individual content on artists signed to the label and the music projects that they release.
In the redesign the landing page would land on an artist page with the music project playing in the background before stopping on a frame of the video making the interface components contrast with the background ADA compliant.
In the bottom left of the artist section of the interface would be the name of the artist and the title of the video, when clicked it will navigate to the full music video on YouTube.
Scrolling down the site the user would navigate to the artist music, describing the album and a link to listen to the album through streaming services or digital purchase.
All artist pages funnel to the merchandise store, in this section I added filters based on artist, clothing type and other relevant sorting options.
During preliminary designs I developed a wire frame for the user pathway and further established connections as I moved into the prototyping stage. I created a high fidelity prototype in Figma for the development stage and incorporated micro animations where applicable.
From the responses I gained from the survey I found that 50% of respondents had a preference for a dark interface over a light interface while the other half had a preference for a light interface or no preference. While this is not a wide enough margin to be considered a design insight I decided create a dark interface as I believe there is a trend headed in that direction.
Moving forward I will continue refining this interface to further improve the user experience by testing new layouts for displaying text heavy content. The album covers for example, were something I struggled to incorporate into the interface effectively.
Developing multiple layouts to display this content and getting feedback from users would be a good way to optimize this section of the design if further developed in the future. It would also be helpful to send out another survey with a wider population to confirm insights we have found and explore other consumer habits for users of this site. In the web development stage I would like to add more micro animations that were not available in Figma, so users can have a more responsive site.
