01
Overview
StreamVibes is a pre-existing, fictional video streaming app offering free movies and shows with ads.
The app uses a freemium model and is now looking to attract paid Premium users within the sign up and sign in flow for both new and returning users.
StreamVibes is a pre-existing, fictional video streaming app offering free movies and shows with ads.
The app uses a freemium model and is now looking to attract paid Premium users within the sign up and sign in flow for both new and returning users.
StreamVibes is a pre-existing, fictional video streaming app offering free movies and shows with ads.
The app uses a freemium model and is now looking to attract paid Premium users within the sign up and sign in flow for both new and returning users.
Duration
3 Weeks
Team
Solo - Design Challenge
Role
Product Design
UX Research
UI Design
Branding
Usability Testing
Prototyping
02
Design Challenge
How might we design a sign up / sign in flows to encourage users to upgrade to Premium?
From a business perspective, every opportunity to promote Premium should be utilized. But from UX perspective, users can easily be frustrated from being bombarded with Premium asks at every turn.
There's a fine balance to design here!
StreamVibes is a fictional company. As part of the challenge, I had to design StreamVibes from the ground up. This included building the brand and Premium offerings.
How might we design a sign up / sign in flows to encourage users to upgrade to Premium?
From a business perspective, every opportunity to promote Premium should be utilized. But from UX perspective, users can easily be frustrated from being bombarded with Premium asks at every turn.
There's a fine balance to design here!
StreamVibes is a fictional company. As part of the challenge, I had to design StreamVibes from the ground up. This included building the brand and Premium offerings.
How might we design a sign up / sign in flows to encourage users to upgrade to Premium?
From a business perspective, every opportunity to promote Premium should be utilized. But from UX perspective, users can easily be frustrated from being bombarded with Premium asks at every turn.
There's a fine balance to design here!
StreamVibes is a fictional company. As part of the challenge, I had to design StreamVibes from the ground up. This included building the brand and Premium offerings.
03
Research First
I like to start my design process by understanding the problem area. There were a few questions that jumped out which required additional research first.
What product offerings do users care about most?
I first conducted a competitor analysis to reveal top paid subscription features on paid streaming platforms. These would be key offerings that I could focus on within the app.
To support my research, I also conducted 5 user interviews to understand user pain points when considering a paid streaming plan.
Below are the top key insights from users considering a paid streaming plan.
What opportunities exist within the Sign up / Sign in flows?
According to Jakob's Law, users expect your product to work like other sites they already know. So of course, I had to conduct competitive research to understand existing flows on other freemium model apps that were not only a direct streaming competitor.
Spotify - an indirect competitor of a popular music streaming platform
Crunchyroll - a direct competitor of another freemium streaming platform
MyFitnessPal - an indirect competitor of a fitness/health platform
I like to start my design process by understanding the problem area. There were a few questions that jumped out which required additional research first.
What product offerings do users care about most?
I first conducted a competitor analysis to reveal top paid subscription features on paid streaming platforms. These would be key offerings that I could focus on within the app.
To support my research, I also conducted 5 user interviews to understand user pain points when considering a paid streaming plan.
Below are the top key insights from users considering a paid streaming plan.
What opportunities exist within the Sign up / Sign in flows?
According to Jakob's Law, users expect your product to work like other sites they already know. So of course, I had to conduct competitive research to understand existing flows on other freemium model apps that were not only a direct streaming competitor.
Spotify - an indirect competitor of a popular music streaming platform
Crunchyroll - a direct competitor of another freemium streaming platform
MyFitnessPal - an indirect competitor of a fitness/health platform
I like to start my design process by understanding the problem area. There were a few questions that jumped out which required additional research first.
What product offerings do users care about most?
I first conducted a competitor analysis to reveal top paid subscription features on paid streaming platforms. These would be key offerings that I could focus on within the app.
To support my research, I also conducted 5 user interviews to understand user pain points when considering a paid streaming plan.
Below are the top key insights from users considering a paid streaming plan.
What opportunities exist within the Sign up / Sign in flows?
According to Jakob's Law, users expect your product to work like other sites they already know. So of course, I had to conduct competitive research to understand existing flows on other freemium model apps that were not only a direct streaming competitor.
Spotify - an indirect competitor of a popular music streaming platform
Crunchyroll - a direct competitor of another freemium streaming platform
MyFitnessPal - an indirect competitor of a fitness/health platform
04
Building the Brand
StreamVibes is a free streaming app with a unique, bold, and hip personality looking to target a youthful, tech-savvy audience
I came up with the name StreamVibes and built a brand style guide that could be used to determine the product UI.
My moodboard was inspired by a colorful, vibrant city nightlife from the streets of Japan. The app is set in dark mode for easy viewing on the eyes.
StreamVibes is a free streaming app with a unique, bold, and hip personality looking to target a youthful, tech-savvy audience
I came up with the name StreamVibes and built a brand style guide that could be used to determine the product UI.
My moodboard was inspired by a colorful, vibrant city nightlife from the streets of Japan. The app is set in dark mode for easy viewing on the eyes.
StreamVibes is a free streaming app with a unique, bold, and hip personality looking to target a youthful, tech-savvy audience
I came up with the name StreamVibes and built a brand style guide that could be used to determine the product UI.
My moodboard was inspired by a colorful, vibrant city nightlife from the streets of Japan. The app is set in dark mode for easy viewing on the eyes.
05
Design Iteration #1
Determining the user flow and sketching in low-fidelity first then rapid testing with 3 users
Taking the key learnings from my research, I sketched out a first iteration of the user sign up & sign in flow. Per the challenge brief, I made absolutely sure to incorporate user opportunities to upgrade to premium.
Determining the user flow and sketching in low-fidelity first then rapid testing with 3 users
Taking the key learnings from my research, I sketched out a first iteration of the user sign up & sign in flow. Per the challenge brief, I made absolutely sure to incorporate user opportunities to upgrade to premium.
Determining the user flow and sketching in low-fidelity first then rapid testing with 3 users
Taking the key learnings from my research, I sketched out a first iteration of the user sign up & sign in flow. Per the challenge brief, I made absolutely sure to incorporate user opportunities to upgrade to premium.
06
Usability Testing #1
Quick usability testing for initial feedback revealed key frustrations with prem
I conducted a short usability test with 3 users in-person to identify any critical issues before producing high-fidelity mockups. Testing revealed a few key issues listed below that I had to resolve for my first prototype.
Quick usability testing for initial feedback revealed key frustrations with prem
I conducted a short usability test with 3 users in-person to identify any critical issues before producing high-fidelity mockups. Testing revealed a few key issues listed below that I had to resolve for my first prototype.
Quick usability testing for initial feedback revealed key frustrations with prem
I conducted a short usability test with 3 users in-person to identify any critical issues before producing high-fidelity mockups. Testing revealed a few key issues listed below that I had to resolve for my first prototype.
07
Design Iteration #2 - Key Solutions
Users were frustrated with being asked to upgrade during the sign in process since they just wanted to access content quickly.
This redesign also focused on unobtrusive ways to offer organic opportunities in-app to upgrade after signing in.
1. Shorter sign in flow redesign for returning users:
2. Organic opportunities to upgrade within the product after signing in:
3. Offering opportunities to upgrade during sign up:
4. Improved direct offer for Premium Upgrade:
To make the Premium offer even more attractive to users, important features were added and prominently highlighted.
Users were frustrated with being asked to upgrade during the sign in process since they just wanted to access content quickly.
This redesign also focused on unobtrusive ways to offer organic opportunities in-app to upgrade after signing in.
1. Shorter sign in flow redesign for returning users:
2. Organic opportunities to upgrade within the product after signing in:
3. Offering opportunities to upgrade during sign up:
4. Improved direct offer for Premium Upgrade:
To make the Premium offer even more attractive to users, important features were added and prominently highlighted.
Users were frustrated with being asked to upgrade during the sign in process since they just wanted to access content quickly.
This redesign also focused on unobtrusive ways to offer organic opportunities in-app to upgrade after signing in.
1. Shorter sign in flow redesign for returning users:
2. Organic opportunities to upgrade within the product after signing in:
3. Offering opportunities to upgrade during sign up:
4. Improved direct offer for Premium Upgrade:
To make the Premium offer even more attractive to users, important features were added and prominently highlighted.
08
Usability Testing #2
Second usability testing confirms resolution of initial key issues and uncovers additional opportunities for feature improvements
This second round of usability testing was conducted with 5 users to gauge the success of the redesigns and find new issues with either the user flow or the premium offer.
Overall, users found the new premium offer and flow redesign to be very straightforward and easy-to-use with an average of 9.2 out of 10 rating.
Most new issues and feedback logged this round focused on feature improvements and bugs as noted below:
Second usability testing confirms resolution of initial key issues and uncovers additional opportunities for feature improvements
This second round of usability testing was conducted with 5 users to gauge the success of the redesigns and find new issues with either the user flow or the premium offer.
Overall, users found the new premium offer and flow redesign to be very straightforward and easy-to-use with an average of 9.2 out of 10 rating.
Most new issues and feedback logged this round focused on feature improvements and bugs as noted below:
Second usability testing confirms resolution of initial key issues and uncovers additional opportunities for feature improvements
This second round of usability testing was conducted with 5 users to gauge the success of the redesigns and find new issues with either the user flow or the premium offer.
Overall, users found the new premium offer and flow redesign to be very straightforward and easy-to-use with an average of 9.2 out of 10 rating.
Most new issues and feedback logged this round focused on feature improvements and bugs as noted below:
09
Final Prototype
With much research and testing, I'm proud to share my final Figma prototype. I've added a few interaction animations that make the app more delightful to use. Check it out!
It works best on desktop. Press R to restart from the beginning.
10
Reflections
This was a fun design challenge project that required careful consideration of business goals and user frustrations.
Challenges:
As part of the design challenge of a fictional product, I had to design without a lot of resources. The following took a long time without an existing company to work with:
Creating a brand from scratch
Determining the product offerings
For Future Considerations:
In a real world scenario, what do the success metrics look like? I would recommend exploring:
Conversion rates at different screens
Exploring abandonment metrics & understanding why users leave and from where
A/B testing with Premium offers & copy
