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 2nd and 3rd drop-downs until the user has selected from the 1st. 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.