Undoing a dynamic update

Question

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?

Answer 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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

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.