back

Floop Edu

Reviving the Paywall

User Experience Design Internship

June 2022 - August 2022

Seattle, Washington (Remote)

Overview

With Floop Edu’s paywall reviving after society slowly adjusts back from the pandemic, this internship focused on recreating the paywall. With their service actively being used, the goal was to seamlessly integrate the paywall feature to promote Floop Premium benefits without taking away from the user’s experience.


During this internship, I spent time researching existing paywalls, user experience with paywalls, and applying those findings to design a paywall that can be incorporated in their service for users to see.

Check out my internship spotlight!

With Floop Edu’s paywall reviving after society slowly adjusts back from the pandemic, this internship focused on recreating the paywall. With their service actively being used, the goal was to seamlessly integrate the paywall feature to promote Floop Premium benefits without taking away from the user’s experience.


During this internship, I spent time researching existing paywalls, user experience with paywalls, and applying those findings to design a paywall that can be incorporated in their service for users to see.

Check out my internship spotlight!

—

—

Problem

With the pandemic coming to an end and returning a more normalized setting, Floop Edu was looking to reactivate and redesign their paywall. Floop Edu, a platform for students and teachers to easily give feedback to one another, was a free platform during the pandemic.


Our goal was to return to a subscription model for their service and my job during this internship was to implement paywall interface designs for the current website. 

With the pandemic coming to an end and returning a more normalized setting, Floop Edu was looking to reactivate and redesign their paywall. Floop Edu, a platform for students and teachers to easily give feedback to one another, was a free platform during the pandemic.


Our goal was to return to a subscription model for their service and my job during this internship was to implement paywall interface designs for the current website. 

Solution

My solution includes many pathways for users to access this paywall. Without degrading their user experience, I integrated the paywall for free users for them to better understand the benefits. Throughout the service and found in multiple features within their website, this newly designed paywall naturally fits into their website. 

My solution includes many pathways for users to access this paywall. Without degrading their user experience, I integrated the paywall for free users for them to better understand the benefits. Throughout the service and found in multiple features within their website, this newly designed paywall naturally fits into their website. 

Design Process | Findings

My research revealed two main types of paywalls: hard and soft. Hard paywalls block full access to a service, offering only a preview or teaser, while soft paywalls include models like freemium, metered, and dynamic metered paywalls. Freemium models give users free content until they upgrade, meter paywalls allow limited free access before prompting for an upgrade, and dynamic metered paywalls track user activity to restrict access based on usage. By reviewing different paywall designs, I learned how their form, frequency, and impact on the user experience can vary, and discovered that there’s an ideal balance in how often users are asked to upgrade.

My research revealed two main types of paywalls: hard and soft. Hard paywalls block full access to a service, offering only a preview or teaser, while soft paywalls include models like freemium, metered, and dynamic metered paywalls. Freemium models give users free content until they upgrade, meter paywalls allow limited free access before prompting for an upgrade, and dynamic metered paywalls track user activity to restrict access based on usage. By reviewing different paywall designs, I learned how their form, frequency, and impact on the user experience can vary, and discovered that there’s an ideal balance in how often users are asked to upgrade.

Design Process | Low Fidelity Wireframe

Once I gained a clear understanding of paywalls, I collaborated with the paywall team to design the following features

  • Lock premium content for free users

  • Manage subscriptions

  • Alert users when their 30-day trial ended.


My main tasks also focused on designing the interface for all users (freemium and premium users) and creating the flow the freemium users would follow in order to upgrade.


Starting with a low fidelity design, I experimented with various layouts. While gathering valuable feedback from the team, they shared insights from their own experiences and knowledge which helped me better understand Floop and spark new ideas for the paywall. After several rounds of feedback and revisions, I refined the designs appropriate colors, detailed features, and user-friendly wording.

Through at least 20 drafts and continuous team feedback, I iterated and improved the designs until we reached a final version that the team was happy with and that was ultimately implemented in the Floop web app.

Once I gained a clear understanding of paywalls, I collaborated with the paywall team to design the following features

  • Lock premium content for free users

  • Manage subscriptions

  • Alert users when their 30-day trial ended.


My main tasks also focused on designing the interface for all users (freemium and premium users) and creating the flow the freemium users would follow in order to upgrade.


Starting with a low fidelity design, I experimented with various layouts. While gathering valuable feedback from the team, they shared insights from their own experiences and knowledge which helped me better understand Floop and spark new ideas for the paywall. After several rounds of feedback and revisions, I refined the designs appropriate colors, detailed features, and user-friendly wording.

Through at least 20 drafts and continuous team feedback, I iterated and improved the designs until we reached a final version that the team was happy with and that was ultimately implemented in the Floop web app.

Design Process | High Fidelity Wireframe

The high-fidelity wireframe I designed for Floop Edu incorporated key features and paywall pathways, including the home page, create assignments page, user profile paywalls page, and subtle notifications. The home page design differentiates between free and premium users, with a clickable premium button for easy access to the paywall page. Premium users are visually distinguished by a highlighted crown icon. On the create assignments page, advanced features are shown to free users as teasers, providing a glimpse of premium features without disrupting the user experience. As Floop Edu offers a free trial for premium features, a pop-up appears near the trial’s end, notifying users and providing a one-click option to resubscribe. A subtle notification also alerts users a week before the trial expires. The paywall page itself consolidates all relevant information, including pricing, feature comparisons, and details to help users make an informed decision about upgrading to the premium version.

The high-fidelity wireframe I designed for Floop Edu incorporated key features and paywall pathways, including the home page, create assignments page, user profile paywalls page, and subtle notifications. The home page design differentiates between free and premium users, with a clickable premium button for easy access to the paywall page. Premium users are visually distinguished by a highlighted crown icon. On the create assignments page, advanced features are shown to free users as teasers, providing a glimpse of premium features without disrupting the user experience. As Floop Edu offers a free trial for premium features, a pop-up appears near the trial’s end, notifying users and providing a one-click option to resubscribe. A subtle notification also alerts users a week before the trial expires. The paywall page itself consolidates all relevant information, including pricing, feature comparisons, and details to help users make an informed decision about upgrading to the premium version.

—

—

Reflection

Being an intern at Floop has been a great experience. I’ve achieved and learned a lot, but with those definitely came with its challenges. The biggest challenge I’ve faced was definitely a lack of confidence and overthinking. In design, I feel as though there is never the “right answer” where you feel like you’re fully done. And though you experience this in many different areas, I think working on the UX design for the paywall, I would often design something and feel as though it’s not good enough or it hasn’t reached a point of usability for the website. I’d often find myself designing and always feeling that my work was unfulfilled, more to be done. I think during meetings, when getting feedback on the designs I worked on, sometimes I’d misinterpret them and feel like the direction I was headed was perhaps the wrong way. Towards the end of my time and my later designs, after talking about the issues in one of my check-ins helped me understand that I shouldn’t be scared of my designs and that quite frankly, that feeling may not go away, but it’s okay because that feeling could be something that could push me towards creating something better!

Being an intern at Floop has been a great experience. I’ve achieved and learned a lot, but with those definitely came with its challenges. The biggest challenge I’ve faced was definitely a lack of confidence and overthinking. In design, I feel as though there is never the “right answer” where you feel like you’re fully done. And though you experience this in many different areas, I think working on the UX design for the paywall, I would often design something and feel as though it’s not good enough or it hasn’t reached a point of usability for the website. I’d often find myself designing and always feeling that my work was unfulfilled, more to be done. I think during meetings, when getting feedback on the designs I worked on, sometimes I’d misinterpret them and feel like the direction I was headed was perhaps the wrong way. Towards the end of my time and my later designs, after talking about the issues in one of my check-ins helped me understand that I shouldn’t be scared of my designs and that quite frankly, that feeling may not go away, but it’s okay because that feeling could be something that could push me towards creating something better!