Music Streaming Service for HMV
HMV is a UK-based music and film retailer, and in 2010, HMV Japan became a part of Lawson, one of the largest franchise chain company of convenience stores. HMV owns several physical and online record shops. Since there’s a significant transition to digital music in the industry, HMV requested KKBOX to build a streaming music app for users who shop CDs from the online stores. Fortunately, at that time, I was working at the development team at KKBOX.
Digital music download revenue started to decline from 2010. Streaming music revenue k decline keep rising from 2013.
Digital music download revenue started to decline from 2010. Streaming music revenue k decline keep rising from 2013.
The challange
Develop an APP
in 5 Months
The primary objective of this project for HMV was to build a music streaming service app that transfers their original customers from the online music shop to a mobile app. Since 2010, digital music download sales have declined, and now, a sizable proportion of the music industry’s revenue is made up of on‐demand streaming services. Our challenge was to enter the highly competitive on‐demand streaming music segment in Japan and establish a useful platform in 5 months.
My Role
UI designer
From 2017 November to April 2019, I led the UI work of both iOS and Android platforms of this music app. I was mainly responsible for interaction design, visual design, and branding. For the wireframing and the UI flow, I collaborated with another designer to brainstorm strategies and present our plan.
The approch
Make good use of What we have
To enter the market as soon as possible, both stakeholders decided to build the HMV Music app on the existing KKBOX app architecture. This tactic was perceived to be more efficient and least risky.
The plan based on the given was straightforward — within the scope of the record label, improve the display and user experience, utilize the special curators* from HMV and leverage the existing infrastructure to get to market as soon as possible, and the lower the cost, the better.
This early architectural decision had a significant impact on the quality of the customer experience we could both create and reconcile.
* Curator: In Japan, a curator in the music industry is professional in the collection of music for a music shop, and each specializes in a particular music genre to provide great choices for the public. these songs often align with their styles or play the role of the store’s branding.
Main Optimization
To reach the goal - establishing a useful and representative app for HMV in 5 months, we were optimizing and differentiating. We optimized the design for good user experiences and differentiated the app by providing a platform for the curators to reveal their unique tastes in choosing music. Let’s talk about what we have optimized.
On the discover page, we removed the tab bars on the navigation bar and placed the functions separately to other pages because of two reasons. (1) The fewer the tab bars, the less time it takes to browse and work through. (2) Having two tab bars apart can be confusing to users who are not familiar with the features and structures of the app. In addition, per the survey of the KKBOX app, users usually are not interested in the daily changed module on the top since the module is usually displaying different editor's picks which they don't find relevant. Therefore, this particular spot on the page became the Specials Pick by HMV editors for users who aren’t looking for particular music to listen to. They can find some good ones with just a few clicks.
KKBOX Discover page
HMVmusic Discover page
For users who search with a particular interest and enjoy exploring, we move Genre & Mood section from Discover page to the Search page, and in each category, we added different design onto the UI to make sure they appeal interesting and gets the attention to these users.
KKBOX Genre & Mood
HMVmusic Genre & Mood
For the music players, we made some adjustments as well. We moved the favorite and lyrics buttons to the sides, so there is more space to present the album cover and song information, also lowers the chance of mis-clicking at the same time. Overall, the page looks more balanced and neater.
KKBOX Player
HMVmusic Player
Differentiator
* Curator: music Curators in Japan are also responsible to recommend music to the consumers of a music shop. They can be very influential in Japan’s music market when the public recognizes their styles and when their choices become popular on social media.
While we were optimizing, we were working hard to maximize one of the greatest advantages of HMV Music in the market. Based on the surveys and several discussions, we all agreed that their professional and popular curators are special which can be very valuable in the market. We tried to find the “wow points” and emphasized curators’ styles in different ways. One of my ideas to introduce the curators is to let them choose their top picks, and display the songs besides curators’ profile on the Home Page (picture on the left). Users can easily explore, listen, and follow the curator who matches their taste of music. When listening to a song, the user can see the curator’s column which includes personal perspectives and more information on the song (picture on the right).
Curator page UI design
Stream module wireframe
Curator page wireframe
Stream module UI design
The follow-up
Unfortunately, the ideas and plans for differentiation had to stop because of disagreement between stakeholders. Per the contract between KKBOX and the record labels, some stakeholders would rather have an app that is more similar to KKBOX, so mainly the optimization was done in the first version of the product. Shortly after the first version of the app was launched on April 4th, 2016, I had to stop working on the project.
As anticipated, the result was not good. Without differentiation, users have no special reason to choose the app to listen to music. Since I fully understood the myriad of usability issues, the potentials of critical features, and the sacrifices of differentiators, I had difficulty accepting the reality of this product for the period of time.
While it was a bad result, it is a good lesson for me. (1) It’s important to confirm the scope of design with stakeholders step by step and one by one, so we can make use of the resources as a marketing advantage. (2) The quality and usability of a product is the responsibility of an entire organization, not just the development team or my insistence on values in this app. I have learned that great user experiences are only possible when the organization as a whole truly shares the same values and aspirations. Launching the product is necessary to reveal where we truly are and how we can improve—both in the product and in the way we worked.
“the better the communication,
the greater the design”
