Kevin Newcombe

The development of our navigation influenced how we structured our new website. During our navigation sprint project, we did user testing of the whole site to see where and how people look for information. The results, for instance, led us to move our contact information out of the footer and onto a separate page with a form. We did this primarily because the footer wasn’t proving to be an obvious or user-friendly way to connect.

Something we also kept in mind during development was the potential for new pages down the road. So we designed the navigation to be adaptive in case additional pages were added.

We also wanted the navigation to change — in a unique way — as the user scrolled down pages. To achieve this, we decided to offset the navigation from the top of the page and make the logo a mask so you could see the website flowing around the navigation as you scroll down.

The main challenge for us was working in tandem with the original Starburst navigation and the new FKA version. Throughout our process, we discovered that the Starburst navigation had a number of issues, so in the end, we were able to learn and adapt to make our new navigation perform more smoothly.

Based on a three by three grid, our homepage was naturally inspired by our new logo.

Since this wasn’t a complete redesign, we had to think about the site as a halfway point because we were working with our original Starburst site.

We designed the modules to be as flexible and adaptable as possible so that down the road we could add new content and easily integrate it in without rejigging the entire site. The design approach we used to achieve this flexibility also helped to inspire our work on other pages on the site, such as our work page.

We’re rebuilding our website, starting with the most important part — our team page, where we showcase our talented crew.

Our focus began here for a number of reasons. The first being that our people are our strongest asset — without them, we don’t exist. It’s also one of the first places viewers go when they visit a company website. And it’s the page on our site that has seen the most change over the last five years.

Today, we have departments that are bigger than our entire agency was back then. We’re growing and changing, and so should our website. When we first built our team webpage, we had a total of six staff. Our layout worked really well for a team of that size but not so much for a team of close to 30 now, which is continually growing.

The tactic for our rebuild is a lot different than our usual approach. Typically, we start from scratch with a blank slate. However, we’re currently working with an existing website and there are a lot of challenges that go along with that. This includes stickhandling minuscule technical changes, like removing aspects from the old site while building up the new one. So, we need to be careful that we’re not removing too much at once in a short period of time.

We have to stop, analyze everything we’re doing, then slowly slide out the new site, while stopping again to ensure we’re not breaking anything in the process.

Reaching optimal loading speed

One area of critical importance is speed. Forty-seven per cent of visitors expect a website to load in less than two seconds and 40 per cent of visitors will leave a website if the loading process takes more than three seconds. That’s a big objective. And we’re tackling this by taking our learnings from recent web projects, analyzing what worked and what didn’t and then acting on that.

One way we’re accomplishing this is using the srcset attribute — a method that provides several source images along with hints to help the browser pick the right one, which helps reduce the load speed of the website and its images.

Applying a collaborative approach 

Another unique aspect about this particular web build is our team taking a much more collaborative approach to the work. Quite often developers and designers work in silos — designers design and developers develop.

For example, a few weeks ago we sat down with Jenelle, our lead designer for the team page, and discussed our overall goals at a high level. Then we dispersed, spent some time creating sketches and building ideas on our own and ultimately came together to share those ideas and move forward. As developers, this was a great help because it allowed us to see the big picture — empowering our team to make critical build decisions.

Taking a different track when it comes to JavaScript

We’re also attempting to build this site with as little JavaScript as possible.

Since most modern browsers auto-update themselves and become more uniform in how they run JavaScript, there’s less of a need for libraries such as jQuery. jQuery works well if you are building a project with a large amount of front-end code, like a robust site or application. However, if you’re building a small to medium library like us, Vanilla JS is a more suitable option at this time for this particular project.

Think of it this way, jQuery is akin to buying your dream home while Vanilla JS is akin to building it. Building it yourself means it has exactly what you want and none of what you don’t want — there isn’t a single brick wasted. That’s not to say we don’t utilize jQuery for other projects and don’t intend to in the future. It’s simply our approach at this point in time for the outcome we’re trying to achieve.

Sure it involves a bit more work, but if you haven’t figured it out yet — we’re not not afraid of a little elbow grease.

 

In the fall of 2014, we launched a new website for All Weather Windows, a company whose products are sold in nearly 700 dealers across Canada. A prominent feature of the website is a dealer locator map; however, the attempt to load that amount of data into a standard interactive map created a few technical and usability hurdles that we had to overcome.

When we originally added the locations to the map, we were overwhelmed by the sheer number of dealers—the map showed a giant cluster of markers overlapping each other.

 

To counter this, we added marker clustering to the map—at higher levels, you would see one single marker with a number indicating how many locations were close by. As you zoom in to more detail, the individual dealers’ markers broke off from the cluster to show their actual location.

Clicking each marker brings up the dealer’s contact information. However, with approximately 700 dealers, load times could lag, which was especially problematic since the map would live on the homepage. We realized that the average user might only look up information for a few locations, so we trimmed as much from the map as possible: for each location, only the map coordinates and a unique ID associated with it would be loaded. All the contact information for each location is loaded on demand when the user clicks a marker. This made a significant improvement on the load times and reduced any lagging when users would search for dealer-specific information.

 

We’re also implementing another technique for increasing page speed. Traditionally, the page would run a script that goes to the database, retrieves a list of dealers and writes that into JavaScript, which loads the map. Since this could take a long time and the dealer list is updated infrequently, caching was adding to the site so that every time a change was made to the dealer list in the database, our CMS regenerated a static JavaScript file to reduce overall load times.

Read our blog post about the process behind the design and overall development of the All Weather Windows website.

All Weather Windows, Canada’s largest privately-owned window and door manufacturer, was looking for a website refresh that could fully reflect the company’s knowledge, expertise and extensive product line. As a long-standing client of ours, we were excited for the chance to give this nationally-recognized brand an impressive new web presence.

All Weather Windows has been in business for over 36 years and, as a result, they have a large database of products to be displayed. In order to do them justice, we undertook a research process to ensure that we could showcase each product to its best advantage, while retaining swift and intuitive website usability.

For a website of this scale and complexity, and with such a wide variety of audiences, it is critical that visitors have easy access to information relevant to their needs. Whether the visitor is a dealer, builder or homeowner, the website makes use of rich drop-down menus, sidebars and contextual links so that every website visitor can find necessary and useful information.

The result of this project is a clean and modern refresh that truly highlights the expertise and knowledge of All Weather Windows throughout their many years in business, and that showcases their high quality, energy efficient products through informative product pages and a comprehensive style guide.