What's the best flow for selecting the right product?

Question

I'm redesigning a standalone page within an e-commerce framework that allows users to download a file for free. The files are only available for certain make/model/year combinations, and then there are 3 versions of the file which are compatible with different vehicles among these, with different products for different option packages in some cases.

The way it is currently set up, visitors of the webstore can click a link on the homepage to see a page with information about this product, including a list of compatible model year ranges. Users then select from three drop-down menus in sequence, picking the model, year, and trim level of their vehicle:

This is, admittedly, a clunky process. For one thing, only compatible models and years are listed, so in some cases there is only one year to select. It is also not especially clear that these menus depend on each other (users cannot begin by selecting their model year). Here is an idea of the selections that correspond with the various products:

There are some obvious improvements that could be made to the system described above, like hiding the 2^nd and 3^rd drop-downs until the user has selected from the 1^st. This is not what I'm looking for.

What I'm wondering is if there's any better way to lay the whole thing out. How painless can I make this process without losing accuracy? I'm shooting for a responsive design that gets the right people to the right download links with as little hassle as possible.

Right now I'm thinking of making it into a more visual system, where users have both text and a picture to work from when making their selections. This comes with its own complications (What images for year selections? Is there a way to eliminate year selection without owners of uncompatible vehicles getting too far in the process?) but so far seems like the best way to build this out.

Answer 1

It seems like your solution is good enough. But there is always some room for improvements:

1. Hiding 2 & 3 steps by default or disabling them is a good idea
2. You may also simply skip 2nd step if there just only one single item (or place it preselected), and go to the 3rd step directly
3. Alternatively, you may try to merge 1 & 2 steps into one list if possible (the resulting list will not be too long)

You may also try to play with layouts and use horizontal sections like this:

Or vertical like in your case. You may also implement different layouts and ask your target audience to tell you which one is better or use a/b testing to measure timings, etc.

Answer 2

If you don't mind paying for a service, http://www.carweb.co.uk/Vehicle-Registration-Lookup is something I've used before to simplify the process of getting car information from users for a car park booking website. It's a registration plate lookup service.

1. User enters their vehicle registration number
2. Carweb returns XML file of vehicle information

It would be sensible to provide confirmation to the user of the information you get back, and allow them to change it.

If you are able to get all the information you need from one of these registration lookup services you'd be able to immediately confirm to the user whether the product was available.

It may also be an idea to store this information while the user is looking round the site and either indicate in all instances whether a produce is or isn't available for their vehicle.... but I digress!

Answer 3

you could try a search box with autocomplete. there are many options here; an example below