Global Transportation Hub

Responsive website redesign

A still from the video introduction to the new GTH website
A still from the video introduction to the new GTH website.

The Global Transportation Hub (GTH) is Canada’s only self-governing inland port. Located in Regina, Saskatchewan, the GTH is strategically positioned between Canada’s two largest seaports, providing companies with quick and efficient access to global markets through integrated transportation links. It also offers tailor-made property solutions to companies that want to buy or lease industrial land to enhance their global supply chains worldwide.

The challenge

Imagine the logistics and planning that go into moving goods thousands of kilometres by land, air and sea, within Canada and beyond its borders. The GTH’s ideal location and expansive industrial land base provides companies the opportunity to reach 60 million consumers within a day’s drive and 270 million within two days. The prairie powerhouse wanted to be able to share the strategic services it offers to companies worldwide, whether they’re located in Tijuana or Thunder Bay.

The Goals

The GTH team knew its website was outdated and not meeting the diverse needs of its audiences, locally or globally. It wasn’t highlighting how the GTH is supporting long-term economic sustainability in Saskatchewan, or the opportunities to help multinational corporations get their goods to market more cost-effectively and quickly.

Our goals touched all aspects of building a responsive website, from content and branding to design and development:

  • Provide GTH with an updated responsive design website.
  • Integrate and expand existing branding to the new site.
  • Develop and implement a content strategy.
  • Build interactive tools to aid in transportation logistics.
  • Streamline and automate manual processes.
  • Turn the GTH website into an indispensable part of their sales process.

The solution

The vision for the GTH’s new, responsive website was to build a one-stop “nerve centre”. It needed to be a place for current and prospective clients to access comprehensive information on the GTH’s strategic advantages, key contacts, and interactive tools.

Discovery

The GTH team had a good understanding of the inherent challenges it wanted to address by updating its website. And while goals can be easy to pin down, with a project this size, finding the best solution can be nebulous. That’s why our team undertook a preliminary discovery project with the GTH team. It’s an under-used approach that’s proven to be extremely successful since it helps us be more accurate in determining project requirements and corresponding timelines. Essentially, it’s about getting down to the whys and hows in order to develop a comprehensive solution that brings the most value to the site.

Through the use of MoSCoW in our discovery sessions we were able to prioritize our effort and time to guide the project scope &emdash; which was particularly critical since the GTH had set a firm launch date. Key elements included overhauling the website’s existing content, extending its brand to the web, and developing maps and calculators that would bring value to the end user. We also interviewed people from the GTH’s various business units, gathering insight to inform the content strategy.

Design

During the requirements-gathering process, it became clear that we would be able to work on design and development concurrently. Our design team created the look-and-feel of the pages while the development team built the site’s skeleton and interactive tools. This practical approach allowed the two teams to iterate quickly and seamlessly, with an added bonus: we delivered the project sooner than planned.

We explored ways to extend the GTH brand with a series of style tiles
We explored ways to extend the GTH brand with a series of style tiles.

Extending the brand

The GTH team had been working with an agency on re-branding; our role was to extend the updated brand to the new site. We built on existing font and colour guidelines, using style tiles to explore how much of a brand shift the GTH team wanted for the web. The first version we presented was conservative. We used the GTH’s colours, fonts and graphic elements, but we repeated these for the web. Next, we offered a more dynamic theme, still within brand guidelines, but that used graphic elements to portray “movement.” Our final, more radical option featured flat, modern elements and bigger colour panes. This collaborative process helped the GTH team solidify the look-and-feel they wanted, which landed between the first two options. We went with a white background and lots of negative space on the site to let the words and images stand out in a fresh new way.

Focusing on the user

For every website, there are at least two groups of users: internal and external. As much as we focus on the external users’ experience (e.g. how they search for information, how content scrolls), we also need to consider the internal users responsible for keeping the site up-to-date. We achieved this balance by creating user experience sketches—rough drawings that map out the content, interaction, and navigation needs for the new site. It’s an effective way to get quick feedback from clients before we start committing to code.

Next, we transformed these static sketches into HTML-based, in-browser wireframes, providing the GTH team with clickable pages. This simple prototype of how the site’s pages function let us test the high-level theories we had, without creating throwaway code. After incorporating feedback and making adjustments, we kicked off development by taking the designs in the HTML wireframes and transferring them to Drupal to build out the templates, adding a layer of styles on top. Our design and development teams worked closely to make sure all of the business requirements were reflected in both the design and functionality.

Creating content

When the GTH launched its previous site, the messaging focused inward on the enterprise itself. For this new initiative, content needed to shift direction and speak to its audiences, not just about the end-to-end services GTH offers, but how it could help companies do business better. For instance, the new content anticipates—and answers—questions such as: What are the benefits of buying or leasing land from the GTH? How does this inland port streamline permits and regulations? What strategic partnerships can be struck between existing tenants?

The GTH team had updated brand guidelines on messaging voice and tone, which helped us start to shape the content. Taking information from the stakeholder interviews, we laid out business goals and key messages using a program called Discovery Canvas. With the site map solidified, we built out the content, filling in the gaps with the GTH’s communication lead. We also leveraged Google Translate on the site to give users instant access to the information in English, French, and both simplified and traditional Chinese.

Development

Implementing interactivity

Interactivity was an essential part of the new site. While content guides the users’ information needs, the practical tools we built — maps and calculators — give existing and prospective customers hands-on access to find tailor-made answers. Now, they can make more informed decisions more quickly.

The property search map lets customers view the GTH’s location, existing clients, and land available for development. This tool allows staff to upload an image of the GTH’s footprint in Drupal, and draw interactive shapes or “hotspots” to represent specific clients. The property tax calculator adds to this, enabling customers considering setting up operations within the GTH to determine the annual tax rates for various types and sizes of facilities.

We also built an interactive location advantage map that highlights the GTH’s physical location as an international distribution centre. Prospective clients can map out transportation links and logistics, such as cities and drive times. The transit time calculator takes planning further once again: clients can determine shipping times from point A to point B when selecting a specific transportation route, such as rail or truck.

Automating processes

Like many organizations, the GTH was still using paper-based forms and sometimes even mail to share information. We helped automate a number of processes, such as permit applications and building summaries, by creating forms that could be filled in and validated online. This eliminated time-consuming back-and-forth cycles between the GTH and clients. It’s a first step toward streamlining and automating many of the manual processes.

Setting clients up for success

One the most important aspects of the quality assurance process is training. Since we had moved the GTH website to a Drupal platform, we needed to show the team how the CMS functions so they could manage their content quickly, whether changing out photos or updating messaging. Training is often the time when clients first get a full-scale introduction to all elements of the site, especially how the front-end and back-end interact in real-time. Proper training builds confidence, which inherently makes the site more valuable, especially as manual steps are eliminated in favour of web-enabled processes. For instance, if there’s a change in the business climate, the GTH staff can be responsive and keep content current.

Proper training builds confidence, which inherently makes the site more valuable, especially as manual steps are eliminated in favour of web-enabled processes.

The results

The relaunch of this new, responsive website for the GTH was a resounding success. It met all the project goals and fulfilled what the GTH team wanted to achieve. The original site’s information architecture was cumbersome and it was difficult for users to find information. But that’s all changed. The GTH team has reported that the new site has made a huge difference in how they’re communicating with clients. We delivered the following:

  • A responsive, interactive and user-friendly website that can be used across all devices
  • An expanded brand and updated content that provides users with clear and information and a seamless experience
  • Interactive tools that help existing and prospective clients in their decision-making and logistical planning
  • Streamlined processes, included an easy-to-manage CMS and automated forms
Screenshots of the GTH's new website on multiple devices
Screenshots of the GTH's new website on multiple devices.

What’s up next

Our first phase of building a responsive site has helped the GTH communicate more effectively with its stakeholders. It’s gratifying to know our work has had an immediate, positive impact. The next phase could involve further development of some of the tools we’ve launched to expand users capabilities even more, such as giving them the ability to manages their own forms or drawings. We also look forward to helping the GTH team take the next steps in streamlining and automating its manual processes.

See it for yourself

Visit thegth.com