0

Context: I am designing for a B2B SaaS product and we want to lock features with the following states for different users:

  • Locked State: For free-plan users not having access to add-on features and they should be prompted with an option to upgrade their plan when they click on them.
  • Available state: Normal state of features available to premium users and some features also available to free users
  • Request Only: For users on an enterprise plan so they can request access to include certain features in their plan

I have attached an image of what I tried, our primary color is blue and I went with Indigo to showcase a locked feature along with a lock icon, but it's ot very differentiating.

I used indigo as it represents premium/luxury.

Can someone help me how to better differentiate it so it reduces user frustration?

EDIT 1 The issue with the current design is that we are using blue as a primary color and indigo is not very differentiating, which might confuse the users into thinking that it is also a normal feature and result in frustration.

Moreover, these state are to be designed for several features some of which have an icon on the left while some dont, so it's not very scalable to all the features. I hope that clears it.

enter image description here

6
  • Before the question gets close votes (it's a review request or at least opinion based), can you elaborate more on what is actually wrong with the current design? If it is: "It doesn't look nice", then the question is more suitable for graphicdesign.stackexchange.com.
    – jazZRo
    Mar 18 at 12:55
  • The issue with the current design is that we are using blue as a primary color and indigo is not very differentiating, which might confuse the users into thinking that it is also a normal feature and result in frustration. Moreover, these state are to be designed for several features some of which have an icon on the left while some dont, so it's not very scalable to all the features. I hope that clears it. Mar 19 at 8:15
  • The code should check if the person is on the Free Trial and not even show buttons not relevant to it (or gray it out as not available in that version). As is, the bottom button is an invitation to buy credits and it's not clear that it works with the Free Trial. The color doesn't matter. The color by itself doesn't mean "Not available with free trial."
    – Steve
    Mar 20 at 16:39
  • Can you list the different users and plans available? I am confused between the free plan, premium user and enterprise plan. The states are clear because you only need to show the locked features (for free plan users) and the requestable features (for enterprise plan users), but the types of users are not clear.
    – Michael Lai
    Mar 20 at 23:31
  • We have 3 types of users: 1. Free Users: They don't pay anything and have a 14 day free-trial with limited "credits" to explore the platform and test it out. 2. Premium Users: These are the first level of paying user and have access to full access to premium features & add-ons(charged extra) which were locked for free users 3. Enterprise Users: These are typically large MNCs who need to conduct lots of tests, these users get the maximum level of customization available, have access to free, premium & add-on features but they get "credits" at discount due to bulk needs Apr 3 at 9:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.