Feature gating for demo and paid accounts
Feature gating is connecting the gap between free and paid customers. In free version you often have limited access and features, often seen as a lock or hidden functions.
What problems are users facing?
- Customers were confused what plan should they use to get access to certain features.
- When customer’s demo account expires, they loose features without knowing it (demo doesn’t show which features are coming from which plans)
- There was no clear indicator for demo accounts from which plan the feature is coming
- Locked screens had information only in Danish, moreover it was an image making it impossible to translate or copy the information
See current dashboard examples below:
Current solution. Orange circles shows focus on upcoming changes
Problem statement
Demo accounts don’t show which features are paid and will be lost after the demo expires, which causes confusion and annoyment among customers. Dashboard is lacking good upsell solution of higher plans.
Solution Pivot
After I joined the team this was one of the first features we had to implement. Initially team wanted to build „preview demo” feature. Customer would choose desired plan and see entire dashboard with the plan they chose.
What are the drawbacks of the initial solution?
- 🤔 It assumes customer will explore the plan and choose which one suits the best. But, customer chooses the plan based on the feature they need. It means firstly they find the feature, later check which plan provides it.
- 👎 Large amount of time and resources needed. It would need partial code-refactoring and changing the base of how dashboard works.
- 👎 It wouldn’t solve the problem when customer goes to the feature and see it’s locked.
- 👎 Big changes to the navigation to add „preview demo” dropdown.
I wanted to make sure we get the same value with the least development involvement, so what I proposed instead
- 👍Use maximum of current solution with updated UX and UI
- 👍Add labels with plans’ abbreviation
- 👍Add hover dialog with details
- 👍Make it more standout from the crowd
- 👍Advertise higher plans more, show values and benefits
- 👍Provide support on each step to upgrade
- 👍Provide explanations in home language (Currently it’s only Danish, but there are also English customers)
Major improvements to the design
1. Adding labels with plans abbreviations for demo accounts
- Clarifies the plan that feature is coming from
- Stands out from the crowd
- Gives more insights
- Warn customers about periodically unlocked features
2. Adjusting locked labels for low plans
Similarly to previous point, but for low paid plans users can see locks. The difference is we give more insights about the locked feature upfront.
- Upselling higher plans
- Giving more insights
- Standing from the crowd
3. Adding hover option
- Explaining more details
- Upselling higher plans
- Warn customer that demo includes paid features and will expire
4. Talk benefits on locked screens
- Shorter, more concise context
- Explaining benefits instead of raw information
- Upselling higher plans
- Smoothes the flow and lower the cognitive load
- Modernizing UI
UX Rule: Selective Attention
People often filter out information that isn’t relevant. This happens in order to maintain focus on information that is important or relevant to the task at hand.
5. Modernizing UI elements
- Creating connection between „upgrade your plan” elements, labels and locked features
- Usability-aesthetic effect
- Focus user attention to unlocked features for upgrade possibility
UX Rule: Law of Similarity
Elements that are visually similar will be perceived as related.
If I had more time...
- Add smart plan recommendation using data analysis with AI
- Add main CTA to upgrade your plan
- Explore more solutions of upselling on different pages
Thanks for reading!
If you have any comments, suggestions, or look for UX project, feel free to reach me out!