Background
Freemium to premium
A startup company created a media app with a freemium business model. It was well-received, and now they have decided to introduce a service that will allow users to subscribe and pay a monthly fee for a better experience.


Problem
What does the company need?
• Create the opportunity for new users to subscribe to the premium product upon registration in the sign up flow.
• Create the opportunity for returning free users to become paid subscribers in the sign-in flow as well as within the product (once logged in).

Role
Solo Designer
I completed the full design process, end to end.
Secondary Research
What design traits have the best click-through rates?
I investigated the types of CTA’s with the best click-through rates. Protocol80.com shows specific designs that increase the click-through rate for CTA’s. Below are 3 examples of design styles I used for my CTA designs.
These were the 3 methods of improving click-though rates that I explored in my design
Competitive Analysis
What CTAs do others use?

• CTA’s with contrasting colors to make them stand out.

• Language in their CTA’s that's personalized. i.e “My”

• CTA’s in the bottom navigation bar.

• A custom logo for the premium service.
User Stories
User Goal
As a new user I want to be able to quickly play a song
Business Goal
To give new and existing users opportunities to sign up for the Premium Service
User Flows
Getting to the goal
It was important to layout the user flow to help me understand how I can accomplish both the user goals and business goals.​​​​​​​
As a new user I want to sign up, and play a song.
As an existing free user, that is already logged in, I want to play a song, and maybe sign up for premium
Wire Frame
CTA placement
I chose to place the CTA's in these specific spots, because this what I learned had worked from my research. I copied the placement from all 3 competitors. See below for explanation of each spot.
1. This CTA is a swipable carousel that appears when a new or existing user opens the app. This will contain a large photo with information about the premium service.
2. This CTA will appear in the top right area, as a small non intrusive clickable text.
3. This is a larger CTA that is at the top of the screen to gain more attention of the user.
4. This pop up CTA will only appear when the user tries to use a specific premium feature.
5. This is a small icon in the nav bar that leads the user to the premium signup page.
Design System
How it should look
I chose black background because that is what worked for industry. I chose a bright purple color to contrast well with the black. I also conducted a contrast test on all the color combinations to make sure it is accessible to everyone with bad eye sight. I also made sure to use fonts that were big enough to pass the contrast test.
Designing the CTA
Style and copy
I took what I learned from my competitive analysis and secondary research, and applied it to the CTA's. For example, I used an icon on the button because that increases click through rate by 26%. I used possessive language on the button because that increases click through rate by 90%. I added some info about the service next to the button because that increases click through rate by 17%. I also laid out the CTA similar to the competitors.
Prototype
Low fidelity
This was a good exercise to get the layout figured out. This was helpful to understand the flow the user would take to complete their main use case. 
User Testing Round 1
Task completion test
5 users were asked to sign up for a free account, and then sign up for a premium account to see how fast they can accomplish it. This test will show us 2 things; 1. How easy is the app the use 2. Which CTA stands out the most.
+ 3 of 5 users were able to sign up for a free account quickly.
+ 4 of 5 users were able to sign up for a premium account quickly.
- 4 out of 5 users used the LP+ button in the nav. bar when asked to sign up for premium.
- 2 of 5 users had trouble finding the free account plan, when signing up.
Iteration
Changes
• I added images and some text on the splash page. 
• The lowfidelity Plan page had the free plan at the bottom which caused problems with the users trying to find it. So I moved it to the top to help users find it and understand the plans better. 
• I added album art and pop up CTA tied to "Friends Media" section stating that's a premium feature.
Multivariate Test
Which CTAs stand out the best?
I showed 6 users, 3 pages, and simply asked what stands out to you and why?​​​​​​​
• 5 out of 5 said Option 1 stood out the most.

• 5 out of 5 users said Option 2 stood out the 2nd most.

• 2 out of 5 users did not recognize the ad in Option 3 at first.
User Testing Round 2
Testing high prototype
+ 5 of 5 users were able to sign up for a free account quickly (40% increase from round 1).
+ 5 of 5 users were able to sign up for a premium account quickly (20% increase from round 1).
- 2 of 5 users couldn’t read the copy CTA very easily on the “Splash Page”.
- 1 of 5 users didn’t immediately understand the copy of the CTA on the “Home Page”.
Iteration
Changes
• I changed the CTA on the Splash page to be more apealing, and clear about what it is saying.
• I removed 1 row of the friends media section because that is a premium feature, I didn't want to emphasize it too much as to force users to sign up.​​​​​​​
Conclusion
Problem Solved
The goal was to help new and existing users to sign up for the premium service
After researching which CTA's have the best clickthrough rate, and what the competition does to increase premium users, I designed an app to maximize the clickthrough rate, and ease of use.

Testing and iterating the best solution
These designs were tested with a two Time to Task Completion Tests, and a Multivariate Test. Users found the CTAs to be very unobtrusive, eye catching, and clear to understand. Users found the sign up process very quick, and easy.
Challenges
Some users did not understand the CTA's copy on the first round. This was due to the design, and verbiage. After changing the copy and design contrast, I found that the users were able to understand the CTA better. 
If this project was for a real company, I would have used sign up data to know which CTA works the best and how well it works. I would roll out different CTA's to different users to see which one results in higher sign up and clickthrough rates, then roll out the best one to all users.
Try it out!
↑Back to Top