Jacknd

Flannels

A massive expansion of unknown luxury fashion retailer FLANNELS meant that alongside opening new stores they also wanted to update their site to attract customers looking for a more luxury experience and to create something that would attract bigger fashion brands.

We aimed to design a more contemporary and minimal website that would be more fitting with the brands and something that customers would want to come back to, to get that luxury experience

Homepage

We wanted the homepage to really show off the product by having large photography that meant the user could really see the products up close. The full page banner image really allowed us to have hard hitting imagery upfront which was a good selling point when brands would be approached.

Being an ecommerce site product needed to feature on the homepage and we introduced smart ways of pairing looks up with a singular product carousel. It was subtle but the customer would still know that they were able to purchase the items that they were seeing in the images.

These small breakup interactions on the mobile and desktop experience meant that the user would stop deliberately when scrolling down the page to interact with these elements and this is where we would showcase some product imagery which linked to the pdp’s, or link customers out to the blog where they could keep up to date on.

Navigation

The isn’t too noticeable when a user first lands on the page on the desktop experience. This was something that we really wanted to push for when designing for a luxury market, we wanted to let the product image lead the page, but when they start to scroll down the page they would then become more aware of the navigation itself, enabling them to get around the site in a more productive way, getting them through the funnel quicker.

We striped back the header and looked at the analytics for the links that we would have within the dropdowns. There was a big push re-categorising some of the items as some of the previous links were linking through to the same pages. But guiding customers to sub category pages was key as they would have to filter down through so many products to fins what they wanted.

Also it was key that we were promoting our top brands and other up and coming brands, so we wanted to create a top 10 for each of the main categories that we sold to.

The ‘new in’ section really helped to build traction to new products from top brands, this helped users get straight to the pieces that they were looking for from recent fashion shows that they may have seen.

Product Landing Page

With the PLP’s we opted for a clean layout which really focused on the display of the products themselves. After a lot of exploration the decision was made to move the positioning of the filter section to enable the product imagery to take more of the space on the page.

The filter was a big shift in the design from what was previously on the site, by moving it above the products it overlayed the product imagery once opened. The user was then able to see all of the possible filter categories within one view on the desktop experience.

As the user selected individual filters, tags appear alongside the refine button this then made it much easier for the user to remove filters without having to go back into the dropdown, this in turn sped up the ability to get them through to the PDP pages.

On mobile the user experiences a persistent refine button at the bottom of the screen, this is something that was felt necessary to include due to the vast amount of products available, we wanted the user to quickly and easily refine their product search.

Product Detail Page

Within the PDP it was evident that there should be prominence of the product image itself, as this is where the user can really get to see the detail, and when they hovered over they would see a zoomed in version of the image over the top of the copy on the right hand side.

We toyed around we having the other product images underneath the main image, but this would then go below the fold on some desktop resolutions and it was felt that we should display all possible images upfront so that the user didn’t need to scroll down the page to find out more.

A clear type hierarchy was produced to work for different product lines, also a key aspect was to give some more prominence of the brand names, due to the fact that previously we showed the brand logo itself but going forward with the new design we wanted to move away from showing the logos as we rarely received very good quality svgs and the implementation of them was never very good so we decided to take this out of the equation by removing the logos completely.

We then wanted to make the size selectors very clear and easy to use so we gave them some breathing space to make it clear to the customer that was where they would make decisions on the product before purchasing.

Having a prominent add to bag button was a key feature for this page, as ultimately this what you want the customer to be clicking. On the mobile experience this was prominent in that we have a sticky button on the bottom of the screen to show the price aswell as the persistence of the add to bag button itself.

After the initial release we had a drop in the use of the website, due to the fact that this was something new and that users weren’t used to this. Also that we produced something to try and bring in a new type of audience that flannels didn’t previously have. someone really into their high end fashion, not just someone looking to buy a stone island to go to the football which was a key audience member that we also didn’t want to loose. After the lull we found traffic picking up more than previously, sales had gone up and alongside the marketing we were able to bring in more customers which would look at flannels as a key place to shop.