About
Amplifire is an audio streaming service that is in the process of moving from a free to use basis to an optional subscription service for more features.
This project is to help Amplifire launch a subscription service that is desirable, quick, and easy.
Author
Gloria Criollo, UX/UI Designer, Researcher
End-to-end research and design— solo project
Turning a Freemium Base to a Premium Base
Amplifire is a music-streaming service that has been in the industry for two years. It has a freemium model, with a healthy userbase-- and it was time to up the game.
My goal is to both provide users, new and returning, a new subscription service that both enhances their experience overall, and make sure that the subscription flow is easily accessible and frictionless.
Prior knowledge of Amplifire’s user base shows us that our audience demographics are as follows:
18 - 24 years old
Very tech-savvy — they are on their phones for several hours a day
Very budget-conscious
Music is a very important part of their lives
From here, I needed to layout the groundwork-- questions I had to ask myself included, what makes a subscription model successful for a music app? What are users looking for in their subscription models? How can Amplifire maintain its bold, hip, and familiar image?
Competitor Data
What does the Research say?
In order to curate the best user-experience for people who want to join, I needed to ask the right questions and find the right answers. I conducted secondary research and was able to provide synthesize a conclusion from the patterns and information, seen here.
Amplifire needs something familiar but unique– I believe looking to Spotify for inspiration is a great idea, while at the same time brainstorming solutions for a different experience.
For encouragement for subscription, it would be best to put a tab for the subscription itself. Discounts, bundles, playlists, sharing, and discovery need to be taken into consideration. There is disappointment currently expressed towards Spotify’s new Tiktok-like UI– it may not be wise to emulate that at this time.
I would like to focus on the best UI for playlist sharing and discovery possible, while also making subscriptions easy to access, both through UI and price point. Organization should help make playlists sleek, easy to use, and shareable.
Do not interrupt the user experience with ads— advertising the benefits of subscription without stopping songs is desirable, a 30 day free trial is expected by users, and benefits should be made clear, precise, and immediate.
Taking these points together, I began the process of mapping the application to meet these standards.
The Roadmap
User Flows, Low Fidelity Wireframing, and Guerilla Usability Testing
Lo Fi Wireframing
Saving time was key in this project, and feeling comfortable with Figma, I hopped into creating the wireframes once my user flows were completed, as opposed to sketching and then transferring to Figma.
This is the Search Flow, where people can find their favorite songs, artists, and more. The rounded rectangle, labeled “Possibility of Viewing Ad or No Ad”, is important. I do not want the user to be bombarded with advertisements-- after all, it would change the experience drastically for our already established user base. Ads should be limited to simply being at the top of the screen, a banner that can be exited whenever the user pleases.
Here is the Subscription Flow. I didn’t want to create anything radically different than what you would see in apps such as Pandora or Spotify-- but one of the key drivers for subscription is a good price point. Thus, I included two discount plans in addition to the regular plan to start.
Here is an example of a free user browsing-- a random pop up ad included. The design is inspired by apps such as Spotify and Pandora, as it’s a clean and easy to understand browsing pattern.
This scenario is of a free user attempting to use Offline Mode-- only accessible by subscribing to Amplifire. The Offline Mode feature allows users to download all their music files, thus the “Download for Offline Play” button. Upon clicking, the user has the option of trying out the subscription.
Last but certainly not least is the Subscription scenario. The user is given their information on the Premium landing page, and the subscription flow is meant to be as frictionless as possible. The card payment flow was chosen as representative.
Useability Testing
As I moved closer to creating the prototype, I needed to see how people would react to our current wireframes. Part of the reason I chose to “sketch” or wireframe directly into Figma was because from there, I would be able to create a clickable prototype that people could interact with online. This would allow me access to a far greater range of people to interview.
I used a survey online to gather a range of people, and came up with five people eager to try out the wireframes. Interviews were done on Zoom and recorded.
Most of the people interviewed in this round were between the ages of 20-30, but one person was 65-- I made the exception because she liked to use apps a lot and also listened to a lot of XM Radio.
Perhaps the funniest quote I’ve gotten from this test was from said person. She raised her voice, albeit jokingly, and tried swiping at the ad on screen saying “GET THIS OUT OF HERE”. Every other user quickly skipped through the ads, so clearly they weren’t having the intended effect.
While some of the points taken from our Guerilla Testing were frustrations such as color and features such as “equalizers”, those could be kept in mind for future iterations of Amplifire. However, our greatest and most urgent pain points were as follows:
Ad Reactions– pop-up ads interrupt the flow of the user experience.
Definition Confusion– Library symbol should be replaced with a CD, and instead of just “library” go with “audio library”. Add a title for the content above Artists for You, like “Newest Songs”.
Benefits– Include and emphasize a 30-day free trial with every premium plan.
Unexpected Browsing Patterns– include a search bar at the top of the dashboard page.
New Features– include equalizer in future settings. Consider exploring the idea of a friends list as an interesting way to separate us from other music streaming apps.
Song Downloading for Offline Mode– add hamburger menu for songs, give users options to download individually, save, etc.
Navigation– continue monitoring information architecture and making sure it corresponds to our new changes, e.g. search bars.
The Amplifire Prototype
High Fidelity Frames and Testing
From here, I moved the changes into the high fidelity frames.
Resolving a few issues at once, I decided to simplify the advertisement from a pop up that stops the user flow to an ad with strong call to action and no interruption to what the user is doing (in this example, searching about the artist Mastodon.)
Next, we have changed the book in library to a CD-- more subtitles for pages are added, too, in order to help explain the function of various features.
The Amplifire dashboard now has the search feature at the top. The immediate availability of searching appears to be key for users.
Each song has its own menu or list of actions that can be opened through the hamburger menu. Downloading and other features will be found here.
And so here we have the prototype! I wanted to make sure I kept the dark colors that make music apps attractive, while maintaining the intended branding. I felt like a nightclub or rave was a good inspiration for the colors, complete with the hazy borders and tech-inspired imagery with the text.
For a look at the Style Guide that was created for Amplifire, click here.
To take a look at the initial Amplifire Prototype in Figma, click here.
Usability Testing
For this round of testing, we sent out Calendly links to people interested in music streaming apps and gathered five more individuals. Again, using an interview script, people were interviewed through Zoom and recorded.
Here we have the raw results of the testing, in the form of affinity mapping. Many positive comments were made in this round of testing, but for the purposes of improving the app, we will only glean over those results while diving deep into the pain points I consider highest priority.
All About the Ads -- Four out of five users explained the ads were too wordy. Other portions of the app were also “too wordy”, such as the premium plan title cards.
Payment -- Three of five users naturally wanted to finish the payment flow at the bottom of the screen as opposed to the top, where “done” was. One user wasn’t sure if the payment had gone through when returning to the payment confirmation screen.
Payment Method Box-- Three of five users clicked an outlined box in the payment choice screen, incorrectly assuming it was an input field.
Clutter-- Three of five users expressed concern that the app felt cramped and cluttered on certain pages
The Future for Amplifire
Reiteration and what to take away from the results
Some of our lower-priority changes were also easily fixed-- but our highest priority fixes came first. Here are the results of the iterations that took place:
I’m excited with the results of this project. The last round of testing seemed to have produced a lot of compliments, such as the enthusiasm for the discount plans and the overall aesthetic of the application itself. While the music streaming service world is competitive, we may be able to benefit by providing some features that other apps don’t have. Of course, we would have to test and research if it is feasible or in the true spirit of Amplifire’s stakeholders.