TerraCana Foundation Solutions Inc

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.

• Audience

  Commercial and residential customers in BC, Alberta and the Yukon.

• Mandate

  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.

• User Demographics

  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.

• Information Architecture

  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.

• Wireframes

  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.

• Visual Design

  Branding

  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.

  Colour Palettes

  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.

  Font Tests

  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.

  Style Tiles

  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.

• Mockups

  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.

• Tools

  2D mockups: Illustrator, Sketch

  
  

  Interactive mockups: InVision

  Platforms & Frameworks: Bootstrap, Wordpress

  Collaborators

  UI/UX and Visual Design: Priscilla Then

  Front & Back-end Development: Valentin Prugnaud

  Copywriting: Priscilla Then, Carla Whippy, Rick Bongers