City of Edmonton

Industrial attraction responsive website design

Banner image of a man working in an industrial complex
Edmonton is a great place to do business - and it consistently leads the nation in economic growth.

Since 2008, Yellow Pencil has worked with the City of Edmonton on projects to reinvigorate its digital presence and strategy, and improve its engagement with citizens. Through a series of ongoing initiatives, the City of Edmonton asked us to create a separate website to focus on industrial investment and development within the region.

The challenge

Edmonton is primed for growth with a diverse base of business and industry. Key sectors such as petrochemical processing, transportation, and manufacturing are supported by its strong strategic position within the country. The City of Edmonton needed to find a way to demonstrate the opportunities it offers to a global audience.

The goals

The City of Edmonton wanted a responsive website to promote industrial development and investment within the region. It also wanted to give potential clients the ability to initiate contact quickly. Our goals were to:

  • Create a visually compelling and technically informative site that showcases Edmonton as an industry powerhouse.
  • Build a fully responsive website on an OpenText platform.
  • Provide users with a streamlined experience to navigate city planning and development processes.

The solution

Building a user-friendly, responsive website in a short time frame with a limited budget wasn’t new to us. Our challenge, however, was finding the best ways to bring value to the project, and empower the City of Edmonton’s team to be responsive to their audience.

Discovery

The new website needed to clearly and quickly convey the attributes connected, prosperous, and strong. Its audiences needed to be able to access information on industrial development and investment in Edmonton any time, anywhere. They also needed to be able to connect directly with City of Edmonton staff to learn the ins and outs of starting a new business, or expanding an existing one.

The website had to enable City staff to be responsive to audience and market needs, creating and updating content quickly and easily using OpenText WSM, the City’s enterprise CMS. The site also had to use City branding, without restricting the industrial investment team’s marketing activities. Our approach was to build a modular site (essentially a collection of “building blocks”), which would allow City staff to focus on creating the best possible content, rather than fighting with pre-set templates.

Design

The current City of Edmonton website already includes detailed information on industrial development and resources. This new site was all about showing, not telling.

We focused on using bold visuals and interactive elements to illustrate Edmonton’s core industries. Similar to other projects, we used style tiles to present a spectrum of design concepts to the City of Edmonton team. It’s a collaborative way to determine how far the branding should shift from existing guidelines.

Two different style tiles that we had created for Industrial Attraction

After the direction of the design was determined, we followed up with basic Photoshop composites. These were then rendered as in-browser wireframes that transform static composites into an interactive environment. The module site was taking shape, and the City of Edmonton team could get a hands-on feel for how the pages, text, and visual elements would work together.

From a content perspective, key messages were added to highlight the City’s concierge service, which seamlessly guides potential investors through the complex planning and development process. We also pushed creativity to new limits by developing an interactive map and animated infographics. These elements do double duty; the map, for example, provides geographical context while its interactivity lets the user “draw” their own story by selecting elements they wish to see, whether it’s airline routes, or pipelines.

Development

Creating a dynamic and visually striking website doesn’t need to be limited by an enterprise CMS. Building the site in Wordpress, for example, would mean staff would be working on more than one platform.

Instead, we used OpenText WSM to deliver a flexible, yet stable (it’s easy to customize but difficult to break) modular layout for staff, and a cutting-edge interactive experience for an international audience. From start to finish, designing and building the basic site took a few months.

Building interactivity

One of the City of Edmonton’s priorities for the project was to provide its users with a multilayered, interactive map that works across multiple devices. Whereas a typical map experience allows users to click and zoom in and out across one layer, the interactive map we built goes four levels deep. This means that it clearly illustrates, from an industrial standpoint, the vast transportation network that radiates from the hub: Edmonton.

screenshot of interactive map

The interactive map provides users with essential logistical and transportation information such as airline flight paths between key cities, railway lines and linkages, pipelines from Canada to Mexico, and truck routes. Users can zoom in and out of the map, pan around it, and turn each layer on or off to zero in on specific information.

Building such an intricate and interactive map was an exciting challenge for our development team. We wrote our own proprietary map code rather than working within the limits of Google Maps. Steps included creating a data feed for the map, making layers in Photoshop, and mapping coordinates into a system that would plot itself back to the map when updated. Since the map needed to be responsive, our team built a front-end JavaScript framework that would line up the layers, regardless of screen size, and size up or down quickly, eliminating lag time.

Keeping information current is critical — the City of Edmonton staff didn’t want to have to rely on us every time they wanted to make a change to the map. We built a Photoshop plugin that lets them update and expand information in one area (e.g. Canadian Pacific rail only), without having to go through all the layers. Like the interactive map itself, the plugin is a smart solution that empowers the user and brings added value to the project.

We used OpenText WSM to deliver a flexible, yet stable modular layout for staff, and a cutting-edge interactive experience for an international audience.

screenshot of the homepage on multiple devices

The results

The City of Edmonton team was impressed by how this relatively simply website delivers maximum impact. The complexity of the interactive map, in particular, exceeded their expectations. We focused on the key priorities, and delivered the dynamic user-experience the City of Edmonton was hoping for. The new website accomplishes the following:

  • Identifies and promotes Edmonton as leader for industrial development and investment, showcasing its geographic advantages.
  • Connects potential investors to key personnel who can accelerate planning and development processes.
  • Delivers a fully responsive and interactive experience, providing users with powerful visual tools.

What's up next

Working on a smaller project for the City of Edmonton was a new and rewarding experience for our team. It allowed us to deliver a quick, but innovative solution that allows our longtime partner to respond to a rapidly growing economy. At the same time, we’re making some exciting changes to the City’s main website so that it continues to meet its audiences’ diverse needs.

See it for yourself

Visit edmontonindustrial.ca