A registration and upgrade process made simple for users to get access to a new premium subscription of book streaming.
overview
the problem
A media company started an app 2 years ago with a subscription service, including only a free plan. Now that they have a healthy set of subscribers, they would like to design an experience that will allow the users (new and old) to subscribe to a paid premium plan with more advanced features. The main business goals for the project were:
​
-
Create the opportunity for new users to subscribe to a premium plan upon registering a new account.
-
Create the opportunity for existing users on the free plan to upgrade to a premium plan both within the sign-in flow as well as once within the product (once logged in).
role
Sole UX Researcher & Designer
the challenge
As part of my Springboard capstone challenge, I was presented a fictional client - a media streaming company - who wanted to create a new registration process for users to subscribe to their new premium plan(s). Over the course of 2 months, I spent time researching the problem space, brainstorming best solutions and then designing low- and high-fidelity prototypes that I iteratively tested with users, before developing a final product for the client.
the solution
Novela was created from the ground up to represent this fictional media challenge laid out above. As part of the challenge, I was able to develop the visual branding of the company, including giving it it’s name. To address the business goals, I created 3 red routes for 2 main user personas (new users and existing users on the free plan) and from these red routes, developed a high-fidelity prototype of the registration process. There were two rounds of usability testing: one using a low-fidelity prototype and one with a high-fidelity prototype (including iterations).
tools
Figma / FigJam Miro Google Drive
the process
-
Competitor Research
-
User Survey
-
HMW Questions
-
User Stories
-
Sketches
-
User Flows
-
wireframes
-
lo-fi prototype
-
style guide
-
hi-fi screens
-
hi-fi prototype
-
usability testing
the plan
discover
competitor research
Before diving into user stories and sketching, I first did some secondary online research across 7 different companies with mobile media streaming applications, ranging between music and books/audio books. These companies included:
​
-
Kindle Unlimited
-
Pandora
-
Spotify
-
Audible
-
Epic! for Kids
-
24 Symbols
-
Scribd
​​
When researching each of these companies, I first wanted to understand what the company’s product was, how it worked and who their audience was. I then created an account with each product and tested the experience of the free plan. Lastly, I simulated upgrading to a premium (paid) plan.
From this research, I uncovered the following features from competitors which I categorized as either liking or disliking, and from this, what action items I wanted to take into my design.
user survey
After completion of the competitor analysis, I created and sent out a user survey via Google Forms to friends and family.
My goal for the survey was to understand user behavior and preferences in terms of media streaming mobile applications. More specifically I wanted to understand what encourages a user to upgrade to a premium product, what features are most important to them, and what methods are most effective in encouraging the user to upgrade.
Here are some of the key themes I found from the results of the survey:
define
HMW questions
Taking these themes pulled from both primary and secondary research, I revisited the 2 business goals of the media company and translated them into actionable HMW questions:
-
How might we create the opportunity for new users to subscribe to a premium plan upon registering a new account?
-
How might we create the opportunity for existing users on the free plan to upgrade to a premium plan both within the sign-in flow as well as once within the product (once logged in)?
​
I wanted to ensure that I addressed these HMW questions in light of the following 4 characteristics, which I felt were resounding across the research as being important for effectiveness and conversion with potential customers:
ideate
user stories
After defining the problem space, I jumped head-first into ideation. First was the development of user stories. Ultimately I came up with 3 primary stories in response to the HMW questions:
brainstorming
With these 3 user stories in mind, I went to the drawing board with pen & paper to sketch out some possible screen solutions. This helped me put the written into visual form.
user flows
Combining the user stories and the initial brainstorming sketches, I built out the initial user flows:
design
wireframes
My approach to developing wireframes was to build out the screens in sequence of the 3 user flows. This method ensured that I created only what was necessary for the critical routes to which I was endowed rather than creating a full library and realizing many of the screens were not needed for these critical routes. Through this approach, I would focus solely on creating function that fit the needs of that particular story, and would iterate on the screen if needed to build out more functions if it was applicable in another story.
low fidelity prototype
From here, I brought in animation using Figma’s prototype tool, which transformed my wireframes into a low fidelity prototype.
style guide
Lastly in the design phase, I activated those creative juices to come up with a whole brand, including name, logo, colors, typeface, UI elements, icons and illustrations.
test
round one
goal
The goal of this first round of usability testing was to focus more on function and to get more upfront feedback before spending the time to build out high-fidelity screens.
method
I conducted four individual testing sessions with subjects pulled from the results of the user survey from the discovery phase. My target subject was:
​
-
18-35 years old
-
budget conscious
-
tech-savvy
-
media is an important part of their life
​
All sessions took place over the course of one week. They were all moderated and held either virtually or in-person.
tasks
Create a New Premium Account
Upgrade to Premium during Sign-In
Upgrade to Premium after Sign-In
outcome
comparison view
Problem: Several users felt that it was hard to know the differences between the different plans with only the card view
​
Recommendation: Create an additional view that shows the plans side-by-side
​
Solution: Toggled views (comparison and card) to give the users multiple ways to best understand the different plans available to them
banner advertisement on home page
Problem: One user felt unmotivated and unsure where to upgrade to the premium plan as an existing user once logged into the app. The only click path available to a user at this point is to knowingly navigate to the premium tab in the bottom menu.
​
Recommendation: Create an advertisement that is not too obnoxious on the home page to encourage users to make the upgrade.
​
Solution: A banner with the ability to expand for more details, allowing the user to directly navigate to the premium tab (to continue with the upgrade flow).
prototype
high-fidelity screens
After synthesizing the results of the first round of usability tests, I immediately began converting the wireframes into high fidelity screens using the brand system I had created. As I built out these screens, I was slowly implementing the recommendations from the test participants, in a very iterative approach.
high-fidelity prototype
When building out the high fidelity prototype, I was able to recycle some of the animations created for the lo-fi prototype, but there was still a decent amount that needed built from scratch as I had made many changes to the screens.
test
round two
goal
The goal of this second round of usability testing was to get feedback on visual design elements (now testing with the high-fidelity prototype) as well as feedback on changes to the overall flow.
method
I conducted individual testing sessions with 4 different users, also pulled from the user survey. I chose to get new testing subjects to ensure fresh ideas/feedback and to ensure that none of the subjects would know how to complete tasks because they had done it before.
​
All tasks were the same as the first round.
outcome
change of order in form flow
Problem: Several users were still struggling with the flow of the form, whether as a new or existing user. It was doable, but it didn't feel intuitive.
​
Recommendation: Rethink the order of the form when signing in versus registering then paying for the premium plan.
​
Solution: Changed order of sign-in and registration flow screens for better and more intuitive flow.
more information available
Problem: There was limited information available to learn about the plans available to a user.
​
Recommendation: Enable the user to get more information somewhere about each plan and its features.
​
Solution: Help icon next to all features within the grid view, pulling up a pop-up with more information about that feature.
reflection
Overall I felt like this project went really well. It challenged me in a lot of ways. Here are some of my main takeaways....
View other case studies
targets
