We have a checkout process which follows this sequence:

  1. choose between two possible products
  2. select a duration for the chosen product
  3. enter payment details
  4. your receipt

We want to compress steps 1 and 2 into one page, where once the user chooses product A or product B there is a dynamic change in the page. As opposed to taking the user to a new page.

It would look something like this:


download bmml source – Wireframes created with Balsamiq Mockups

However ... once a user chooses one of the membership types we don't have an obvious way for the user to go back that one step.

Any suggestions on how a user could go back to deciding between A vs B?

  • When you say membership type, you mean between Alpha and Beta membership? Or when they click the buy button?
    – UXerUIer
    Aug 18, 2014 at 11:53
  • @Majed Alpha vs Beta. The buy buttons is simply for the duration.
    – Erics
    Aug 19, 2014 at 10:59

2 Answers 2


You can use 2x4 matrix, with Y-axis the product and X-axis the duration.

EDIT : Roughly something like this : When a checkbox is selected all other checkboxes are unselected.


download bmml source – Wireframes created with Balsamiq Mockups


You could use 2 accordions on the 1st step. Once the user chooses the membership type, the accordion will expand and the details will show. Clicking it again will collapse the details.

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.