Responsive Design Checkout - Single Page AND Accordion?

Question

I'm working with a team on implementing an improved checkout flow to a new multi-store web platform. All of our stores will be based around responsive design on migration to the new platform so we won't have separate mobile and desktop versions of a store.

We're looking at implementing a single page checkout with four 'step' panels (address, shipping method, payment type, summary/confirm), using a fair amount of Ajax to keep the basket summary up to date as the inputs change.

On a desktop sized display this would all appear on one page and would re-flow when changing page size. At the mobile size break point, we'd like the four stage input panels to collapse into an accordion view - it would be the same four panels with the same input form fields, but only one panel is visible with the other three collapsed.

I've searched and searched and can't seem to find an example of this in use. I can find similar things using separate mobile and desktop versions of a site, but not using responsive. Is it possible to do what we're envisioning?

My lead designer was talking about needing two sets of code to serve the single page and the accordion versions and a bunch of Javascript to keep the form fields in sync - but surely they're the same sets of form fields and we're just changing how they display at different screen sizes right? I mean if we can collapse a group of header links into a drop down button we can collapse a set of input form fields into 4 accordions sections?

My other idea was to reflow the panels into a long page on mobile but then keep the panel headers sticky at the header and footer so they never drop out of view, then the user can always see the different sections and the header blocks could be links to anchor points in the page - but I fear that's probably an even more complex way of achieving this...

All help gratefully appreciated - although go easy, I'm not a developer myself, just a project manager with a better than layman understanding of it.

Cheers

Answer 1

I think the bigger question here is, how long is the checkout experience?

When I say that, I mean how long the whole process is: From loading times, to input fields, to even the perception of the process is (if the page is longer than need being, people will walk away).

It doesn't matter whether you use single vs multiple pages, but what matters is how clear you are in how long the process will take.

In regards to not finding an example of accordions, Apple does a really good job in how clear their checkout process is:

They have accordions stacked. I think the only thing I would not include is "account" only because that could potentially add a barrier and cause a feeling of anxiety in apple appearing to force you to create an account.

Things to learn when creating a checkout process (especially because this is the point in which people abandon -- they get frustrated):

1. Keep it clear in how many steps is needed to checkout
2. Make it VERY simple and minimize friction (by minimizing the amount of fields needed) - EX: I had a project where the company wanted shoe sizes, preferences of shoes and other nonsensical data that isn't necessary when checking out or creating an account, so don't do it!
3. Test test test, make sure the checkout process is easy by assuring this via tests. Usually when we design, we design with our biases. Testing negates that (hopefully).