1

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:

mockup

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? – 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
1

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

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, privacy policy and cookie policy

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