Fun with Triangles

Tying down the USA Discovery Program

How I helped create and maintain an award winning training platform for Brand USA.

An award winning project

For a while, my bread and butter work while at Black Diamond was working on the USA Discovery Program. A training program for UK travel agents to learn about the USA, a couple of years later and it is now live for travel agents in Australia, New Zealand, India and Brazil. Our small team built it up from scratch and I played a key role in the front-end side of things. In 2014 it won a TTG Travel award, a big achievement in the travel industry.

Gamifying Engagement

Selection of badges
I had fun making badges. Users earn these as they learn.

Looking at pre-existing training programmes for travel agents, we knew from the outset we had to take a different approach. They were all terrible websites that not only looked awful but functioned poorly too.

We were inspired by the absolutely wonderful approach of Team Treehouse, a training resource for webby people. Their visual style looks almost as if the site is designed for teenagers! It’s the complete opposite of the stuffy “adult” travel training program competitors we’d looked up and it instantly makes the experience more fun and engaging. One great mechanism we implemented with the Discovery Program was awarding the users “badges” for each test they passed. This gamification aspect of the programme helped with engagement, with many users feeling compelled to earn the whole set.

Making Modules

Selection of modules
Each “module” has its own CSS file.

One of my main roles on the project was ensuring the CSS and Javascript were organised in a way that was easy to maintain. Without having a plan, a large site with lots of content and design elements can easily become unwieldy, especially when working in a team.

It was important to split the visual elements of the site into their own modules, each contained in their own CSS file. I was inspired by SMACCS for this. Very importantly I was using the BEM naming structure too. Without going into too much nerdy detail, SMACCS is a way of dividing up your CSS, while BEM is a way of naming your classes in CSS. BEM has quite literally transformed the way I write my style sheets. Funny how sometimes a single article can change the way you work!

Keeping the user engaged

Email templates
Email template designs.

Using amazing tools such as Campaign Monitor, we were able to keep users engaged via email. I helped design a set of email templates that could be sent out when new content was created. With a bit of creativity splitting up lists of users, we were also able to send out reminders to sets of users who hadn’t finished certain parts of the training, or were yet to start training at all.

Those Extra Touches

Custom 404 page
A cute 404 page is practically mandatory.

It’s always nice when you come across something unexpectedly pleasing on a website. I know it’s been done a million times before but we had fun with the 404 page on this project. A little lost wiggly line scouting around the USA was a very relevant image! If you’re interested in how it’s done, there’s a really clever technique pioneered by Jake Archibald using SVG and line dash lengths.

I can help you, too

I love all things CSS. Keeping things structured, maintainable and beautiful using preprocessors is a joy for me. I’m always learning about new ways to improve in this area as new technologies come about. Have you got a meaty front-end project that you need some help with? Perhaps you’re just setting off and you want to start on the right track, or perhaps it’s been going a while and it needs reining in. Whatever it is, I’d love to hear about it.

Read More see all projects →

Getting Trippy with Canvas and MIDI

How I teamed up with a techno producer to build a fully audio reactive visual system that runs on web technologies.

Being the Map Man for South African Airways

How I built an interactive flight route map for South African Airways.