Options, Options.
My original idea was to arrange product categories on a grid, but this solution would only work on desktop as grid cells on lower breakpoints would have to be of different sizes and controlling img positioning inside each cell was just too much hustle. For this reason, I ended up making it a horizontal scroll instead (see image above). This works great for both desktop and mobile.
Let's Get it
Sorted
With over 10 000 products, 8 product categories divided into several dozens of subcategories coming up with a clear and simple "sort & filter" was a substantial challenge. I reseached multiple online stores to see what works and what doesn't, then added my personal twist and this is what I came up with. When you mousover one of the top 8 product groups, the menu expands to reveal subsequent categories, and then you can mouse over/click on a sub category to add additional filters to your product search. Man... I should probably have a video of this :P
Search
Anywhere.
A simple solution that alows users to search anywhere on the website. Search by product, name, product id, collection or keyword. After inserting a couple of chars, you can take your pick from the dropdown list. If there's only one match you'll be redirected to the product page, otherwise the SRP is displayed and you can sort and filter your results there.
Product Cards
I don't know whether it was due to a lack of sufficient time to fine-tune this element or my lack of creativity, I was under the impression that the possibilities for designing product cards were quite limited. Especially when considering the presentation of content on different devices. Both as to the size of the tiles themselves and the content itself. A particular challenge in this case was to present the complete set of information, including badges, promotions, discounted prices, latest products, etc., in a way that allows the information to be perceived clearly and legibly. On the right, you can see some of the combinations I tested.
The Product Page.
Testing the Limits
of Digital Canvas
There's always a lot of dancing around when trying to make a design stand out, yet still be elegant, functional, scallable or contain all the information that need to be included. The task becomes increasingly difficult the more elements and information you add in to the design. I typically start with the bare minnimum to avoid information overload. The rest is hidden and is typically, just a click away.
Inspirations
as a sales tool.
"Advice and Inspirations" section was one of the sections on the main page. It was meant to be captivating and upsell to clients that were browsing, but were not sure what they were looking for. Choosing one of them, you'd move to a project page with a given design, you could read in depth about it, see all the products and add one or all of them to your basket if you so desidre.
Check
This Out !
One of the key parts of any e-commerce project. The checkout. Unfortunately, these screens come from different design stages, and sometimes include mutiple layers of information that wold not be visible at the same time (mockups for a dev), but you get the idea. Cart preview working as overlay, acessible from the main nav. Easy checkout in 3 steps. It does look a bit pale here and the background gradient when converted from vector to jpg makes it look even worse, but in reality, the font was crisp and easy to read and gradient was smooth, which isn't the case here and it makes my eyes bleed. Unfortunately, I don't have anything better anymore. RIP Invision Studio ;(:P
Reusing
Old Assets
Minimum effort - maximum result. In this case (only had about 2 weeks to design the whole thing) Instead of designing some assets from scrach (what I often prefer doing) I decided to use some preexisting assets (hero image and the quasi technical drawing) and incorporate them into the design in a slightly refreshed form. Saved myself 5-6 hrs. THe result could have been better, but this one got the job done.
Playing
with Light
This is a library of catalogues and I'm actually quite happy with this one. It's very simple yet in line with the rest of the design. When you mouse over one of the brochures it lights up and gets a light glow, while the other ones go a bit darker.
Below, the list of catalogues there's a map chich was a constant element across every page. It's a custom-style google map that I created to match the design of the website.
