WorkBC - CareerTrek

When WorkBC approached us with the idea of building an online career portal, anchored by a large and interactive video library, we knew we had the opportunity to be part of something special. “Career Trek”, as the initiative was known, had to be informative, engaging, easy to navigate and, considering it was a pilot project for the use of online video by the Ministry, successful.

Many factors come into play when choosing a career – and the ocean of online information can sometimes clutter the path to it. To this end, the Ministry of Jobs, Tourism and Skills Training, Labour Market Programs Branch, WorkBC Products & Services Unit has developed a number of innovative career and labour market information (LMI) products under the WorkBC brand. These products were funded through the federal government.

“Career Trek”, a website featuring various career videos, was developed using innovative technologies and media to present career planning LMI to youth (ages 18-25) across British Columbia (careertrekbc.ca).

A highly collaborative process between the Ministry, Work At Play and the film production company, Barbershop Films, in order to fuse quality content (video and data) with an intuitive interactive experience designed and developed by the team at Work at Play.

We were delighted to help make this vision a reality, and here we review the work that went into putting Career Trek on the map.

The Brief

The primary aim of the project was to create an online experience that highlighted 52 in-demand occupations to young workers in British Columbia. As a pilot project for the use of online video by the Ministry, it was critical that the site was designed to evaluate video as an engagement tool.

Career Trek: Flight to Victoria

Discovery

To explore and ideate on creative approaches, an on-site creative facilitation workshop was held with the Ministry team in Victoria. This enabled our team to delve deeper into the objectives, strategy and target audience, and provided an exceptional foundation for the rest of the project.

Work BC Career Trek: Whiteboarding

UX and Design

To give viewers a real sense of each job, two Career Trek ‘hosts’ – Viviana and Brian – travelled 8,200km across the province, bringing careers to life in a series of light-hearted but extremely informative video episodes.

The hosts tried each job firsthand, and conducted on-the-ground interviews with people working in those careers. In total, Barbershop Films produced over 4 hours of video, which was delivered alongside rich background information and data in a compelling, intuitive user-experience.

Publishing videos online is a cinch, but presenting videos alongside rich data in a light, app-like framework is no simple feat. The Career Trek experience needed to be fun for users, but also had to provide multiple ways to filter and visualize the information related to each different career type, associated skill necessary for the job and location where the career was filmed.

To deliver on this task, our UX team researched existing approaches and created a concept map to describe the components and activities of the website. This concept map informed functional user stories, and laid the foundation for the overall structure of the site.

Career Trek: Concept Map

Career Trek: Episode Filter

From there our UX team worked on the definition and refinement of:

  • User profiles
  • Content discovery and consumption habits
  • Orientation of site visitors
  • Design principles as foundation for design direction
  • Primary and secondary measures of success and key metrics to track

We created site page layouts through a close collaboration between our User Experience, Design, and Technical teams, using an iterative approach to ensure a perfect blend of messaging and utility.

A great mobile experience was also critical for the target demographic – designs were made to be fully responsive, delivering an attractive, intuitive experience, no matter the screen-size.

Central to the interactive design were filters that enabled videos and associated information to be viewed in a number of different ways, encouraging deeper exploration; map, grid and list views offered a highly dynamic discovery mechanism that would otherwise not be possible using a conventional video channel.

Development

The site was built using the latest jQuery libraries on top of a Yii PHP framework, demanding very tight collaboration between the UX and development teams. They needed to ensure information would always be presented optimally for the screen-size.

We leveraged a jQuery library called isotope, which enabled sorting and filtering of data within the browser, thereby enhancing the speed and fluidity of the experience. Isotope also enabled us to create the sort of dynamic animations normally not possible on iOS devices.

With respect to handhelds, we targeted mobile devices using a jQuery Mobile version of the site, which resulted in an interface fully optimized to suit those screen dimensions.

By creating a variety of different filtering mechanisms users could access the career information through a number of different dimensions. In fact there are a total of nearly 230 billion filter selections a user can apply to the careers – no small number! The key skills needed to succeed in each career were also displayed in an interactive panel alongside the career being profiled.

We optimized the site for speed using image “lazy-loading” (images don’t load until they’ve entered the user’s viewing area) so that unnecessary bandwidth isn’t sacrificed by loading images a user might never see.

To ease the path of users exploring multiple careers, our developer used Javascript to create an intelligent URL structure that updated based upon the search queries and filter settings on the page. This enabled visitors to not only share and bookmark specific filter results, but also to return users to the same location without having to repeat their selections.

Solid analytics tools were essential for the site, since a primary business goal was to determine the efficacy of online videos as a medium for engaging the target audience for this campaign. Although Google and YouTube Analytics provided ample data for basic reporting, key measurements were missing. The ability to track highly granular interactions like filter settings and video interactions was important to evaluating the project’s success with users. Since the site’s intelligent URLs didn’t require page-loads, Google Analytics could track those interactions. To address this and the limited tracking capabilities of YouTube, our developer designed some custom code to keep our performance – enhancing elements while simultaneously bolstering the site’s analytical capabilities.

The Ministry of Jobs, Tourism and Skills Training also developed JobFest, a rock concert themed mobile event travelling to 50 communities throughout B.C. from spring to fall 2012. This event showcases the Ministry’s LMI products.

Career Trek is a key product featured at JobFest, so the website needed to function in an offline environment. As a result, our team kitted out a number of laptops with local webservers and all YouTube content was replaced with high-def local videos – the website without the web. This offline version of the site is currently being showcased at JobFest.

WorkBC Slideshow

Results

A great partnership with the WorkBC team encouraged our team to be highly adventurous with their approach and solution, knowing their expertise was trusted to deliver the best results.

To date, the average visit length on the site is an impressive 6:26 minutes, showing the traction that video content has with the target audience.

Furthermore, the 3rd most used device to visit the site has been iPhone, followed by iPad and then Android. In fact, mobile visitors view more pages, stay almost 50% longer and have a higher percentage of repeat visits with lower bounce rates. These user behaviours demonstrate the importance of having a fully optimized mobile site, and clearly support the efforts put into its creation.

A great team, supportive client and talented partners all combined to making the site a great success. Check it out Career Trek BC, play around – and maybe you’ll find that career you always wanted!

Get in touch

Does your fan engagement strategy need a little extra drive? Call us – we can help put you on track.