Capitol Records Website Redesign

UX Design I Final Project

The Assignment

Choose a brand presence, marketing or task-based elearning site to redesign. Identify notable usability issues with the site, and conduct user research to gather data on how to improve these issues. Create a final wireframe and semi-functional prototype to display the site’s changes.

Redesigning Capitol Records’ Website

When identifying a brand to redesign, I wanted something with name recognition that was directly relatable to consumers. There would be added interest for me in working on the project if it related to an industry or topic I was interested in (in this case, music), so I started getting curious about the websites of recording labels. I then came across immediate issues when browsing through Capitol Records’ site, with the most noteworthy being:

  • Page loading times. Because it’s no longer as common of an issue, when response times are slow it becomes an even more noticeable flaw that interrupts the flow of the user’s navigation. This was an issue across Capitol’s site, but was most egregious on its “Music” page, which is meant to display the latest single and album releases from the label’s artists.

  • Identification. While Capitol’s site is meant to be the central resource for the label, navigating it gives the impression that the user is already meant to know what the label is. This assumption leads to many of the site pages lacking in detail, giving the user little information about the label.

  • Distance between links and calls to action. A lack of search functionality forces the user to do a lot of manual work on the site, especially when searching for specific songs and albums. It constitutes an unnecessary waste of effort and motion for the user to perform on what should be a simple task.

*Note these issues were found with the version of Capitol’s site available in late 2023. The label’s website has since been entirely redesigned with a focus on their e-commerce offerings.

Conducting User Research

To gain both qualitative and quantitative feedback on the site, five participants were enlisted to perform a contextual inquiry and observation, with each of them meeting with me over Zoom and sharing their screens as they completed specific tasks on each menu page. I asked for their overall impressions of each page, encouraging them to speak their observations aloud and to compare their expectations of the page with the reality.

The collected data below resulted both from explicit feedback shared during the observation and analysis gathered after reviewing the recorded Zoom call.

Average “Music” Page Loading Time (in seconds)

Across the board, slow loading times were most pronounced on the “Music” page during user testing. While users didn’t call out load times specifically during their feedback, average times were taken after the conclusion of each observation. The median load time was 9.33 seconds, an especially long time to wait when compared with the faster times of 2.11 and 2.90 seconds. In terms of the impact of browser usage, the fastest time, 2.11 seconds, occurred while using Google Chrome and the slowest time at 14.66 seconds occurred while using Microsoft Edge.

The results from the Google-supported tool PageSpeed Insights tell a similar story, with the “Music” page failing core web vitals and scoring particularly poorly on Largest Contentful Paint (LCP). LCP measures “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.” A good LCP score falls under 2.5 seconds, but PageSpeed Insights found the “Music” page loaded in more than twice that time on both desktop and mobile devices.

On a scale of 1-5, how would you rate the site in terms of what you learned from it?

While Capitol’s site is meant to be the central resource for the label, navigating it gives the impression that the user is meant to know what the label is before having visited the site.

However, the lack of valuable content on the site was a point of notice and even confusion that was echoed by users. This was evidenced by the ratings they gave when asked to rank their learnings on a scale of 1 to 5, with 1 meaning, “I learned no new information,” and 5 meaning “I learned a lot of new information.” Of the five users, two shared that they learned little to no new information about Capitol, with three users landing somewhere in the middle, learning some new information but not a significant amount.

Hearing Directly From the Users

“There’s no information here...I would have liked to have read even one paragraph about Capitol Records instead of them relying on their name recognition and assuming people know about them.”

— Test user on the site’s identification issues

“It’s navigable for the most part...but find[ing] an individual song in a seemingly endless grid of songs with no way to sort or find them otherwise was frustrating.”

— Test user on the site’s navigability

“Some tabs were easier than others...in the tabs where it was necessary to do any sort of research, it was difficult to do so...That ‘Music’ section needs some work.”

— Test user on the site’s navigability

“The news page is where I learned the most, but I didn’t learn much about Capitol Records themselves, I just saw who was signed to them. So I learned some things, but I wouldn’t say I know about Capitol Records now.”

— Test user on the site’s identification issues

Using these insights, wireframes and a final prototype were constructed to best address user feedback and propose solutions to these problems.

Wireframes & Prototype

Using the existing structure of Capitol Records’ website, I began experimenting with my proposed changes with a rough annotated wireframe, highlighting where new features would be added in and explaining the reasoning behind these changes. This expanded into fully built-out wireframe pages, with a few remaining annotations (see arrows) indicating which parts of the site I had created for functionality. Final changes, along with small aesthetic elements like link highlights and images expanding when hovered over, were implemented in the prototype, which aimed to seamlessly integrate the additions I had made into Capitol’s existing site structure. These changes resulted from a mix of proposed solutions outlined at the beginning of this project process that were then echoed during user testing.

Key Takeaways

Significant changes to Capitol’s site are necessary to improve its overall user experience offerings. These suggested solutions include:

  • Increasing page loading time speeds by reducing the number of images on the page at a given time. This will also aim to increase site engagement, drive conversions and bolster SEO results by reducing the site’s bounce rate.

  • Reorganizing and building out informational content throughout the site, specifically with the creation of an “About” and “FAQ” page so information about Capitol, its operations, history and more is easily accessible.

  • Enhance the “Music” page’s search functionality by implementing a search bar and providing enhanced methods of categorization for search results.