Spotify Wrapped is huge, like really huge! But had you ever considered building something like that for your own business? Building an end of year campaign can be a fun process for the development team and might not be as complex as you think.
We built our own end of year stats campaign over at Blue Cat Reports so have done a bunch of the heavy lifting already in terms of working out the how. I wanted to get some details down below to share with people so you could see how you might do the same. Getting the idea in peoples heads now should give you plenty of time for that seed to grow. However, don't leave it to November to build this, like all good Christmas specials you will probably have to work on this in the summer :)
I have split this post into two sections. One on what data to show people. It is worth putting some thought into what data you can get out of your database as well as what people might want to see. Secondly I have some technical tips on implementing this.
What data to show people
Two words should be your guide when thinking about what data to show people: Positive and Fun.
From Duolingo’s write up of their campaign:
“People loved to share their relative ranking compared with other learners. Comparing with others gave a better sense of how well they performed and competing with global language learners also motivated people to brag about the results.”
Positive numbers
Ideally your users will also want to share what you create for them, either with their team, manager or on their social networks. To achieve that the best thing to do is focus on positive stories above all else.
Yeah, you could show how many spelling mistakes someone has made in the last year alongside an illustration of a dunce's hat, but they probably don’t want to share that with their boss 😀.
Fun numbers
Awards are a great place to inject some fun into your stats. What fun awards could you cook up for your users? Are there any in-jokes in your industry you can reference in the award names?
Even just the design of your awards can add some fun. If you have any cute logo or mascot for your brand some custom illustrations to go with the campaign can be enough.
Technical considerations
Generating data could take time
Duolingo actually generate their numbers well in advance of the end of the year. They also limit those numbers to people who have achieved some base level of activity on the platform in the last 12 months. Once you look at what stats you could generate it is worth some investigation into how hard that data would be to create. If you need to you might want to limit which accounts you create data for or consider building the data in advance rather than when people view it.
Crate your stats as images
I would recommend creating your stats as images. People can then download and share the images, which wouldn't be possible if you built these as mini websites. This does bring some complication in creating all the images but we have details on that below. Often, if you look at these end of year campaigns you will see just one image (as with Duolingo). That would be a great option but you can also look to create images for each statistic as we and others do.
Programatic image generation
We created a node service which takes base template images then overlays the relevant text on top of those. In this way you can easily create all the custom images for each statistic.
The images are built on the fly from base58 data encoded in the URL. This means we're not having to introduce any security risks by exposing people's data through the image service. Ie, you can't request /endOfYearStats?account_id=1 and get someones data back.
If you want to go the same route check out the node-canvas library from the Automattic folks. That essentially lets you use the Browser Canvas API for drawing (but server side instead of in the browser).
One potential gotcha is missing international charachters when you create your images. Fonts installed on your desktop will have all of these chars in, but when you deploy to some minimal new linux server install they may not be there. Test international charachters when you can and install the required font packages if you need to.
Finally, if you think images may be shared a lot it makes sense to enable a caching layer in front of your image service. If you are using AWS you can enable Cloudfront for this, the images only need be generated once then and you can save load on your compute resources.
Image sizes
If you want people to share these images on their social networks you should technically go and review the recommended image dimensions for all those social networks! However, we can save you the effort and make 2 suggestions.
- 1:1 is a nice format to work with in terms of the space it gives you and behaves well on most social media these days
- 1.91:1 is better if you are going to crate mini sites you want people to share with 'meta og:image' tags to get the images from.
I would suggest sticking with 1:1 initially if you can. We built mini pages to host each individual image which let people share them to social media with a single click. If you do that you should include these tags (and any other specific to your targetted networks)
<meta property="og:image" content... />
<meta name="twitter:image" content... />
If you do this, the best image format to go for across multiple networks will be 1.91:1. That way the whole image will appear automatically when that page is shared.
Conclusion
OK, that's enough I think. Happy to answer any further questions people have :) If the development team (and designers and marketers) can carve out maybe 4 weeks to build something in 2022 it can be a fun project. It is also something you can return to in future years to improve on.
Top comments (0)