HavenBuilding an
Online Superpower

01

Background

Haven is a leader in the menswear industry. Established in Edmonton, they are committed to forward-thinking fashion and providing customers with high-end products that can’t be found anywhere else. With two brick and mortar stores, the majority of their business is done online, where they have carved out a passionate customer base.

Overhaul has been working with Haven since 2006 and rebuilt the site numerous times. We’ve helped them expand their brand beyond Western Canada into becoming a world power in the menswear market. We worked hand-in-hand with the owners on redesigns and updates, making sure that the site met their needs.

This latest iteration of the site is the result of a need to compete on a higher level. Our objective was to define user needs and wants from the site and combine the previous mobile experience into one responsive site and codebase.

02

Strategy

Having last re-done havenshop.ca in 2012, approaching the site in 2015 meant that almost everything had to change. They needed a new look, as their current structure and visual style have been blatantly copied many times. Changes would have to be made to the code to make sure that it is up to current standards. We wanted to take responsive design beyond what we’ve done previously to ensure that the site looks great on massive 5K screens.

Most importantly, we needed to increase the speed of the site. Amazon and Walmart increased revenue by 1% for every 100ms of improvement. Speeding up the shop pages on Haven had the potential to increase their profits by thousands of dollars. By integrating innovative loading techniques, responsive image handling and light code, we could take havenshop.ca to the next level.

Throughout the site we needed to make products easier to purchase through a variety of key interactions. We planned to integrate filtering and sorting techniques to ensure that consumers could find the products that they were looking for. The search functionality also needed to be upgraded to allow for easier discovery. Throughout the blog pages we needed to give Haven the ability to integrate products, giving the users another portal to the product page. We planned to update the product and bag pages to ensure that users could find what they needed without hassle, and be informed of any deals or products that they would be interested in. Overall, the site needed have a better shopping funnel.

illustration
03

Solution

The new havenshop.ca keeps some of the styles of the old website, so as not to confuse users who are used to shopping there. It is, however, an entirely new site. We’ve integrated a responsive grid, making images bigger and giving the site a more “techy” feel. To ensure that the site is consistent we created a style pattern of all the site elements. This helps us in development, but most importantly it helps anyone who is designing and coding pages in the future see what elements are already coded and available to them.

The home page presented us with the challenge of presenting a lot of links and images in a way that is easy to navigate and yet aesthetically pleasing. The slider, with arrows and thumbs has been proven an ineffective tool. Instead we designed a vertical scrolling grid with the use of scrolljacking. Haven can add images into their choice of pre-defined grid layouts. Links that need to be emphasized sit on their own. Calls-to-Action that are less important get placed in a grid of 2, 3, or 4 boxes. These grid areas are then isolated and take up the full height and width of the users screen (minus the navigation bar. The user can navigate through these areas by scrolling up and down, or by clicking on the box icons on the right side of the screen.

Homepage Grid

  • 1 illustraton
  • 2 illustraton
  • 3 illustraton
  • 4 illustraton
placeholder
Responsive

We’ve created different blog category index for Haven so that each of the sections fits the content. The Latest News and Journal sections feature excerpts, the features and lookbooks sections (which are the real meat of the blog) have large images laid out into a grid. All of the layouts fill out the screen at any size.

illustration illustration illustration

Lookbook

Each of the blog templates are different. The image slideshow post template facilitates lookbooks and image heavy posts. The slideshow allows for hotspots to be placed on the image. Haven can use these hotspots to convert blog readers into customers. When a user clicks on the hotspot a product thumbnail and name appear, linking to the product page. Beneath the lookbook we can also display different products that are visible in the slideshow, so that users can shop the look. An information icon allows for a text panel to be made visible with credits and any other applicable information.

Editorial

There is an editorial template, which allows Haven to write long and short-form posts in a magazine style with ease. This template allows for slideshows. It allows for grids of images, columnization, callouts and translation to Japanese.

Video

The video post template allows for easy posting of relevant videos. All that the editors at Haven need to do is link to a vimeo video and the template inserts the footage as a full-width element. This is helpful for the video lookbooks that they create.

We created a complex filtering and sorting system that allows the user to filter the items by brand, category, size and color. Due to their size, we hide them initially, but they open as a drawer when clicked on. We improved the search functionality with auto-completion and product display, all within the dropdown. Both of these key elements help users find what they’re looking for quickly.

illustration illustration
illustration illustration
illustration illustration

On the product pages we bring in a variety of related products. We introduce items from the same category, from the outfit, from the brand, as well as what the user has been looking at recently. We also have a special “Curated for You” section which tracks a logged-in users habits and suggests items that they would like. Haven has lots of repeat customers.

Those same logged in users, once they have added the item to their cart, can then save money on shipping. We calculate the shipping and suggest items that they can buy so that they get cheaper (or free) shipping.


 
  Haven Homepage
 
 
 
 
 
  Haven Homepage
 
 
 
 
 
  Haven Homepage
 
 
 
 
 
  Haven Homepage
 
 
 
 
 
  Haven Homepage
 
 
 
 
 
  Haven Product