After coming up with an idea I got to work on some quick sketches for possible layouts and functionality on the mini website.
In the first image I sketched my first version of the website with the tubes in an array spanning the space on the page. I did this because I thought people would be more familiar with it as it is more akin to your standard catalogue page. However maybe familiar isn’t the way to go. In the second image is the mobile version which would have the tubes on a rotary system instead for easier navigation. In both of these I have tried to illustrate some sort of interaction, in the case of the desktop version, it is hovering over the tube with your cursor to fill it with “Diesel fuel”. In the mobile version it would be shaking your phone, perhaps it could feature some basic fluid simulation or fizz.
Here, I have illustrated the buying page which would look identical on all platforms. When the model in the tubes from the previous sketches are selected, they get enlarged and replaced with a 3d model of the shoe they’re wearing which you can rotate by clicking and dragging or swiping on mobile. When you click buy, a hole opens up in the floor and your selected item falls into it ready to be delivered to you by the scientists at Diesel.
In this sketch I tried to show a basic menu for simplified navigation and searching as not everyone can be bothered with all the fancy stuff. This menu would have filters so that you can quickly find the shoe that you’re looking for and a search function for those who already know what shoe they want.
I am also trying to come up with a mood and visual style to fit the lab theme. Here are some early potential visuals: