UX/UI | May 2020
Case Study
TwistBeat
Project Overview
A startup company launched a media product two years ago. It is a freemium model that has a mobile-web experience and a mobile app for both iOS and Android. The company’s business strategy was to first build a user base by offering a free product, then to 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.
Roles
UX Researcher, Visual Designer, Tester
Responsbilities
Product Strategy, User Flows, Sketching, Visual Design, Branding, Prototyping, and User Testing.
Goals
- Create the opportunity for new users to subscribe to the premium product upon registration 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).
Problem Statement
- How might we create a call to action for existing users to sign up for our premium service?
- How might we create a seamless experience for new and existing users to sign up for our premium service?
Competitors
Youtube
Spotify
Pandora
Target User
- 18 – 24 years old
- Very tech-savvy — they are on their phones for several hours a day
- Very budget-conscious
- This type of media [music/movies/books] is a very important part of their lives
Constraints
- 90 hour timeline for the entire project.
- Since this project took place while pandemic restrictions were still in place, all research and testing was conducted remotely for safety purposes.
- No budget for user incentives to participate in surveys or testing usability sessions.
Brand Personality
- Uniquely diverse, but somehow always familiar. This creates the need for design to balance that tension.
- Brand attributes
- Bold
- Smart
- Hip
Research
Secondary Research
I began by diving into understanding what competitors (Pandora, Spotify, YouTube Music, etc.) are currently doing to make their premium options successful. For platforms I had not previously used, I downloaded the app, created an account and navigated through the service to understand the features, taking notes on likes and dislikes so I could start building out a solution for our goal.
Primary Research
To understand what compels an individual to budget money every month to pay for a premium service, I posted a survey to dig deeper behind the “why.” The goal of this survey was to learn more about what influences users within our target market to upgrade to premium streaming services on a monthly basis. Once I received over 20 responses and analyzed the data in a spreadsheet and discovered that the top two motivators for paying for a premium service are no ads while streaming content (72%) and the ability to use offline without needing an internet or WiFi connection (55%).
User Flows and Wireframes
Wireframe User Flow
Once enough research was collected, I began organizing the user flow for a new user as well as an existing user. It was important to integrate distinct plan options that would accommodate different users that are in the 18 – 24 age range.
After defining the user flow, I began the design phase by diving into building wireframes since we have a time constraint. For payment processes are relatively standard, I used UI kits to get the foundation established and tweaked them to incorporate elements I wanted.
User Testing: Round One
When I was satisfied getting ideas out through the wireframes, I began coordinating usability testing with five participants who fit my target audience. All sessions were held remotely due to restrictions still in place across multiple counties throughout the U.S. This allowed geographical location to not be a constraint for this project. From the first session, the most critical issue discovered was related to payment. The solution for this issue was to incorporate a screen between selecting the plan and entering payment to choose the payment method including: pay with card, apple pay, paypal, google pay.
High Fidelity Mockups
After analyzing the data collected from the first round of testing, I discovered there was one critical feature missing mentioned by 60% of participants that needed to be incorporated into the user flow: different payment methods. To solve this issue, I decided the best solution was to add a screen that had multiple payment methods listed in linear buttons that included Paypal, Apple Pay and Google Pay.
At this stage, I began incorporating the branding through the color scheme, icons, and graphics. Additionally, I tweaked some UI components discovered during the testing such as the bottom navigation bar being displayed during a couple of steps where it did not need to be yet, and adding the progress bar to the plan selection screens.
User Testing: Round Two
Once the high fidelity mockups and issues discovered were fixed, I began a second round of usability testing with five new participants who range between the target audience of 18 – 24 years old. All moderated sessions were conducted remotely again, through video conferencing software. The most major issue discovered this session was regarding the “No Thanks” text under the plan comparison screen, which some users found misleading if they did not want to sign up for premium. I decided the best solution moving forward was to change the text to “No Thanks, Continue with Basic” to avoid any confusion to the sign up flow. This did not inhibit the user from completing the task of creating an account, signing up for premium by selecting a plan, and completing the payment process.
Outcomes and Lessons
Our goal of creating an opportunity for new and returning users to sign up for premium was achieved! By the second round of testing, 100% of users did complete the new user sign up flow with no struggles. Feedback expressing new ideas regarding features that would increase the user experience were discovered. My key takeaway from this project is that testing always provides the simplest information or feature one may have overlooked (i.e. payment method options) that is very critical to the process. Convoluted issues are solved and new ideas for features are discovered that will continue to improve your product.