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.


1 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:

enter image description here

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).
  • Thanks for your answer! We've researched fairly extensively and understand the need for simplicity and process clarity. We'll be including guest checkout as standard with the option to quickly create an account after checkout. We feel that single page works best for desktop as we can display everything at once and update basket live as options change (country, delivery speed etc.) but on mobile this reflows to a very long page so we'd like to accordion the four panels at mobile break point to compact the experience for the mobile user. I can't quite figure out if this is actually possible!
    – Harley B
    Commented Aug 19, 2015 at 8:33
  • Also, I can find great examples of accordions, great examples of single page checkouts and even the odd example where they're both used on the same site but served by desktop and mobile specific versions of the site. What I can't find is an example that uses responsive design to switch the style from single page to accordion within the same checkout... I'd love to find an example of what I'm thinking of just to see that I'm not pipe dreaming...
    – Harley B
    Commented Aug 19, 2015 at 8:45
  • I see. I'll try my best to look around. But is there a reason why you need to see a live example? Why not just test that out too?
    – UXerUIer
    Commented Aug 19, 2015 at 9:48
  • No reason for a live example other than to see how another site ha approached the coding of it to show my designer. I can't find any examples which leads me to think that it's maybe not possible?if it could be explained as to how to make it work with CSS, javascript etc, we can have a go at it. If it helps, we usually start with bootstrap
    – Harley B
    Commented Aug 19, 2015 at 18:32
  • I see. So you're looking for function other than design? That sort of question would be off topic on this site if you're looking at development implementation of a site as apposed to design implementation.
    – UXerUIer
    Commented Aug 19, 2015 at 18:34

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.