I'm designing the UX of 3 different services. Service1 consists of face to face lessons while Service2 is an online program (they aren't equivalent), therefore, both will never be selected. Inside Service1 the user can choose a different amount of classes per month and inside Service2, the user can pick a program duration between one month upto 3 months. Service3 offers another kind of course that can be paired with both of them or by itself.

  • Service 1: single month subscription with a slider that shows the price per lesson.
  • Service 2: subscription that ranges from 1 to 3 months, includes a dropdown select with pricing of this service by itself and pricing of this service + service 3.
  • Service 3: single month subscription.

I'm finding difficult to give the best UX because of the possibility to pick single month subscriptions with upto 3 month subscriptions and that I want the discount applied to be visible when these services are paired.

  • If user wants service 1 + 3: clicks buy both in service 1 + 3 buy buttons = both are per month subscriptions.
  • If user wants service 2 + 3:

    • Selecting multiple months from service 2 and the single month subscription from service 3 = problem. What I've tried:

      • Idea A: user selects service 2 +3 from the dropdown in service2 without clicking on service3, the sum of both services, their duration and discount appears in each option from the dropdown.
      • Idea B: user selects the duration of service2 and also clicks on service3, (service1+3 work currently like this). The problem with this one is that service3 by itself is only offered as a month subscription, so picking several months of service2 wont by at sync with service3.

Sorry if this gets confusing and thank you for your help.


EDIT: updated details thanks to geostocker

  • 1
    You seem to be selling too many things in one UI. If any of these services could be add-ons, they could be offered to the user once they've signed up for the primary service.
    – Adnan Khan
    Commented Jan 28, 2017 at 22:31

1 Answer 1


I don't seem to be able to comment, so I'll try to give you a somewhat clear answer as to what I think would be the best way of handling this.

As it's not clear what sort of services we are speaking about and the overall context is slightly vague I'd suggest considering using different menu options where you have 1 and 2 as their own service-menu. If either of them are clicked you ask the user if they want option 3 (Much like how Amazon handles Amazon Prime; you first select your items, go to check-out and there have to decide if you want to add prime or not). Again, the context is VERY vague and you haven't made it clear what the service(s) actually are, so it makes it quite difficult for us (me) to figure out HOW to help you.

Service 3 would be in a menu by itself as it can be used as an add-on or as an exclusive item (service).

So basically consider having 1 and 2 in it's own menu and 3 by itself. If either 1 or 2 is in the cart at checkout or either have been clicked in your menu (depending on how your project is set up), then display the option of adding the extra service to the cart with a discount (as a package). If you however just want to buy service 3 by itself then you'd find that in a separate menu.

That way it would be more intuitive for the user to navigate through the options and the menus wouldn't be cluttered with information about deals etc, but would focus on the services themselves.

The less information has to be actively processed, the better!

  • 1
    The problem I have is pairing service2 when more than one month is selected with service3 that by itself can only be offered as a single month service. I've updated the information regarding the services. Thank you for helping.
    – scriptK
    Commented Sep 30, 2016 at 14:10
  • Why don't you allow the user to subscribe to service 3 for as many months as he subscribes to service 2, but limit the discount? I mean basically service 2 is a subscription to the service where n is the months and n >= 1 and n =< 3. Simply let the user re-up the subscription with or without the deal, or make it obvious that the service is only available for a month. Again, it's difficult to know how to structure this as the context still isn't clear. What are the services?
    – geostocker
    Commented Sep 30, 2016 at 14:15
  • I agree that would be the easiest solution, the problem I find is that Service1 is only a single month subscription, if I increased the duration of Service3 to match the duration of Service2, then Service1 would be off sync. So I thought that sticking to one month services for Service3 would be the best option since these two services by themselves are only one month long.
    – scriptK
    Commented Sep 30, 2016 at 14:22
  • Well, from a ux perspective that's a really difficult problem to solve.. you could perhaps change service 1 in a way that it's a 1 month subscription that is re-upped in whatever increment has been specified. So the system treats it as a 1 month sub. Does that make sense? Or that you allow service 3 to attach itself to a service as an add on that re-ups every month it its a multi-month subscription.
    – geostocker
    Commented Sep 30, 2016 at 14:27
  • Regarding your last idea, I did try to add a switch on S1 and S2 asking if the user wants to pair the service with S3 so it would update the pricing of those services. This was a good solution since it would make pairing services uniform. Later on I discarded this because I already had another switch in S1 and didn´t want to make it more confusing or increase the clutter. I understand all this is hard to understand with my explanation, thank you for your effort.
    – scriptK
    Commented Sep 30, 2016 at 15:08

Your Answer

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

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