Nosono

Adding multiple points of entry for paid subscribers to a music playback app

Screen Shot 2022-09-16 at 2.04.24 AM.png

The Challenge

A startup company launched a media product two years ago. It is a freemium model that has a mobile app for both iOS. 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. At this point, the product has been well received and has a healthy user base of free users. They now need to design an experience that will allow users to subscribe and pay a monthly fee. The goals were:

1. Create the opportunity for new users to subscribe to the premium product upon registration in the signup flow.

2. Create opportunities for returning free users to become paid subscribers in the sign-in flow as well as within the product, once logged in.

By creating a paid product with better features than the free experience and giving users the opportunity to upgrade to a better product, users will pay the subscription fee. This will lead to a profitable revenue stream.

The Outcome

A high-fidelity prototype of Nosono with these new features, integrated seamlessly with the app's existing design.

The Process

DEFINE &

IDEATE

RESEARCH

USER INTERFACE DESIGN & TESTING

20%

10%

15%

55%

The Players

Just me! And my trusted sidekick, Figma.

The Prototype (3 task flows)

Click to open in Figma.

Phase 1: Research

Secondary

I kicked off the project by learning more about the competition's positioning in the music streaming industry. I focused my research on Spotify, YouTube, and Pandora. Through this market research, I also uncovered challenges faced by each app and points in the upgrading to Premium flow that could be improved. Based on these findings, I concluded that my user interviews would need to be of:

Spotify Premium, YouTube Premium or Pandora Premium users who use their respective app at least 2-3 times per week
Millennials

Primary

I conducted interviews with five Spotify/YouTube/Pandora users, found by word of mouth. Each interview was conducted virtually for about 20 minutes and the purpose was to understand the allures and pinch points of competing apps as well as what users preferred and why.

The following were required characteristics of the participants of this study:

21-30 years old
Very tech savvy - are on their phones for 2+ hours a day
Very budget conscious
Listen to music 3+ times a week.

Using an affinity map, I was able to group together my findings.

These are some of the snippets of Nishat and Rishi that sparked initial thought. 5/5 users claimed to listen to music at least for 1 hour a day, when working out. Something to explore later - but I was intrigued at the correlation between music and activity.

Candidates:

Age/Sex

Screen Shot 2022-09-19 at 10.27.38 PM.png

User Statements:

Umbrella Statement:

Theme:

Insight:

Screen Shot 2022-09-19 at 10.19.28 PM.png

Screen Shot 2022-09-19 at 10.16.45 PM.png

User Statements:

Umbrella Statement:

Theme:

Insight:

Screen Shot 2022-09-19 at 10.14.25 PM.png

Screen Shot 2022-09-19 at 10.18.28 PM.png

I then created a persona with this information – a guideline for the product development and marketing processes that follow.

Screen Shot 2022-09-16 at 2.27.02 AM.png

Phase 2: Define

Using insights, I crafted "How Might We" (HMW) questions to define the design problem, as well as started a column for initial brainstorming ideas that came to my mind.

Screen Shot 2022-09-19 at 10.09.09 PM.png

Choosing the efficiency value to build on for the paid subscribers of Nosono, I started listing steps of initial user flows.

Screen Shot 2022-09-19 at 10.31.19 PM.png

Screen Shot 2022-09-19 at 10.31.13 PM.png

Phase 3: Ideate

As I brainstormed a handful of ideas to answer each HMW question. I was particularly interested in music and fitness, and the synchronization of both to develop the efficiency desired by music users. The idea of bridging the two into a Premium feature of Nosono was born.

I started by sketching to understand how this could work, and because I am a visual person, things started falling into place.

If this music app could send signals to Apple Health and tap into that data to display both music details and fitness details on one screen, that would prevent the user from switching between the two constantly - like Apple Health and Spotify, therefore increasing the value of efficiency.

With the new features selected, I then created an site map to determine where to place each feature. To ensure any new navigation would be intuitive to users, there was a lot of referring back to exisitng and sucessful apps.

Site Map

Screen Shot 2022-09-19 at 10.42.52 PM.png

Legend

There were three main task flows that were established; one at the sign up point for new users, and two entry points within the app for existing users. These were mapped out with edge cases, to ensure there was always a success route.

Task Flow 1: Premium Pop Up at Sign Up

Screen Shot 2022-09-23 at 2.38.20 PM.png

Task Flow 2: Premiuim Pop up for detected activity

Screen Shot 2022-09-19 at 10.49.14 PM.png

Task Flow 3: Upgrade to Premium Fitness Plus and Bump Song

Screen Shot 2022-09-19 at 10.51.58 PM.png

Phase 4: Design

Wireframes/Lo Fidelity Mockups

In my processes, the line between the next few steps is very blurred. I"m constantly adding detail and color to wireframes until they resemble lo-fidelity wireframes, and eventually, high-fidelity wireframes.

Screen Shot 2022-09-19 at 7.13.18 PM.png

Branding

As a music app linked to fitness, I wanted to create a sense of movement through the logo (sound waves), as well as the images and colors. I used a bright electric palette to create a sense of energy, youth, and fun.

Screen Shot 2022-09-23 at 2.17.53 PM.png

High Fidelity Mockups

High fidelity Mockups of each screen were created to then proceed into user testing. Below are snapshots of key screens pertaining to branding and logo, upgrading to premium, and then specifically the screens pertaining to music once upgraded.

Screen Shot 2022-09-19 at 3.24.51 PM.png

Screen Shot 2022-09-19 at 3.24.28 PM.png

Screen Shot 2022-09-19 at 3.24.36 PM.png

Screen Shot 2022-09-19 at 6.49.59 PM.png

Guiding Text/Loading Screens

Logo/Loading Screen

Screen Shot 2022-09-19 at 11.42.14 PM.png

Now Playing 'Freemium Model"

Screen Shot 2022-09-19 at 2.48.57 PM.png

Screen Shot 2022-09-19 at 2.49.09 PM.png

Screen Shot 2022-09-19 at 2.48.38 PM.png

Premium Notification

Screen Shot 2022-09-19 at 3.25.06 PM.png

Screen Shot 2022-09-19 at 3.25.14 PM.png

Screen Shot 2022-09-19 at 3.25.22 PM.png

Screen Shot 2022-09-19 at 2.47.14 PM.png

Screen Shot 2022-09-19 at 2.46.53 PM.png

Screen Shot 2022-09-19 at 2.47.24 PM.png

Now Playing

"Premium model"

Curated Playlist

Tips on how to customize your interface

Playlists curated by activity, in this case, running.

Fitness Metrics updating real time, syncing with Apple Health

Playlists curated by bpm range.

User Testing

For the Nosono user testing sessions I interview five people that fit into the app's persona: “Pooja.” All interviews were conducted virtually and lasted about 20 minutes.

The tasks for the users were as follows:

Create an account for Nosono.
Upgrade to Fitness Premium.
Play a song from the suggested playlist.
Explain the differences of each subscription.
Enable your settings to Bump a song to a buddy.

Confirmation of Payment

Premium Plans Comparison

Akash

29M

Screen Shot 2022-09-19 at 3.36.29 PM.png

“Looks similar to Spotify”

" Can email/password be on the same page? It's a lot of steps"

"I don’t know enough about Premium to upgrade right now"

"I'm looking at watch when working out, not my phone screen"

Screen Shot 2022-09-19 at 3.28.45 PM.png

Nitin

28M

Neil

26M

Screen Shot 2022-09-19 at 3.29.51 PM.png

“I would go with the free trial - I like to test things out first”

"Bump is a great feature - what if I want to hear a buddy’s music? Can I request them to share?"

"Can you select and change the heart rate or BPM in settings?"

"I would pay for Premium"

"The tabs are confusing - they don't work like other Apple tabs"

Screen Shot 2022-09-19 at 3.30.15 PM.png

Alyssa

29F

Abhinav

32M

Screen Shot 2022-09-19 at 3.32.58 PM.png

"If my heart rate changes, is the playlist for a range? Or does it change everytime your heart rate changes?'

"Will it charge my card immediately?"

Screen Shot 2022-09-20 at 2.12.01 AM.png

Screen Shot 2022-09-20 at 2.12.52 AM.png

Phase 5: Prototyping, Testing, and Iteration

Given the user testing, these were the three major themes chosen to be iterated upon.

1.Condensing Log in

Insight: Users appreciate as few steps signing up as possible. They also show hesitation to signing up for free when they don’t know what features their money will go to or how Nosono functions. The free trial seems to be a necessity that almost renders this task flow useless.

Action: The sign up will be consolidated to have all necessary info on one screen.
The “Upgrade to Premium” notification in the signup flow will link to a “learn more” for users who are interested. Even though most users prefer to test out the free trial before upgrading, this nortification will be here for the few that decide to take a leap of trust.

Screen Shot 2022-09-20 at 12.50.03 AM.png

Before

4 screens total of sign up flow

After

Screen Shot 2022-09-19 at 2.46.00 PM.png

2 screens total of sign up flow

Screen Shot 2022-09-19 at 2.46.12 PM.png

Additional Screen

2. Enticing and clear visuals/language

Insight: Users were not enticed to upgrade to Premium because the wording was tiresome. The pop up notifications are boring, long, causing the user to skim and miss information and the bump notification was small; likely to be missed. The premium plans were confusing to compare and the tabs do not function as other mobile conventions. When a user encountered a glitch subscribing, I worried they became less likely to upgrade and trust Nosono for its services.

Action: All notifications in the app were spiced up with energetic language and an icon or visual. The bump feature grew.
The premium screen was revamped entirely after studying Spotify’s model again. Information was consolidated onto one screen, the tab language standardized with other mobile conventions, and the call to action button always in an active state for both upgrade options. I also included the benefits of the free base plan in comparison with the paid benefits, which was missing before.

After reading " Don't Make Me Think," I decided to remove the red "x" buttons in the premium plan screens, as they seemed a little deterring, and revamped the language to read green ✔'s just for included benefits.

Screen Shot 2022-09-20 at 1.11.03 AM.png

Screen Shot 2022-09-20 at 1.10.46 AM.png

2+ screens total of premium plans

Screen Shot 2022-09-20 at 1.10.53 AM.png

Screen Shot 2022-09-20 at 1.47.09 AM.png

After

1 screen of premium plans

Screen Shot 2022-09-19 at 2.46.25 PM.png

Screen Shot 2022-09-20 at 1.36.59 AM.png

Additional Screen

Screen Shot 2022-09-19 at 2.47.50 PM.png

Screen Shot 2022-09-20 at 1.46.39 AM.png

3. Receipt of payment

Insight: Users had many questions about the payment screens. They did not understand the initial design to scroll different types of payment. I got many questions like, "what about Apple Pay?" It was unclear to them when payment would begin, if it would be reoccurring, and some just wanted clarification that this month would be free.

Action: I realized there were many "answers' regarding payment that I forgot to provide the user; a simple "congrats" was not confirmation enough that the payment was successful. I revamped the receipt of payment screen to include more of these details. I also added a screen to have the user chose their preferred method of payment before, because the initial design was clearly not intuitive for the user.

After

Before

Additional Screen

4. Apple Watch interface

Insight: When specifically asked what the fitness metrics users wanted to see on the "now playing" screen, they said they would put their phone away after choosing a playlist. They said they did not look at their phone but their Apple watch or fitness device.

Action: This was a great opportunity for me to design a couple screens for an Apple watch. I assume Nosono would have a counterpart interface for the watch as well.

Screen Shot 2022-09-19 at 7.18.32 PM.png

Click to see the final prototype in Figma!

Screen Shot 2022-09-19 at 7.38.51 PM.png

If I had more time.....

I would look into using Apple Health's iconology and language for the imported fitness metrics to show the connection to that app and make it familiar to the user!

It would also be interesting to study what other features could be built out as a part of the Fitness Premium plan - perhaps access to famous athlete's playlists? Serena William's playlist for tennis players and Usain Bolt's playlist for runners?