Celebrating 1 Year at Butternut Box. An Engineer’s perspective.
A look back at some of the best memories and personal development I have ever had in the workplace.
Well, what a year it’s been. I know it’s cliché but time really does fly when you’re having fun and this past year: has been one of the most fun I’ve ever had in my working life.
Since joining the Butternut Box Engineering team on the 13th August 2018, I have made over 230 commits to the Butternut Box repositories, added over 28,000 lines and deleted over 18,000 lines too.
To say this has been a busy year is an understatement.
So, let’s take a deeper look into what Butternut Box and I have been up to this past year
Making friends. Both furry and human.
One of the best things about working at Butternut Box is the people that I’m surrounded with every single day. It has been such a privilege to work alongside some incredibly talented, smart, funny, caring, dog-loving, down-to-earth individuals. In this past year, I have gotten to know them all, lunch with them all, laugh with them all and work with them all.
And what a (p)awesome bunch they all are.
Some of my favourite moments at Butternut have been taking part in the plethora of fun weekly, monthly and quarterly activities. Some of these activities include:
Kicking off my first company Social with an escape room, cooking lessons, learning the Thriller dance in a church crypt, celebrating Christmas in style on a private boat in the River Thames, dozens of weekly Knowledge Shares, Wednesday games, charity events, daily foosball matches, Irish dancing, dart throwing, pizza, Lunch and Learns and so, so much more.
Becoming a Butternut Engineer
You might think based on the previous paragraph, that none of us does any work when we’re in the office (Well, that’s what my parents seem to think anyway…)
But fluffy office dogs and pizza eating aside, this year has been huge for both my technical development and for Butternut as a business.
When I look back to 2018 and how butternutbox.com looked, I forget just how much the site has changed since. All of the different features we’ve added, ideas we’ve gone back on, experiments we’ve run, and how it has evolved to support more and more dogs (and their humans) each day.
In the past year, I’ve been a part of many different and exciting projects. Worked with different teams of people, written in languages I’ve never written before and built things I’d never dreamed of building before I arrived at Butternut.
Here’s a breakdown of just a few of them:
Dog Profiles in customer accounts
One of the first products I worked on inside my first 3 months was the introduction of “Dog Profiles” to customers’ accounts. Inside their dog profile, customers can upload a picture of their fabulous pooch, write a description about them, select their quirks, favourite activities, favourite games and see specific details about their dog which relates to their Butternut subscription.
We built this small app using Elm and it was a great project to work on as it allowed me to use a language I hadn’t encountered before, to work closely with engineers I had never worked with before and to build a delightful product with a heart-warming user experience.
Editors Note: As part of our first Engineering Hack Day, myself and two other engineers built a slideshow that transitions through customers dog profiles on a large television in the office (It even made Dave, one of our co-founders, shed a tear of pride) and it is a huge motivation boost for everyone in the office.
Building a Progressive Web App (PWA) for our Direct Sales team
Following on from working with Elm in the Dog Profile, came yet another ambitious and exciting project for us to get stuck into.
Our Direct Sales team required a product that they could roll out to their ever-growing team of Brand Ambassadors to use as a tool to sell Butternut Box at the plethora of events they attended each weekend. Previously, they had been using the website displayed on their iPads to show customers what Butternut was about and to sign them up. As this was not the optimal nor most effective way of demonstrating what Butternut is all about — the work was kicked off to find a solution to their problem.
After many conversations of what such experience might be — we landed as a team on the idea of building an App for Brand Ambassadors to use and for customers to interact with. However… this App would be different, as it would be a Progressive Web App (PWA for short).
Not only would building a PWA give our users an “App” like feel but it would also use the very foundations and services that power butternutbox.com today. It also meant that we didn’t have to learn any new languages, install any new tools and we could simply use the same JavaScript, Ruby and HTML we had become pretty good at writing.
After a couple of months of wireframing, testing and building — we launched the Direct Sales PWA on Thursday 31st January 2019 and one of our co-founders Kev was the first user to sign up through the App.
That day is probably one of the high points for me from the past year. Nothing compared to the sheer feeling of both relief and tension as that first user went successfully through the app and signed up for the very first time. At that moment, was the pure feeling of accomplishment and success. And as the confetti cannon rained down on us (literally) — I couldn’t help but feel extremely proud of everything we had achieved as a team.
New Homepage
At the start of 2019, we wanted to update butternutbox.com’s somewhat ageing Homepage and replace it with something more exciting, more on-brand and more aligned with where we as a company are heading.
The ‘Hot-dogs’ team (don’t ask) assigned to the Homepage project was comprised of myself and 4 other engineers/product people and together it was our job to build a brand new page which ensured that both existing and new customers have a fast, exciting and performant experience.
As the previous Homepage was created right at the very start of the company’s inception, built quickly and iterated on repeatedly — it was safe to say that the code that was left there was a bit of a mess. At Butternut (on the Engineering team at least) we (more like I) like to say “less spaghetti — more lasagna”. So, with that odd phrase at the forefront of our/my mind, we got to work…
After user-testing designs, building prototypes to be tested, user testing again, finally — the main stage of the development process was underway and it was a huge cross-team undertaking to deliver the project on time and in full.
Not only did the new Homepage crush our previous Google Page Insight scores but importantly, the new page looks so much better than it did before. As a user, you are instantly presented with a wide use of colour, beautiful imagery and first and foremost, the Box itself and what arrives inside. Throughout the page, there are also some nice interaction elements like accordions, sliders tabs that you can interact with and we were able to display so much more information than we were before
By using a combination of LazyLoading techniques, WebP images using the <picture /> element and some behind-the-scenes tweaks we were able to improve dramatically on our page performance too (a critical area in a majority mobile world).
Pause/Save flows
Just a couple of weeks ago as I’m writing this post, we wrapped up the new and improved version of our in account Pause/Save flows (PSF). In short, it’s a small app that provides answers to customers with questions about their subscription before they cancel — hopefully saving the customer from cancelling in the process.
As part of the now Existing Customer Team (ECT) we set out to improve upon the previous version of the PSF which was built just before I joined in August 2018. The goal was to make them more efficient, refine the confusion and options our customers struggle with and overall provide a richer and more cohesive experience for the user.
Moving back into familiar React/Redux/Ruby land this time, we kicked off the project and got to work.
After a few weeks and a couple of back to back sprints — we deployed the last improvement to the Pause Save Flow and rolled out the new experience to our customers and their accounts.
This was another career highlight for me as it allowed me to apply all that I had learned over the last year directly into a fully user-facing product that can have a real difference to our customers and us as a business. We also built some nice UX elements throughout and here are some of my favourites:
2019 and beyond
This post has obviously been a very high-level overview of my entire year at Butternut Box and as I started off saying, it’s been quite a year at that. Full of changes, product updates, product launches, lunches and far more. I am so proud of all of the projects I’ve had the privilege to work on and I’m also so proud of the team that I’ve got to work with too.
While one year closes, another one opens and I certainly can’t wait to see what the next year at Butternut Box has in store for me, our customers and most importantly — their dogs.
