Design Context
Overview
Redesigned the music platform to connect with music audiences and enhance its online presence. Increase the sales potential of the CD e-shop through an affiliate programme to make it more competitive among Hong Kong music labels.
Here is the framework for the Affiliate Programme Partnership :
My Role
Unfortunately, there is no product manager and UX role in development process to conduct in-depth research and measure value to prove the business impact of affiliate marketing programs on the redesigned website.
Problem
Universal Music Group's website failed to communicate its proper value to the music audiences. The most obvious problem is the high bounce rate of 68%, which indicates a poor experience across the site and affects access traffic to the CD eShop platform also.
Nowdays, A music audience's first impression of brand is based almost exclusively on online content. If audience don't understand the website purpose and what value it brings, they will leave.
Design Challenge
"How might we redesign the website experience to reduce bounce rate issues while retaining users to driving more traffic to the official CD e-store?"
Solution
We re-architect the content architecture increased music audiences' motivation to explore and extend their time on the site through a content strategy approach.
Meanwhile, the online experience was enhanced to increase the music audience's intent to sell CDs in the affiliate program.
Discovery and Research
Inital Finding
When we started a project, we usually started with setting the targets and build initial consensus to kick off internally. After the meeting with the client to find out the most crucial issue and expectation. Through Google Analytics research where are realised the bouncing rate of current website is too high OVER 68%, thus, which leading to a significant drop in consumers who have moved from official website to thier CD e-Shop (Ushop.com). The major problem was clearly.
After few round meetings with stakeholders, We conducted an online survey with UMG marketing team involving 43 people to learn more current website what happened.
Problem Analysis
Here, I brainstormed with teammate gathered survey responses and analysed the current website. We then evaluated the results into 3 overarching issue to helping us to narrow down the scope of the project, and learn how each of them impact:
Poorly structured and loose website
42%
Respondents mentioned that they felt the site's clutter affected their browsing experience, and also mentioned that they got the wrong results when searching for CD.
tips_and_updatesTakeaway :
The current site is overly dense and busy with content. Artist news and CD album promo banners are flooding the site, replicated everywhere where it doesn't immediately look like a proper music site tone. Users only care if they can find the content they want. In addition, CD purchase intent was reduced due to the poor search function.
Negative landing experience
55%
Respondents left in a short time when they landed without clicking anywhere else on the site, and they also expressed an outdated design.
tips_and_updatesTakeaway :
The truth is, whole website was non responsive design and discovered about 45% of traffic comes from mobile, in which are factor they leave that causes of a high bounce rate its hurts Ushop.com traffic as well. Beside, current website was not align with brand consistency and personality that hurts brand image and trust.
Lack of social media presence
40%
Respondents expressed frustration at missing artists' live performances simply because they can't find the information. They said they come here to look for artists' Facebook Live or activity information.
tips_and_updatesTakeaway :
Nothing connections and features about social media. Existing website does not match up with what music audience was expecting and connecting: Havent social media content that they interact with it, which would just turn off the users interest or keep browsing.
Market Research
I did an analysis of competitors on similar music brand, the differences between various of the content and product music audience bases, as well as ways that our design could stand out from the competition in the marketplace and what we can learn from them.
Defining the Design Objectives
Identify the Goals
We identified the problems we were currently facing and prioritised them according to our findings. Here are points of view to make design decisions after teammates brainstorm.
As a Music Audience :
- To see a well structured website that reflects music label professionalism and trustworthy
- To view artist content that is interesting and useful
As a Brand Owner :
- To be maintaining industry status as one of Hong Kong's influential music labels
- Artists are crucial assets for a music label's to increase CD purchase intent
tips_and_updatesINSIGHTS :
Apart from redesigning websites, communicating values clearly and intuitively is crucial for a big brand and equally important for maintaining a long-term vision.
As a result, the website should primarily highlight the content value proposition while driving the sales opportunity of artist CD, which became the primary goals of the project.
Ideating the Design Strategy
The Solution
We presented the design approach and insights gleaned from the our team and shared the 3 targeted approach with the client to ideate on the revamp of the next phase, ensuring that we were responsive to the client's needs while maintaining the momentum of the project on the right track.
Problem #1 - Poorly structured and loose website
shelf_position
Re-construct the website content architecture
Reframe of the entire website structure and content strategy is needed. Make it systematically present content that is consistent with the huge assets of the music brand.
Problem #2 - Negative landing experience
browser_updated
Further guiding the user journey
At first, responsive framework to work across all device viewports was important which is a quick way to reduce bounce rates. Beside, Make it as clear as possible at first glance what the targeted content is that evoke action quickly. Thereby reduce drop off when landing on the site boosting up conversions opportunities.
network_check
A more recognizable design encourages users to interact with it and leads them to the CD e-shop. With a strong visual appearance was particularly important for the music brand.
Problem #3 - Lack of social media presence
shape_line
Reduce gap between brand and target audiences
Create an artist's social feed wall feature to maintain social engagement and keep the site fresh with a steady stream of social content.
Create an artist's events page to keep track of upcoming events. Facebook Live is integrated with the social calendar feature to keep track of events they're interested in.
Re-framing Content Structure
I sketched out the draft which helped us to figure out the new structure what needed to be deleted, merged or added make user journey smoothly.
Beside, The team identifed topics and keywords of interest to them with Google Analytics Insights what needed to be tweaked in the landing page and client consideration also. I then pass the draft to our development team to reduced ambiguities and set the stage for a smooth development process.
Unlike the old site flow, the top-level menu items were streamlined from 7 to 5 through a content review, which are: HOME, UMG PRESS, GENRE, MEDIA and ABOUT.
A new release centre called "UMG PRESS" at the first level of the website structure, which combines all releases, both official news and UMG artist content.
Due to the tight schedule and sudden changes of project priority from the client. We jump to UI design and inital coding phase to ensure both process progressed in parallel without compromising quality as possible.
Enhancing the Design Language
Visual Communication
One of the design goals was to more closely align the brand. We appreciate form client's trust to thier brand design systemt enhancement. The newly visual element includes a font style, color scheme, and design components that align with the UMG brand.
In the new responsive framework, I utilized dark theme that was intended to have high contrast for the client's huge design assets, such as CD artwork and concert poster. An expressive, I also created a set of CD type visual element and mockup, where intention of letting text and images flesh out the design more recognizable in major CD product.
Iterate the Design Usability
With the rise in the complexity of projects, and how to balance the hierarchy between copy and brand design assets. I knew carry out a design system enhancement at the same time as a visual component also. In the 2nd design version, it was greater emphasis on feel, music audiences connection, content hierarchy and visual balance will be beneficial to user journey.
Throught few round revisions of technical issue and A/B testing with the developer for website structure and image load whether a content placement presented will be favourable to music brand identity. The client team was also invited to participate in the testing to find out which one performs better.
Design Hand-Off
Having some experience in CSS and JS, I use this knowledge in my design QA process. That saves me a lot of time on explanations and back-and-forth discussions, ensuring the whole design is both accurate and pixel-perfect. Thanks to the whole development team's efforts. Finally, we had our final outcomes.
Delivering the Final Solutions
Fresh Landing Capture Audience at First Glance
play_circle_filled Click on prototype to Play / Paused demo
Home
Revamped content hierarchy to keep the design lighter and crisper. Its purpose is to protect the user from getting stuck and to make it easier to move on to the next page in a journey once they have landed.
Targeted Content
According to Google Analytics Insight findings, artists' social activity and feeds are the main content they want. Adopting 3 styles of content design component allows for quicker recognition when users landing on.
Clearly Website Framework
Whole website as responsive viewport that across different devices which is rapidly way to reduce users bouncing occurs.
Reduced confusion during users browsing and access to the rest of the content by reconstructed website. Beside, Designing a full screen menu its provides a clear overview of the website easier to navigate.
Sharp CTA Drive Traffic to CD eShop
Driving more traffic to ushop.com was one of the project goal. Using high contrast of CTA button as round shape shows the price copy of which easier to pushes users into action. In the "Album Detail" page, which redirect them to Ushop.com for purchase CD album with affiliate tracking link once click on the button.
play_circle_filled Click on prototype to Play / Paused demo
Enhanced Search Feature
Visual feedback and autocomplete below the search bar, guiding users to better search terms. In addition, full-screen search design allows users to see the results below and change search criteria without leaving the page.
Optimize the Brand Online Recognizable
play_circle_filled Click on prototype to Play / Paused demo
Card-Centric Design
Entire design was match well with the overall vibe in music branding. Dark grey theme with blue accents from the UMG brand colour, giving the site a strong contrast to the core content. Various card-centric components enrich key products such as CD covers, campaign artwork, etc. This would have been great with UMG, who have huge content image assets.
Interactive Content
Audio player widget that allows the audience to listen to the highlight single. When hovering, this area will show "Buy Now" its also driving traffic to Ushop.com boosting CD sales opportunity.
Engaging with Social Content Deeply
play_circle_filled Click on prototype to Play / Paused demo
One of the target user group is those who are looking for an artist's social content. Encourage the audience to participate, share content and extend the reach of the brand's digital presence through new social features.
Artist's Events
In the 'EVENT' page where shows artists upcoming event infomation, such as Facebook live, concert and release album activity. As you see, Users click on "Join" button that comes with a dialog for the synchronizing thier calendar to google and apple to keep track the artist event, and also they can To do so, by sharing and like the content to gain more traffic.
Artist's Social Feed Wall
In order to keep the content alive and current. 'SOCIAL FEED’ page where embed Artist's Social Feed wall that keep it fresh even not publishing new content. Such a way keep audience on the site longer. Plus, With artist's name tagging helps make it easier find which artist focus and no need to access facebook.
See what the Universal Music Group (Hong Kong) website highlights
Outcome Validating
Result
The redesign elevated website credibility, re-building it brand's online image in the industry. This wasn’t just a superficial change; Here are 3 metrics that shows positive results and deliver the promised quality launched 3 months:
Reduction in user bounce rate when landing on the site within 3 min :
48%
Click-throughs on affiliate purchase link to Ushop.com CD album store
22%+
Website action: Artist Event: Share / Join, CD Album: like / Share and Newsletter subscribe
45%+
Takeaway
Althrought its project not fully UX road map, and nothing UX roles in the project, but the teamate has goal-oriented mindset to perform the project. It’s extremely important to strike a balance between design and goals desired. Though we cannot inform much information about the project details. Sometimes the clients requirements may conflict with technical issue. Our roles to help them implement holistic solution and vision.
Next, in the second phase of the project, We are look forward to further collaboration with the Universal Music Group to integrate payment system (Ushop.com). It provides a One-stop-shop functionality of e-shop platform.
