In
our industry, it’s all about learning. We have to keep up with the latest technology and trends to serve our clients, and we always want to be improving our skills—see
Core Value 6. For many of us, the best way to learn is by doing, so we set out to educate ourselves by developing an over-the-top holiday card…and boy did we learn.
I might be a little biased, but our holiday card (yes, we still call it a card) was awesome. It was beyond the generic postcard, video, or email that many companies send out. Did it take more resources than those generic cards? Yes. But did
we get a whole lot more out of it? You betcha.
Below I detail some of the card’s features, some lessons we learned, and even some behind-the-scenes insights that you’d never know just from looking at the awesome card.
‘Twas the Night Before Go Live
The card is a story—a hypothetical tale of putting a project live. While we don’t actually scramble the night before projects go live, “’Twas the Night Before Go Live” sets up the
story in the ‘Twas the Night Before Christmas poem format.
The story is an adventuresome tale of the Far Reach team pulling together on a big project. Just like in real life—including this project—everyone played his/her part to make the project happen.
Personal URLs (PURLs)
Holiday cards should be personal, so we leveraged technology to make that happen. Personal URLs (or PURLs) allowed us to put customized content on the page for targeted visitors. So when Jane received our holiday card email and
clicked on the link in the message, she was taken to a URL that was generated just for her, to display her name and company logo.
Pulling together our list was a feat, to say the least. We had contacts in our CRM, our inboxes, and worst of all, our brains. Pulling all of those together took more time than expected, and we’re still not sure how thorough our list
was. We also selected certain contacts to get more personalization, each of which required an individual graphic. We originally thought there would be 20-30 of these contacts, but we ended up with more than 70…a slight increase.
The lesson: Keep your CRM updated (easier said than done, we know).
If you didn’t get an email with a custom URL, that means you’re not on our list. Make sure to
subscribe to be added.
Mobile Design
The exact number varies, but most experts report that about 50% of emails are opened on mobile devices. Our main method of distributing the card was through email. How ineffective would it be for us to link to a site that only worked
on desktops? We tried to integrate parallax effects from the desktop version into the mobile version…but as you’ll read below, it didn’t quite work as we’d hoped.
The lesson: Based on our analytics, about 1/3 of the card’s traffic was mobile, so, yea, mobile is pretty important.
Parallax Effects
As you scroll through the card on a desktop, you’ll notice images moving. We used the Skrollr parallax scrolling JavaScript library, which uses CSS and HTML to animate objects as you scroll. Go ahead—scroll to your heart’s
content.
One of the biggest lessons we learned during this project: the pre-built framework we implemented wasn’t exactly optimal for mobile devices, especially Androids. We were determined to make it work, so we guessed and checked for days.
In the end, we just couldn’t make it work within our timeline, so we forked a static version of the site for Android, and left the parallax effects on desktop and iOS devices.
The lesson: Research your frameworks before you implement them. Find out whether it will do everything you expect and want it to do, and if there are other sites that have implemented it.
Pay Yourself First
We didn’t plan ahead. We weren’t prepared for a big obstacle. We waited until pretty late in the game (December) to start coding the site. Why? Because we were booked with client work (not complaining, of course). I
think most companies like us experience this—when you have an internal project, it gets pushed to back of the queue behind client work. Well, we learned that might not be the best blanket strategy.
The lesson: Work internal projects into the existing project management process, rather than classifying them as less important or more flexible.
Outdated jQuery
The jQuery 1.3 version that we implemented to enable the parallax functionality did not support the Ajax query syntax we had developed using jQuery 1.10. Since it would have been a huge hassle to refactor the work already completed
on the parallax effects, we implemented the getJSON method that is supported in jQuery 1.3.
The lesson: Communicate, test, and research. And when in doubt, research, test, and communicate.
Stop the Scope Creep
We started with an idea that was great, which is for the most part what you see (the story, the site, the photos). But then, we got greedy—or to put it nicely, creative. We were adding new features as we found them. From
a planning and budgeting purpose, that’s a nightmare. We would never let a client do that, and from now on we’ll hold ourselves to the same guidelines.
The lesson: Set the scope, stick to the scope.
Learning Experience
There’s no doubt this project was a learning experience for the whole team. We hope it resulted in an entertaining holiday card, different than anything you’ve seen before.
In the end, the development of the holiday card probably mirrored the ‘Twas the Night Before Go Live story we were telling—maybe more than we’re willing to admit.