enter image description here

I have created a wireframe for this.

Am I doing it correct or is there any other best way in UX/UI?

My goal is to upsell/promote non-active products.

Why My question here is different? Its different because, I asked about the layout. eg: is it good idea according to my wireframe to place active and non-active products to increase visibility?

Please note this will be the first page the user will see after they LOG In.

  • 1
    How about displaying the inactive services in black and white (with coloured "try 30 days for free" or similar) vs the active in colour? And adding a checkbox "Display activated services only"?
    – Mike
    Dec 19, 2018 at 19:51
  • Would this question help you? Best way to show an “unactivated” part of an app?.
    – Mike M
    Dec 19, 2018 at 21:14
  • @Mike I changed my query to better explain.
    – Sangeeta
    Dec 20, 2018 at 6:00
  • Also, what is your plan if the user has 6 or more active products? Dec 20, 2018 at 9:15

1 Answer 1


My first opinion is this, the active products should be on the left, if this is a Western application as we read left to right in a Z pattern. I can imagine it being frustrating if the upsell products were the items in the primary zone for a user.

Not the answer you're looking for? Browse other questions tagged or ask your own question.