Hack week BTS: a little gratitude goes a long way

If you had a week to make anything you wanted, what would you build? For us, the answer was a way for people to easily share gratitude at SnapScan. Not only does it feel great to know that the work you do is appreciated, gratitude is also a gateway to more open and genuine feedback!

For our hack week project last year, we added a gratitude form to the app (don’t go looking for it just yet – it hasn’t been released to production) and added a ‘/thanks’ command to Slack, both of which will post to a #gratitude channel by way of our new bot, Bee Bear (more on the name in a sec). We’ll walk you through the process we followed, the tech we used, what we learned, and steps on how to set up a gratitude-sharing Slack bot of your own.

Read more: Behind the scenes of SnapScan’s hack week

First off, who are we?

Team Bee Bear is made up of Thabang and Bee. Thabang is a Software Developer, focusing on Front-end & Mobile development here at SnapScan. He owns a LOT of plants, and likes to cycle around the city. Bee is the resident Agile Lead, coaching the development team in the art of Agile. She likes every form of fiction, and starting new hobbies. We were both looking for a team on the Friday before Hack Week, so we decided to pair up and dive in head first!

Why gratitude?

We didn’t have a plan for what to work on, so our first step was a brainstorming session. After a tough year, we both wanted to work on something fun, cute, and feel-good. We used Miro (one of our favourite remote collaboration tools) to create a mindmap with some options. We ended up choosing the concept of sharing gratitude with a cute animated character. Our initial concept was to get gratitude from users who love SnapScan, and then we expanded to sharing gratitude between coworkers as well.

Then the really hard part came – choosing a team name! Eventually, we settled on a combination of animals – bee for Bee (you might have guessed), and bear, which is Thabang’s favourite animal. Thus, Team Bee Bear (and the concept for our little character) was born!

The process

We created a kanban board and split out the work – Thabang was in charge of all the coding, and Bee handled the animations. We prioritised main functionality first, adding a basic form to the app which would post a comment into Slack. This guaranteed that we built momentum fast and had something usable that we could then iterate on, such as adding animations from Bee and creating a slack command that let someone know that they received “/thanks” from someone else. We had regular check-ins to share progress and figure out what pieces to tackle next.

The tech

In order to get messages from our users we inserted a form into our cross-platform app built in Cordova + Angular 10. The App sends these messages to a small NestJs API which handles the formatting and relaying to Slack. Offloading this effort onto our API has the benefit of not requiring a new app build whenever we want to change the formatting of our messages or if we decide to swap out Slack for another service.

Slack offers extensive documentation on how to get messages from other apps into your workspace. We were able to use their Block Kit to format and style how the received messages display inside Slack — the documentation is easy to follow and doesn’t require any development knowledge. A great win during a hackathon, allowing us to divide our workload.

Read more: Hack week BTS: a jukebox and some SnapSongs

For quick development and testing, we used Ngrok to expose our local server to the wild of the internet, allowing us to iterate quickly on designs and catch bugs before they slipped under the fridge.

To add some cute factor, without having to painstakingly recreate animations, we used Lottie, which allowed us to create animations in After Effects, export as Lottie animations, then have programmatic control over them in the app. Lottie animations are supported across native and cross-platform tools and make it accessible and economical to add delightful animations in your apps.

What we learnt and experienced

Bee: 

I focused on creating the Bee Bear character because I wanted to learn Illustrator and After Effects animation. Although I hadn’t used these tools before, there were numerous tutorials, as well as some helpful YouTube videos, that got me set up really quickly. The main issue I ran into was how to make our character feel more SnapScanny, which is when I turned to our lovely designers for help. I got some amazing feedback, which drove home the point to always consult the experts! Using our SnapScan colour palette and following cues on things like eye shape really gave it that extra brand touch. The animation was a bit more of a learning curve, but I kept it simple and soon enough, our little Bee Bear was waving thanks and sharing the love. I really enjoyed doing something outside the normal scope of my role and the opportunity to work side-by-side with Thabang. As an Agile Lead, I am usually an outside observer, and it’s always refreshing and interesting to be reminded of how it feels to be in a team and doing the work.

Thabang:

When you work at a company that deals with payments it’s easy for things to feel serious all the time — <insert: hahaha business meme> —  taking the time to build something  that is focused on spreading love and appreciation flipped that around and injected some needed energy at a time when burnout felt to be around the corner. Sometimes you’ve got to keep things light and have fun.

We spent 75% of our time building the aspect of the app which would enable external people to send gratitude, only to realise once we’d shared the bot that it was most valuable to the people in the company. This experience taught me that it’s most valuable to hack on projects that scratch your own itch and if you make something that everyone gets to enjoy, you’ve already won — even if you don’t get the Store Voucher.

How to set up a gratitude Slack Bot

If you’d like to set up something similar at your company, here’s how you can do it:

• A simple and easy option that doesn’t need any technical know-how would be to simply create a space dedicated to thanking each other, like a #gratitude channel on Slack or the equivalent on whatever communication platform you use.
• For the more technical readers, we have made the code base for the Bee Bear Bot publicly available on GitHub. This should give you a good starting point for creating a Slack bot of your own. The readme on the project explains how to get it up and running.

It was very satisfying to choose our own project to work on, build something quickly, and to see it come together from an idea into a working prototype in only a week. We also learned that everyone loves getting feeling appreciated! We hope that this blog post inspires you to try a hack week of your own. If you had a week to make anything you wanted, what would you build?