User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
When you say membership type, you mean between Alpha and Beta membership? Or when they click the buy button? – Majo0od Aug 18 '14 at 11:53
@Majed Alpha vs Beta. The buy buttons is simply for the duration. – Erics Aug 19 '14 at 10:59

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

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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