.png){kind=small}
Screenr Mobile App
The Project
A startup company launched a media product two years ago. The mobile app has a healthy user base of free users, and the company now needs to design an experience that will allow users to subscribe and pay a monthly fee.
The Screenr Mobile App provides a premium streaming service to watch TV and movies, integrating a seamless freemium-to-premium conversion flow.
Context
Framing the challenge
The Company laid out the following business goals:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
The Company has defined the following target user:
18-24 years old
Very tech-savvy
Target users are on their phones for several hours a day
Very budget-conscious
They don’t like spending a ton on monthly services
Content consumers
Video streaming is a very important part of their lives
Staying on schedule
In order to stay on schedule, I created a simple Project Plan. I posted this above my desk for quick reference.
Analyzing the competition
After deciding that I would create a video streaming service, I focused my competitive analysis on the following services:
And I created a comprehensive competitive analysis one-sheet:
I took features that worked from these existing apps:
- Multiple subscription tiers
- Ad-supported and ad-free options
- Premium original programming
And absorbed them into my designs, then sought to improve things that weren’t quite working with these other apps, like the lack of clearly-defined benefits in YouTube’s premium sign up.
User Flows
Choosing the right paths
From here, I designed two main user flows for someone upgrading from the freemium model to premium:
FLOW #1
New User upgrading from Freemium to premium
FLOW #2
Existing User upgrading from Freemium to premium
Design
Building key functionality
Based on this, I designed my main wireflows for the app:
Flow #1
New User upgrading from Freemium to premium
Flow #2
Existing User upgrading from Freemium to premium
Usability Testing
Testing wireframes to establish a baseline
I tested these wireframes remotely with 4 participants, all of whom have had experience upgrading from freemium to premium:
My primary goal was to assess ease-of-use when participants attempt to accomplish the following tasks:
- Subscribe to Screenr Unlimited service in the onboarding flow
- As someone who HASN’T signed up for premium yet, sign up for the service and watch the featured movie
- Starting from the login flow, find a way to find the features/benefits of the premium service
Results/Synthesis
Prioritizing solutions for the highest impact
I synthesized the results of my test using Affinity Mapping in Trello:
After organizing the results, several key issues stood out:
CLARITY OF FEATURES
One of the key features of the app was the ability to gain days of the premium service by sharing the app with friends and family. This feature confused users since it lacked specifics on how the system worked. So I incorporated details into the hi-fi designs:
Share Screenr functionality before and after
FEEDBACK & CONFIRMATION
Users also wanted more feedback when performing key tasks like signing up for Screenr or paying for the premium service or a movie rental. For this, I added a simple confirmation banner / toast to these key screens to give the user instant feedback:
UPGRADING TIERS / CTA VISIBILITY
Users wanted multiple ways of upgrading subscription tiers in different locations within the app, so I made sure to position relevant CTA buttons in prominent places. It was tricky to make the CTA’s unobtrusive while maintaining visibility, but I think I struck the appropriate balance:
1. Upgrade CTA on Home Screen
2. Upgrade CTA in TV Details Screen
3. Upgrade CTA in Downloads Screen
ACCOUNT SCREEN
Most importantly, all users tested said the first place they would go to upgrade their subscription would be the Account Screen. So I designed an Account Screen that highlights the user’s current plan and showcases their upgrade options:
Interaction Design
Delighting the user with fluid interactions
It was important to me to design a fluid experience using the app since users are accustomed to this type of interactivity in video streaming services. I made sure to incorporate meaningful and motivated interaction design when building out the prototype:
- Interactions are purposeful
- Buttons have easy-to-discern tap states.
- All of the shelves are horizontally scrollable
Hi-fi Testing
Validating my design choices
This attention to detail led to pleasant usability testing sessions that were free from the distractions of broken links and navigational confusion.
While the reactions to my prototype were overwhelmingly positive, pointed out a few issues that hindered the app’s usability.
LANDING SCREEN
The landing Screen was deemed superfluous without any meaningful CTAs, so I added sign up and log in buttons:
LOGIN CTAs
Most users didn't immediately notice the login CTA, so I added a dedicated login button:
UPGRADE CTAs
Users were confused by the two upgrade CTAs, saying they were too similar in appearance, so I adjusted the color of the higher end button:
Impact / Conclusion
Measuring the success of the project
To remind you of the business objectives originally laid out by the company:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
SUBSCRIBING IN SIGN UP
These designs provide ample opportunity for the user to upgrade to premium in the sign up flow:
SUBSCRIBING IN LOGIN
This also provides the user an opportunity to upgrade in the login flow:
SUBSCRIBING WITHIN APP
As well as while using the app:
The Project
A startup company launched a media product two years ago. The mobile app has a healthy user base of free users, and the company now needs to design an experience that will allow users to subscribe and pay a monthly fee.
The Screenr Mobile App provides a premium streaming service to watch TV and movies, integrating a seamless freemium-to-premium conversion flow.
Context
Framing the challenge
The Company laid out the following business goals:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
The Company has defined the following target user:
18-24 years old
Very tech-savvy
Target users are on their phones for several hours a day
Very budget-conscious
They don’t like spending a ton on monthly services
Content consumers
Video streaming is a very important part of their lives
Staying on schedule
In order to stay on schedule, I created a simple Project Plan. I posted this above my desk for quick reference.
Analyzing the competition
After deciding that I would create a video streaming service, I focused my competitive analysis on the following services:
And I created a comprehensive competitive analysis one-sheet:
I took features that worked from these existing apps:
- Multiple subscription tiers
- Ad-supported and ad-free options
- Premium original programming
And absorbed them into my designs, then sought to improve things that weren’t quite working with these other apps, like the lack of clearly-defined benefits in YouTube’s premium sign up.
User Flows
Choosing the right paths
From here, I designed two main user flows for someone upgrading from the freemium model to premium:
FLOW #1
New User upgrading from Freemium to premium
FLOW #2
Existing User upgrading from Freemium to premium
Design
Building key functionality
Based on this, I designed my main wireflows for the app:
Flow #1
New User upgrading from Freemium to premium
Flow #2
Existing User upgrading from Freemium to premium
Usability Testing
Testing wireframes to establish a baseline
I tested these wireframes remotely with 4 participants, all of whom have had experience upgrading from freemium to premium:
My primary goal was to assess ease-of-use when participants attempt to accomplish the following tasks:
- Subscribe to Screenr Unlimited service in the onboarding flow
- As someone who HASN’T signed up for premium yet, sign up for the service and watch the featured movie
- Starting from the login flow, find a way to find the features/benefits of the premium service
Results/Synthesis
Prioritizing solutions for the highest impact
I synthesized the results of my test using Affinity Mapping in Trello:
After organizing the results, several key issues stood out:
CLARITY OF FEATURES
One of the key features of the app was the ability to gain days of the premium service by sharing the app with friends and family. This feature confused users since it lacked specifics on how the system worked. So I incorporated details into the hi-fi designs:
Share Screenr functionality before and after
FEEDBACK & CONFIRMATION
Users also wanted more feedback when performing key tasks like signing up for Screenr or paying for the premium service or a movie rental. For this, I added a simple confirmation banner / toast to these key screens to give the user instant feedback:
UPGRADING TIERS / CTA VISIBILITY
Users wanted multiple ways of upgrading subscription tiers in different locations within the app, so I made sure to position relevant CTA buttons in prominent places. It was tricky to make the CTA’s unobtrusive while maintaining visibility, but I think I struck the appropriate balance:
1. Upgrade CTA on Home Screen
2. Upgrade CTA in TV Details Screen
3. Upgrade CTA in Downloads Screen
ACCOUNT SCREEN
Most importantly, all users tested said the first place they would go to upgrade their subscription would be the Account Screen. So I designed an Account Screen that highlights the user’s current plan and showcases their upgrade options:
Interaction Design
Delighting the user with fluid interactions
It was important to me to design a fluid experience using the app since users are accustomed to this type of interactivity in video streaming services. I made sure to incorporate meaningful and motivated interaction design when building out the prototype:
- Interactions are purposeful
- Buttons have easy-to-discern tap states.
- All of the shelves are horizontally scrollable
Hi-fi Testing
Validating my design choices
This attention to detail led to pleasant usability testing sessions that were free from the distractions of broken links and navigational confusion.
While the reactions to my prototype were overwhelmingly positive, pointed out a few issues that hindered the app’s usability.
LANDING SCREEN
The landing Screen was deemed superfluous without any meaningful CTAs, so I added sign up and log in buttons:
LOGIN CTAs
Most users didn't immediately notice the login CTA, so I added a dedicated login button:
UPGRADE CTAs
Users were confused by the two upgrade CTAs, saying they were too similar in appearance, so I adjusted the color of the higher end button:
Impact / Conclusion
Measuring the success of the project
To remind you of the business objectives originally laid out by the company:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
SUBSCRIBING IN SIGN UP
These designs provide ample opportunity for the user to upgrade to premium in the sign up flow:
SUBSCRIBING IN LOGIN
This also provides the user an opportunity to upgrade in the login flow:
SUBSCRIBING WITHIN APP
As well as while using the app:
ADDED VALUE
And the ability to watch the featured movie and all episodes of a TV show demonstrates the added value of the premium service to the user:
Takeaways
I feel confident I achieved the goals set out by the company.
If I had more time to devote to this project, I would have conducted a second round of usability testing that focused more on the general usability of the app. I would have also explored other ways of adding value to the product to make the premium tier more attractive to users. For instance: Adding new forms of media into the experience like video content from popular content creators.
Overall, this project was challenging and allowed me to expand my capabilities as a designer for mobile.
The Project
A startup company launched a media product two years ago. The mobile app has a healthy user base of free users, and the company now needs to design an experience that will allow users to subscribe and pay a monthly fee.
The Screenr Mobile App provides a premium streaming service to watch TV and movies, integrating a seamless freemium-to-premium conversion flow.
Context
Framing the challenge
The Company laid out the following business goals:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
The Company has defined the following target user:
18-24 years old
Very tech-savvy
Target users are on their phones for several hours a day
Very budget-conscious
They don’t like spending a ton on monthly services
Content consumers
Video streaming is a very important part of their lives
Staying on schedule
In order to stay on schedule, I created a simple Project Plan. I posted this above my desk for quick reference.
Analyzing the competition
After deciding that I would create a video streaming service, I focused my competitive analysis on the following services:
And I created a comprehensive competitive analysis one-sheet:
I took features that worked from these existing apps:
- Multiple subscription tiers
- Ad-supported and ad-free options
- Premium original programming
And absorbed them into my designs, then sought to improve things that weren’t quite working with these other apps, like the lack of clearly-defined benefits in YouTube’s premium sign up.
User Flows
Choosing the right paths
From here, I designed two main user flows for someone upgrading from the freemium model to premium:
FLOW #1
New User upgrading from Freemium to premium
FLOW #2
Existing User upgrading from Freemium to premium
Design
Building key functionality
Based on this, I designed my main wireflows for the app:
Flow #1
New User upgrading from Freemium to premium
Flow #2
Existing User upgrading from Freemium to premium
Usability Testing
Testing wireframes to establish a baseline
I tested these wireframes remotely with 4 participants, all of whom have had experience upgrading from freemium to premium:
My primary goal was to assess ease-of-use when participants attempt to accomplish the following tasks:
- Subscribe to Screenr Unlimited service in the onboarding flow
- As someone who HASN’T signed up for premium yet, sign up for the service and watch the featured movie
- Starting from the login flow, find a way to find the features/benefits of the premium service
Results/Synthesis
Prioritizing solutions for the highest impact
I synthesized the results of my test using Affinity Mapping in Trello:
After organizing the results, several key issues stood out:
CLARITY OF FEATURES
One of the key features of the app was the ability to gain days of the premium service by sharing the app with friends and family. This feature confused users since it lacked specifics on how the system worked. So I incorporated details into the hi-fi designs:
Share Screenr functionality before and after
FEEDBACK & CONFIRMATION
Users also wanted more feedback when performing key tasks like signing up for Screenr or paying for the premium service or a movie rental. For this, I added a simple confirmation banner / toast to these key screens to give the user instant feedback:
UPGRADING TIERS / CTA VISIBILITY
Users wanted multiple ways of upgrading subscription tiers in different locations within the app, so I made sure to position relevant CTA buttons in prominent places. It was tricky to make the CTA’s unobtrusive while maintaining visibility, but I think I struck the appropriate balance:
1. Upgrade CTA on Home Screen
2. Upgrade CTA in TV Details Screen
3. Upgrade CTA in Downloads Screen
ACCOUNT SCREEN
Most importantly, all users tested said the first place they would go to upgrade their subscription would be the Account Screen. So I designed an Account Screen that highlights the user’s current plan and showcases their upgrade options:
Interaction Design
Delighting the user with fluid interactions
It was important to me to design a fluid experience using the app since users are accustomed to this type of interactivity in video streaming services. I made sure to incorporate meaningful and motivated interaction design when building out the prototype:
- Interactions are purposeful
- Buttons have easy-to-discern tap states.
- All of the shelves are horizontally scrollable
Hi-fi Testing
Validating my design choices
This attention to detail led to pleasant usability testing sessions that were free from the distractions of broken links and navigational confusion.
While the reactions to my prototype were overwhelmingly positive, pointed out a few issues that hindered the app’s usability.
LANDING SCREEN
The landing Screen was deemed superfluous without any meaningful CTAs, so I added sign up and log in buttons:
LOGIN CTAs
Most users didn't immediately notice the login CTA, so I added a dedicated login button:
UPGRADE CTAs
Users were confused by the two upgrade CTAs, saying they were too similar in appearance, so I adjusted the color of the higher end button:
The Project
A startup company launched a media product two years ago. The mobile app has a healthy user base of free users, and the company now needs to design an experience that will allow users to subscribe and pay a monthly fee.
The Screenr Mobile App provides a premium streaming service to watch TV and movies, integrating a seamless freemium-to-premium conversion flow.
Context
Framing the challenge
The Company laid out the following business goals:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
The Company has defined the following target user:
18-24 years old
Very tech-savvy
Target users are on their phones for several hours a day
Very budget-conscious
They don’t like spending a ton on monthly services
Content consumers
Video streaming is a very important part of their lives
Staying on schedule
In order to stay on schedule, I created a simple Project Plan. I posted this above my desk for quick reference.
Analyzing the competition
After deciding that I would create a video streaming service, I focused my competitive analysis on the following services:
And I created a comprehensive competitive analysis one-sheet:
I took features that worked from these existing apps:
- Multiple subscription tiers
- Ad-supported and ad-free options
- Premium original programming
And absorbed them into my designs, then sought to improve things that weren’t quite working with these other apps, like the lack of clearly-defined benefits in YouTube’s premium sign up.
User Flows
Choosing the right paths
From here, I designed two main user flows for someone upgrading from the freemium model to premium:
FLOW #1
New User upgrading from Freemium to premium
FLOW #2
Existing User upgrading from Freemium to premium
Design
Building key functionality
Based on this, I designed my main wireflows for the app:
Flow #1
New User upgrading from Freemium to premium
Flow #2
Existing User upgrading from Freemium to premium
Usability Testing
Testing wireframes to establish a baseline
I tested these wireframes remotely with 4 participants, all of whom have had experience upgrading from freemium to premium:
My primary goal was to assess ease-of-use when participants attempt to accomplish the following tasks:
- Subscribe to Screenr Unlimited service in the onboarding flow
- As someone who HASN’T signed up for premium yet, sign up for the service and watch the featured movie
- Starting from the login flow, find a way to find the features/benefits of the premium service
Results/Synthesis
Prioritizing solutions for the highest impact
I synthesized the results of my test using Affinity Mapping in Trello:
After organizing the results, several key issues stood out:
CLARITY OF FEATURES
One of the key features of the app was the ability to gain days of the premium service by sharing the app with friends and family. This feature confused users since it lacked specifics on how the system worked. So I incorporated details into the hi-fi designs:
Share Screenr functionality before and after
FEEDBACK & CONFIRMATION
Users also wanted more feedback when performing key tasks like signing up for Screenr or paying for the premium service or a movie rental. For this, I added a simple confirmation banner / toast to these key screens to give the user instant feedback:
UPGRADING TIERS / CTA VISIBILITY
Users wanted multiple ways of upgrading subscription tiers in different locations within the app, so I made sure to position relevant CTA buttons in prominent places. It was tricky to make the CTA’s unobtrusive while maintaining visibility, but I think I struck the appropriate balance:
1. Upgrade CTA on Home Screen
2. Upgrade CTA in TV Details Screen
3. Upgrade CTA in Downloads Screen
ACCOUNT SCREEN
Most importantly, all users tested said the first place they would go to upgrade their subscription would be the Account Screen. So I designed an Account Screen that highlights the user’s current plan and showcases their upgrade options:
Interaction Design
Delighting the user with fluid interactions
It was important to me to design a fluid experience using the app since users are accustomed to this type of interactivity in video streaming services. I made sure to incorporate meaningful and motivated interaction design when building out the prototype:
- Interactions are purposeful
- Buttons have easy-to-discern tap states.
- All of the shelves are horizontally scrollable
Hi-fi Testing
Validating my design choices
This attention to detail led to pleasant usability testing sessions that were free from the distractions of broken links and navigational confusion.
While the reactions to my prototype were overwhelmingly positive, pointed out a few issues that hindered the app’s usability.
LANDING SCREEN
The landing Screen was deemed superfluous without any meaningful CTAs, so I added sign up and log in buttons:
LOGIN CTAs
Most users didn't immediately notice the login CTA, so I added a dedicated login button:
UPGRADE CTAs
Users were confused by the two upgrade CTAs, saying they were too similar in appearance, so I adjusted the color of the higher end button:
The Project
A startup company launched a media product two years ago. The mobile app has a healthy user base of free users, and the company now needs to design an experience that will allow users to subscribe and pay a monthly fee.
The Screenr Mobile App provides a premium streaming service to watch TV and movies, integrating a seamless freemium-to-premium conversion flow.
Context
Framing the challenge
The Company laid out the following business goals:
- Create the opportunity for new users to subscribe to premium in the signup 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).
- Create a paid product with better features than the free experience.
The Company has defined the following target user:
18-24 years old
Very tech-savvy
Target users are on their phones for several hours a day
Very budget-conscious
They don’t like spending a ton on monthly services
Content consumers
Video streaming is a very important part of their lives
Staying on schedule
In order to stay on schedule, I created a simple Project Plan. I posted this above my desk for quick reference.
Analyzing the competition
After deciding that I would create a video streaming service, I focused my competitive analysis on the following services:
And I created a comprehensive competitive analysis one-sheet:
I took features that worked from these existing apps:
- Multiple subscription tiers
- Ad-supported and ad-free options
- Premium original programming
And absorbed them into my designs, then sought to improve things that weren’t quite working with these other apps, like the lack of clearly-defined benefits in YouTube’s premium sign up.
User Flows
Choosing the right paths
From here, I designed two main user flows for someone upgrading from the freemium model to premium:
FLOW #1
New User upgrading from Freemium to premium
FLOW #2
Existing User upgrading from Freemium to premium
Design
Building key functionality
Based on this, I designed my main wireflows for the app:
Flow #1
New User upgrading from Freemium to premium
Flow #2
Existing User upgrading from Freemium to premium
Usability Testing
Testing wireframes to establish a baseline
I tested these wireframes remotely with 4 participants, all of whom have had experience upgrading from freemium to premium:
My primary goal was to assess ease-of-use when participants attempt to accomplish the following tasks:
- Subscribe to Screenr Unlimited service in the onboarding flow
- As someone who HASN’T signed up for premium yet, sign up for the service and watch the featured movie
- Starting from the login flow, find a way to find the features/benefits of the premium service
Results/Synthesis
Prioritizing solutions for the highest impact
I synthesized the results of my test using Affinity Mapping in Trello:
After organizing the results, several key issues stood out:
CLARITY OF FEATURES
One of the key features of the app was the ability to gain days of the premium service by sharing the app with friends and family. This feature confused users since it lacked specifics on how the system worked. So I incorporated details into the hi-fi designs:
Share Screenr functionality before and after
FEEDBACK & CONFIRMATION
Users also wanted more feedback when performing key tasks like signing up for Screenr or paying for the premium service or a movie rental. For this, I added a simple confirmation banner / toast to these key screens to give the user instant feedback:
UPGRADING TIERS / CTA VISIBILITY
Users wanted multiple ways of upgrading subscription tiers in different locations within the app, so I made sure to position relevant CTA buttons in prominent places. It was tricky to make the CTA’s unobtrusive while maintaining visibility, but I think I struck the appropriate balance:
1. Upgrade CTA on Home Screen
2. Upgrade CTA in TV Details Screen
3. Upgrade CTA in Downloads Screen
ACCOUNT SCREEN
Most importantly, all users tested said the first place they would go to upgrade their subscription would be the Account Screen. So I designed an Account Screen that highlights the user’s current plan and showcases their upgrade options:
Interaction Design
Delighting the user with fluid interactions
It was important to me to design a fluid experience using the app since users are accustomed to this type of interactivity in video streaming services. I made sure to incorporate meaningful and motivated interaction design when building out the prototype:
- Interactions are purposeful
- Buttons have easy-to-discern tap states.
- All of the shelves are horizontally scrollable
Hi-fi Testing
Validating my design choices
This attention to detail led to pleasant usability testing sessions that were free from the distractions of broken links and navigational confusion.
While the reactions to my prototype were overwhelmingly positive, pointed out a few issues that hindered the app’s usability.
LANDING SCREEN
The landing Screen was deemed superfluous without any meaningful CTAs, so I added sign up and log in buttons:
LOGIN CTAs
Most users didn't immediately notice the login CTA, so I added a dedicated login button:
UPGRADE CTAs
Users were confused by the two upgrade CTAs, saying they were too similar in appearance, so I adjusted the color of the higher end button:
Other Projects
©2022 Designed with ❤️ by Jon Stahl.