%201.png)
Nirvana is a project involving a music app to provide music streaming services. Initially, the business strategy was to first build a user base by offering a free product and then evolve the feature set so they could monetize on a premium (paid) product. Now they reach the point to convert the users to pay a monthly fee. In this article, I introduced my design process and the solutions I provided to help them to meet their conversion goals.
I led the design for this project as it went through 3 different redesigns. As Nirvana evolved, the capabilities increased and changes to the design were made to accommodate for the product's needs.
The client company is a startup company that launched a music streaming service two years ago. The company’s business strategy was to first build a user base by offering a free product and then evolve the feature set so they could monetize on a premium (paid) product. The product has been well received and has a healthy user base of free uses. Now the company reaches a point to convert the users to pay a monthly fee.
1. Create the opportunity for new users to subscribe to the premium product upon registration in the signup flow.
2. Create the opportunity for returning free users to become paid subscribers in the sign-in flow as well as within the product.
The project’s objective is to create a paid music streaming service by providing an application with premium features that is far greater experience than what the current free experience has to offer.
By giving free users the opportunity to upgrade to a superior product, users will prefer the premium features, subscribe to the premium plan and create a valuable revenue stream. In order to thoroughly understand the users and create a viable product, secondary research was conducted to better understand the users within the music streaming service industry.
Based on the information provided by my client, the target users are:
In order to quickly identify the opportunities to convert the free users, I reviewed case studies and other secondary research that would help me understand the target users motivations, needs and other factors that in choosing the platform to upgrade their free service from.
By analyzing the competitors, analyzing previous case studies on successful companies with high conversion rates, I was able to identify the key requirements for a successful free to premium conversion method for a music media focused app. To explain the relationship between the data analyzed and conversion opportunities, I created an infographic to highlight my process for the free to premium conversion.
One highlight is that throughout my research, I found that successful conversions had “free premium plan features/trials” as one of the main factors that led to users opting in for a premium plan. By offering free trial periods or premium features for a limited time, I will be able to motivate users to upgrade to a premium plan.
The user flow below was created in order to visually see the bigger picture of the users process in selecting a premium plan. By visually laying it out we can see certain key points within the user flow where improvements can be made to create more conversions.
One key point here is when the user is tasked with selecting selecting a plan how the information should be displayed. Is it easy to read? Is it difficult to differentiate between the plans? How is the premium feature being offered?
The goal is to convert the large base of free users to paid subscribers. To understand how to immerse the pushes for conversion in the user interaction, I moved on to creating wireframes in Figma and designed the opportunities for conversion. A key function to push users from free to premium accounts is to ensure users have all the information necessary to select the plan without any obstructions. Users need to visually see the differences between different premium plans and each their features quickly and effectively without a taxing mental load.
The goal is to convert the large base of free users to paid subscribers. To understand how to immerse the pushes for conversion in the user interaction, I moved on to creating wireframes in Figma and designed the opportunities for conversion.
I used Figma to create prototypes and invited 5 participants to conduct the first round test using a moderated remote user testing method. They were tasked on 4 things. The first two tasks Onboarding process through either A moderated remote user testing method allows me to recruit users quickly and efficiently, while keeping a safe social distance. I used Zoom as the intermediary application to record our meeting and send out the Figma prototypes. I have included the test script per convenience.
Key take aways from the first round:
Using the previous takeaways and a simple UI Kit, a hi-fi design was created in order to show case visible differences and visual weight in the premium plan section so that users able to visually see differences between plans. In addition users should be able to select plans based on the key visual differences. A compare plans grid as well was included for users to find and use to compare keys features as well.
Once the first round of testing validated and tested the usability of the wireframe, I moved forward to design the interface of the app. To help me with the UI design, I created a basic UI kit for the app containing examples of existing typography, color palette, icons. Next, I created initial high fidelity designs. The targeted users of this app are within the Gen Z range who are drawn to simple lines and bold color patterns. The design highlights this with bold contrasting color patterns between a dark background over a dark blue as the primary color with the secondary color as a sunset pink. The shapes and lines were kept simple.
For the sign up process and the payment plan option, users were able to finish the task with no accessibility problems. For the premium plan selection some users were unable to find the compare plans grid that would have helped them visually see differences between plans.
Overall, users find the compare plans section to be useful however would need it to be more visible in order for it to be utilized. To align ourselves with previous research I intend to include a call and response interaction where the Compare Plans section would appear once the user scrolls on the page giving the users the idea of their interaction eliciting a response from the app, giving them a feeling of more control.
Furthermore focusing efforts in making the Compare Plans more visible and changing certain phrases for features such as “Listen internationally offline” to lament terms like "Download to listen offline.”
Using the information gathered from the previous usability test I created an accessible Premium Plan page adhering to AA accessibility. Visually, the Compare Plans section is more pronounced with a high contrast background making the header for the font pop out more.
To make it more accessible for users, it is also moved slightly upwards to take up more of the screen. In addition, the family plan features were highlighted in green, and wording for features were changed for users to better understand its function.
.png)
This project focuses on converting free users to premium subscribers in order for many free apps looking to convert to a profitable business model. The experience gained from this project can be applied to future projects requiring a user centered approach on conversion rates. The most notable takeaway is that utilizing the User Centered approach I was able to quickly identify relevant project goals and industry standards to generate the required subtle but successful pushes for conversion. From small, strategically placed ads that give back power to the user.
While giving greater user confidence it allowed users to stay curious about features within the application. Users will find the efficient navbar to find the premium plan page, and with a proper focus on key features between premium plans, a visually efficient grid, users are able to confidently and with ease select the plan best for them.
If you like what you see and want to work together, get in touch!
brycebalingit@gmail.com