Zing MP3 - online music streaming platform
My role: Product designer
Duration: 2 years
Company: Zalo Group
OVERVIEW
This experience helped me learn new design methodologies which refined my overall comprehension of product design for the digital medium.
Helped me understand the working process for a product, the challenges of managing my designs across all platforms including iOS and Android, with various devices, and the pressures of testing my designs for a user base of over 30 million active users.
My role at Zing MP3
Zalo is the name of the largest chat application in Vietnam, and Zing MP3 is one of the media products under Zalo Media. Along with Zing MP3, Zalo Media offers a range of other media products, such as newspaper reading applications and karaoke applications.
Zing MP3 is a top online music streaming application in Vietnam with over 30 million users currently using it. It receives a total of 70 million plays per day on all platforms, including iOS and Android.
For 2 years, I worked on multiple projects, During this time, I was responsible for:
10+ features designed end to end
Involved in designing ux/ui for website along with applications
Worked independently on other platforms such as Android TV, Car mode
Created a CMS platform for clients
Provided design guidelines for the graphic department team
To ensure the best end result, I collaborate closely with the DEV team and take full responsibility for the final product
PROJECT HIGHLIGHT
✨IOS and Android mobile phone
Worked on My Music, Radio, Notification, Event, VIP package, Design system, Artist and so on
Website
Revamped the website's design system and was in charge of creating UI designs that corresponded with the features available on the mobile app. Additionally, I provided support for various small tasks related to mobile design.
CMS platform
I supported the internal team in creating a user-friendly CMS platform, enabling clients to update artist content and track data seamlessly.
Android TV
Independently led the user experience design for Android TV, taking full ownership of creating all interface designs and effectively collaborating with developers to ensure a successful product release.
Car mode
Similarly to Android TV, I took full responsibility for creating a new user experience for Car Mode. I conducted research to understand how users interact with the application while driving, and then worked to improve the overall experience accordingly.
Team size
One product owner is responsible for managing a specific feature and assumes complete ownership of it.
PRODUCT OWNERS
10.
3+
OTHER TEAMS
Including customer service, graphic designers, content creators, operations team, and content team...
There are three development teams - IOS, Android, and website - working on the interface, with a total of over 30 members.
PRODUCT DESIGNER
2.
3.
I worked under the designer's lead. We collaborated to define design solutions and implement new features.
DEVELOPER TEAMS
Problem area
I participated in the process of re-evaluating the entire product as a designer, from analyzing user experience to assessing rationality and comparing business requirements to provide a different perspective on the product.
Some of the issues I identified were:
There are too many unnecessary features with very few users, such as "feed, #zingchart, radio, comments, notifications."
The music management page is confusing and hard to understand.
The personalization feature does not meet user expectations.
Users are not willing to pay for VIP.
The lack of consistency in both the visual design and UI makes the UI feel unfriendly to users
🤪 What users say?
Listening to users is one of the important factors to improve necessary features in the app
“After I liked a song, I don't know where it will be stored in my music”
🧐
“The suggestions seem somewhat unreasonable, such as "mix for you", "artist for you", and "you may be interested"
😫
😟
“Some features are unnecessary”
“Too many VIP songs but I don’t want to pay for premium, it’s expensive and I don’t use all functions”
“Many times I search for songs, but I don't get the results I hope for”
How I manage tasks
Every year, the team sits down to re-evaluate the features and metrics that impact the entire product, and determine task priorities based on business goals and KPIs. Typically, the product manager makes these decisions and provides specific evaluations. I participated in the team meeting to better understand the insights and requirements
Case studies: My Music and VIP package
1, My Music 2.0
Identifying problems based on data:
Usage data: My Music continues to have the largest user and daily play share, accounting for 40% and 52%, respectively.
User: 20% of users access My Music but do not listen to any songs. Among them, 8% have no songs to listen to.
Play: 98.5% of plays come from: Songs (54%) - On device (30%) - Playlists (11%) - Recently played (3.5%). The remaining 1.5% come from other categories."
💊 Brainstormed gains to minimize pains
After understanding users a litter better based on the data, and feedback, I discussed with product owner to define the UX problems and evaluated the priority of the folder on library
The goals
Help the user who already added songs to the library to find and listen to music in the library more easily.
Trigger user with no song on library to add song on “My Music”
🤔 My thinking and design directions
There is ample room for improvement, and I am actively working on creating a new design. However, it is crucial to ensure that the changes are not too drastic, as they may adversely affect the majority of users who are accustomed to the current design. It is important to consider their familiarity with the app before implementing any significant alterations. I provided 2 options for the A/B test
The result showed that the first option, which kept the thumbnails inside the folders, was still the preferred choice for the majority of users
⚡️The decision
After getting the results from the A/B test, where option 1 was clicked and used more by the majority of users compared to option 2, I continued to dive into the second phase which is to complete the "My Music Details" section. Some minor improvements in both UX and UI were made to make "My Music" more clear and complete.
The final and release
I worked closely with the IOS and Android dev teams to ensure that the UI is displayed accurately on all devices. The number of components must be displayed at a size of 2.5 on the screen, while the section in the recent items section must be displayed to fit the number of cards in the library. One of the biggest challenges was calculating how to export the background image of "my music details" without being too large, yet still displayed clearly without distortion.
2, Vip Package
Currently, Zing mp3 has introduced a VIP upgrade feature, but the user paying rate is only at 0.1% which is very low compared to other music streaming apps. Therefore, the product team wants to reevaluate the value of the current VIP package with users to gather information as a basis for improving the subscription rate.
Research objectives
Assessing the value of the current VIP package involves considering the benefits that the package provides and the issues that users may face when using it, including both existing and churn VIP users
To understand the reasons why some users have not upgraded to VIP, it's important to conduct research and gather feedback from these users. Some possible methods to gather information could include surveys, user interviews, or analyzing user behavior.
Research questions
Gain: What are the values that the VIP package brings to users? Why do they renew it?
Paint: The issues that users face when using the current VIP package, and the reasons for discontinuing use. Demand for the VIP package? Reasons for not purchasing the VIP package?
Research user and market overview
Design solution and exploration
Make VIP features more prominent by creating a clear distinction between users who have VIP and those who don't, especially since at least 94 out of 100 free users have a need to use one of the VIP features.
Emphasize the "need" of the user, understand their primary needs and create VIP packages that meet those needs without making users feel "unnecessary" when they have to purchase the entire VIP package. For example, the need for ad-free music listening accounts for 73% of the demand, so creating a VIP package without ads is necessary.
Focus on improving the user experience when using VIP features, such as entry points, easy access, and a seamless purchasing and payment process.
Create highlights and differences in terms of interface, before and after upgrading to VIP.
👩💻User profile
Firstly, I redesigned the user profile page to cover all possible scenarios for both free and VIP users. It is essential to display the current VIP package the user is using, taking into account cases where users may be using multiple VIP packages simultaneously. Additionally, an entry point must be provided for users to access their VIP package management page to track the VIP packages they have used or are currently using.
Manage VIP and VIP package detail
In the VIP management page, there are two tabs: "Purchase VIP" and "In use."
In the "Purchase VIP" tab, there are different VIP packages because some users may not use all the features of the premium VIP package. Initially, we created two VIP packages: "Premium VIP" and "Ad-free" (listening to music without ads), and in the future, we will create more VIP packages that are suitable for each user's needs.
The final design
3, Another feature I designed
Next?
SmartPay is an E-wallet designed to target the unbanked population, and I have been involved in the project since its ideation phase until its launch on the market