TerraCana Foundation Solutions Inc
Branding, Website Redesign
Note: This project is currently under construction. What is being shown is the preliminary/background work completed to date. Once the copywriting, animation and photography will be completed, I will continue with the site's design and coding.
Commercial and residential customers in BC, Alberta and the Yukon.
With clients such as BC Hydro, Vancouver International Airport, City of West Vancouver and Whistler, TerraCana was in need for a website that reflected the high calibre of their clients.
After interviewing the company stakeholders to learn what the main goals of their website were, it was determined that a revamp of their existing brochure website was needed in order to present the company in a professional manner — ultimately, to generate leads from both organic and direct search results.
Looking at the client's Google Analytics allowed a better understanding of the client's customer demographics. 1/3 of their audience are women, mostly home owners; the other 2/3 are male professionals in the construction industry (architects, engineers, city officials, etc.). In terms of device usage, 88% of their traffic was from desktops and only 10% were from mobile (2/3 used iPhones). With only 2% of tablet users, it was insignificant.
Currently, their website is not fully responsive, and their website breaks when viewed on mobile. It will be interesting to see if the percentage of mobile users will increase after the site's redesign.
Website & Competitor Audit
I performed an audit of their existing website from a design and content point of view (structure, navigation, visual design) while evaluating its strengths and weaknesses. I then compared the site to their top 5 competitors through the same analytical criteria.
It was determined that 4/5 out of their top competitors were not up to par in their website designs, giving TerrCana a clear advantage in their branding and online presence.
A site map of their existing information architecture was documented. Many of the elements were redundant, and it was determined that their website lacked content. After consulting with the client on the additional details they would want to add, a new site map was created — one that had more content yet that was also streamlined, offering valuable educational information that would please users as much as search engine optimization.
Key contact information needed to be easily accessible on every page, and was therefore added to the header and footer, as well as a site map was also added to the footer to give users an overview of the site's content, and to ease the "findability" of information.
Several iterations of wireframes were manually sketched on paper for each web page. I then chose the best of the manual sketches to present to the client. Once client feedback was obtained, the wireframes were modified and transformed digitally in Sketch. After 2-3 rounds of digital wireframe iterations, client approval was obtained, and the visual design phase commenced.
The client wanted the new "look and feel" to be clean and modern, yet "light, open & airy" as opposed to looking heavy, confined and "block-like".
As the client had already invested significantly in printed materials (equipment and vehicle signage, employee uniforms, etc.), the existing logo could not be modified.
I found the original colours of red and grey to be too drab and monotonous, so I added splashes of navy and slate blue as primary and secondary colours, respectively, for visual interest. Since 1/3 of their audience are women, it was important to keep the colours gender-neutral. Yet the colours had to be somewhat conservative and authoritative to appeal to their predominantly male audience.
I chose to work with Google Fonts for the ubiquity and reliability of Google's CDN. The determining factors were legibility and a "modern & friendly" feel. Several font families were considered, and after much exploration, PT Sans was the winner.
The colour palettes and fonts were put together and presented as Style Tiles as a way of determining the website's visual branding. The client opted for the "open look" of the white header and their existing red and grey colours, combined with the new blue tones, navy and slate blue.
The home page content is presented in order of priority. Starting with a Commercial & Residential section and large visual images allow customers to self-identify. A quick blurb describing who TerraCana is and what they do, allows the reader to quickly assess if they have landed on the right site and whether or not to continue.
The page ends with a CTA that takes viewers to the contact form where they may request a quote.
2D mockups: Illustrator, Sketch
Interactive mockups: InVision
Platforms & Frameworks: Bootstrap, Wordpress
UI/UX and Visual Design: Priscilla Then
Front & Back-end Development: Valentin Prugnaud
Copywriting: Priscilla Then, Carla Whippy, Rick Bongers