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.
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.
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
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
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.