TQM web design

The original TQM website, managed by TC Energy, lived on an antequated content management system that was at the end of its lifecycle. I was asked migrate the mostly text-based website to Episerver, the content management system TC Energy uses for their web properties. This presented a unique challenge, as the codebase for all TC Energy's Episerver websites is shared, and therefore has a limited number of layouts and building blocks from which to pull from. Because TQM is a joint venture with its own unique branding and the need for dual languages, I was forced to think outside the box...

Establishing a visual language

The original TQM web design lacked in the way of creativity or distinct styling, so when I became involved, I was tasked with developing an innovative, yet non-radical approach to the design. Inspired by the TQM logo, I established a color palette for the website, and designed a common graphical treatment using varied thicknesses of circular lines watermarked over colored blocks with overlays of topographical textures. These were used as background elements scattered across pages of the website, reinforcing a consistency between pages and helping further distance TQM's website from its Episerver counterparts.

Do what you can with what you've got

Because the TQM Episerver platform shared a codebase with TCEnergy.com, stylesheets needed to be accessed or overridden, which required back-end dev support that didn't exist for the project. I had to find ways to update things like fonts, navigation systems, site colours, and various other design features without being able to access the master stylesheet. Fortunately, I discoverd a workaround within the limited Episerver platform that allowed front-end developers the ability to facilitate basic style changes at the site level, rather than within the back-end framework.

I sourced photography to bring energy to the often text-heavy pages. I aimed to use bright, dynamic, people-centric photos as often as I could. Additionally, I generated icons where appropriate to help supplement the content. When working in a CMS, it's ideal to make the most of the site-building blocks at your disposal, but occasionally I still had to roll up my sleeves and edit raw HTML and CSS at the page level to accomplish certain things.