Hello, my friends! Today is an extra special day because I have ANOTHER website reveal for you (have you checked out the Forthe & Sprint LLP website reveal yet?) - oh yes, it’s a double whammy to get you excited for the weekend.
Let's take a look at the sleek and snazzy Khats Construction website, shall we?
This website and design project was an absolute blast to work on and I am thrilled with the finished product. From start to finish, everything came together seamlessly. Don’t you love it when that happens?
Part of what made this particular project so enjoyable is that from the get-go, the aesthetic was clear and we had a very good understanding of what was needed to deem the project “successful”. Having that checklist outlined from the beginning made it very easy to check things off as we went, and also have a reference point to what needed to be done and where we stood on meeting the company’s needs.
Since this project involved a branding overhaul as well as a website design project, we got to dig in deep and narrow in on all aspects of Khats Construction’s online presence. This is the most fun since I love jumping in deep and tinkering around at every level!
In this blog post, I’m going to show off the new website, explain the branding process and decisions, talk about the user experience and the thoughts we had surrounding the website’s layout, etc. There’s lots of info packed in this post so grab a cup of tea (or a glass of wine, I don’t know your life) and let’s get started.
About Khats Construction
Since 1999, Khats Construction has been Vancouver and the Lower Mainland’s premiere construction and building firm. They work on a variety of builds ranging from residential, industrial, commercial and even heritage projects.
Their previous website was “painfully out of date” and Khats Construction wanted something fresh and modern with lots of visuals. The previous website’s navigation was extremely cluttered, the content was not maintained, and the photography was all low-res. All this to say that it was time for a facelift!
One of the major considerations was to present the information in a clear and concise way so that visitors to the site (especially prospective clients) understood who the company was, what they do, how the process works, and how to get in touch. We wanted to pay close attention to providing informative content displayed in a logical layout with the goal of getting as many people as possible to reach out to Khats Construction directly for next steps. It was also important to highlight testimonials and media features for social proof, something that didn’t exist on the previous website.
The colour palette that we selected was a dream to work with. We knew from the start that the site would include lots of white space (since we were going for a clean and modern look that would support the photography) and I love the greys and yellow/golden tones we went with. Many building and construction companies go for browns, reds and greens so I like that we went with a colour palette that is a bit unexpected but still pleasant. We used two fonts across the site, Aktiv Grotesque Regular and Proxima Nova (one of my personal favourites), and both are free through Google Fonts.
We applied the various grey and golden colours to many spots on the website. Not only do they correlate to various headers, they also appear in the navigation bar and the buttons.
Here are a few examples of how we used the custom colours on the Khats Construction site:
Link Hover Color
In the navigation bar, the page currently being viewed is displayed in golden (in the photo below, you can see we are on the Process page). If you hover over another navigation item, the text turns to a lighter grey colour (in the photo below, that’s the Contact page). This was a fun way to integrate colour on a website that uses so much white space.
Depending on where a button is located on the Khats Construction website, it has different functionality. We set this up in a few ways.
Firstly, on the homepage there is a content block with three options. When you hover on one of those buttons, it turns into a solid golden colour to clearly show which options you are going to click. Here’s a photo of this in action where the Process section is being selected:
Another place where we customized the buttons is on the Contact page. In this case, we went along with the “grey” theme of the page (seen in the contact form and the interactive map) and chose to set the button to be grey when the user hovers over it (same shade as the navigation bar and footer section). The image below shows the button being hovered over, otherwise it would be white with the grey used as the text & outline.
In addition to Khats Construction’s original photography, we used high-quality stock photos from Unsplash.
We also used some fun and relevant icons on the About page to help Khats Construction stand out from other companies in their industry. These icons also capture the ideas visually and break up the content of the page. We used the same golden colour on the icons and the set grey text, which compliment each other nicely. Here’s what it looks like on the website:
Another notable design element is the interactive map block on the Contact page. This is a super easy feature to set up in Squarespace but it really packs a punch.
Logo & Favicon
We went with a text based logo for Khats Construction and I really love how it turned out. Here is the primary logo:
We wanted to stay clear of the cliche “building” logos that so many companies use and the text based logo really stands out in the industry. The text based logo is also effective without being elaborate, which I love. It’s a simple logo and the way the text is positioned is aesthetically pleasing and creatively arranged. The colours emphasize the overall branding and unlike logos that rely on symbols or icons, the text based logo clearly spells out the company name for easy recognition. Ten points for identifiability!
In instances where the logo needs to be smaller (i.e., not all spelled out), we rely on the “K” & “C” letters in their set colours.
The favicon is another design element that turned out very well. What is a favicon? It’s the small square image associated with the website that is displayed by web browsers in several spots, including the address bar, browser tags, website history, bookmark lists, etc. Here’s how it looks in action in the Chrome browser:
The favicon can sometimes be a little tricky because you have to represent the brand in such a compact space. In the case of Khats Construction, we mirrored the text based logo with the “KC” letters in the brand’s colours (grey and golden) in a very simple design.
A lot of attention was paid to the user experience of this website, which I love since the information is clearly presented and every page & section flows intuitively to the next. This was one of the big improvements from the previous design, where the site included a lot of content (not all of which was useful or thoughtfully drafted) that seemed to exist haphazardly.
To begin, we simplified the navigation bar and removed a lot of unnecessary pages and links. The new nav bar setup guides visitors through everything they need to know, in the order the information should be viewed.
As visitors flip through the various pages, they can see that the information is presented clearly and thoughtfully. As we mentioned above, the site makes use of whitespace balanced with images and featured sections (the homepage is a great example of this).
We also wanted to highlight the testimonials and media features since Khats Construction understands the value of social proof.
The Process page is a real standout in terms of how we pieced together the page content in a way that lays out all the steps of a project for potential clients. Not only does this support the company’s value for open communication, it also gives users lots of information up front so that they are clear on how things work. In addition, this reduces the number of inquiries the company receives asking for clarification on their process, and in turn means that the inquiries are more likely to convert to a sales discussion. By clearly outlining the process on their site, customers know what to expect from the start and have a reference to see where they are during the project’s lifecycle. The photos corresponding to each section support the process stages and break up the content visually.
The Contact page contains all the important information a visitor to the site would expect to find: it includes a map of Khats Construction’s offices (a fun addition, outlined above) as well as their physical address and phone number, email contact form, etc.
Since the company has social media accounts but doesn’t consider them a business driver, we included the social links at the bottom of all pages above the footer. They are still there and easy for the user to find and click through but aren’t where users are directed.
It goes without saying that the website is responsive and displays correctly across all devices. Depending on how the website is being viewed, the content will adjust automatically. Since more and more users are visiting websites on their smartphones, it was non-negotiable that Khats Construction’s website be responsive and optimized for mobile.
Here’s a look at the homepage on a smartphone:
And another look at the footer section of the page:
Khats Construction opted not to include a blog at this time (which is why there’s no link in the navigation bar) and although they are interested in including email marketing, it is not currently part of their marketing strategy. If that change in the future, it will be very simple to set that up and integrate email sign ups on their website.
This was such a fun project to work on because while we were very intentional with the website design and layout, we also played around with some unexpected design elements. The finished product is very sleek yet functional and does a fantastic job giving visitors the information they need and encourages them to follow through with an inquiry. As you can tell, I'm very excited to add Khats Construction to my portfolio. Head on over to the site if you haven't checked it out already!
Tell me, what are your thoughts on the new Khats Construction website? Do you have any questions about the design process? How about our thoughts on website layout? I'd love to know so leave me a note in the comments!