Marisa Morby logo

Gatsby Swag Store Case Study

Gatsby is a React-based site generator that creates some of the fastest websites you’ve ever seen. Go ahead and blink—I dare you! It’s a framework that not only helps people create super fast websites, but it’s also a great equalizer of the web. Think about it: if you’re in an area that has 3G internet, many sites can take about 15 seconds to load, if they even load at all. Thanks to Gatsby’s performance-first architecture, the same site can be on-screen in less than 3 seconds. So Gatsby can really bring the information to everyone.

Gatsby is also open source and currently has 1000+ contributors. For all the time, energy, and help they’ve given, we wanted to find a way to thank them properly.

But how could we do this? Our contributors live all around the world—on 6 continents!

After a lot of discussion, we settled on giving people free swag! It was a great way to show our appreciation and give away something useful as well.

With that in mind, we needed to find a way to get swag into the hands of contributors quickly and reliably, with no human bottlenecks. The rest of this article is a breakdown of how we made that happen.

Identify our Goal

Just because we knew that we wanted to send people swag didn’t mean that our goal was complete. We still had to narrow it down and decide what type of swag to have.

That meant we had to do a little bit of research. We asked people what type of swag they liked to receive and also what type of swag they wanted to see, even if they hadn’t found anyone who was doing it yet.

Overall, a lot of people said they liked:

We also saw that people were excited about:

So... I ordered custom nail wraps for @FormidableLabs swag. They came in the mail today and I love them so much. pic.twitter.com/h0B8rOqEHs

— Becca Lee (@the_becca_lee) June 21, 2018

Since we had so many things to choose from, we needed something lightweight as a trial run. We decided on shirts because we already had the design for those. We also got socks for people (like me) who always find off the rack shirts impossible to wear and look good. And of course we got some stickers so that we could wallpaper our laptops with Gatsby.

We also wanted the process of buying swag to be a fun and personable experience from beginning to end. People so willingly show their appreciation for Gatsby, and we wanted to be able to show our excitement and appreciation, too.

Tina Fey dancing and being showered with money

We wanted all our contributors to be as happy as Tina Fey dancing in money.

Figuring Out Our Limitations and our Strengths

Now that we’d decided on what we were going to have, we came up against the inevitable, ever burning question, “How the hell can we make this work?”

Rosie Perez looking incredulous and confused

undefined

And that question could only be answered by looking at what we had—and what we didn’t have. We had to identify our limitations and strengths.

Here were the three biggest limitations we saw:

And the three biggest strengths that we could use to combat our limitations:

Deciding How to Turn Limitations into Solutions

So this led us to the idea of creating an automated system that would identify, manage, and ship swag to Gatsby Maintainers.

We settled on an “automation first” solution for a few reasons

Time was limited

We needed to limit manual touchpoints as much as possible in the interest of making sure that people were able to focus on critical Gatsby needs.

First, we had to identify the manual touchpoints

We needed to figure out all of the manual touchpoints in the process to begin with. We found that we’d need to intervene in all of these instances:

How we worked around them

We looked at each of these touchpoints and decided which ones were easy to batch or automate.

We asked ourselves, “How much time would it take to do this individually?” and “Is there a way that I can set this up to be done without me?”

This involved working with development to see what tools were available to solve the problem. Asking the right questions helped us see if we should look into a tool to solve the manual touchpoint to begin with.

We noticed that we could use a few different tools to automate the majority of the process—freeing up time for the rest of the team.

But still needed some human intervention

Since we’re not able to automate everything, there were a few things that will require the deft hands of a human to complete. This included:

But that was about it. The rest of the process didn’t require anybody’s help, and would run on its own!

Scalability was key

As our community grows we want to continue to use the swag store as a way of rewarding people, so any framework we set up would need to grow with the contributors, with Gatsby, and with swag items. It needed to be scalable.

Deciding if something will scale

This is where we get deeper into systems and scalability. There are a set of questions that I always ask myself to decide if something is actually scalable.

How modular is the process?

It should be easy to identify and move pieces of the process around. If adding or removing pieces of the process makes it break down, then it’s not modular, and won’t scale appropriately.

How well documented is the process?

Could someone just coming in to the process find the information they needed to immediately start working on it? If the answer to that is no, then the process isn’t well documented, and won’t scale since it’s prohibitively difficult to train every single newcomer the same every time. That means that documented resources need to be available for people to find and execute.

How dependent on the individual is the process?

This is a bit like the “vacation principle”. If the main person who created or implemented the process were to go on vacation for a week would it be possible to move the project forward? If the answer to that is no, then we need to identify the reason why. The gaps we see there are the ones that need to be fixed before the process is actually scalable.

When we add more people, does the process stay efficient or come to a halt?

As you add and onboard people to the process you’re creating, you need to check in on the health of the process. What’s working and not working? If the process that’s been created gets completed more slowly, or there are constant blockers, then it’s not going to be efficient as it scales.

Some things just don’t scale

While we were able to scale the process for the swag store largely through automation and decentralization, some things just don’t scale.

Any process that requires high effort manual and/or daily interaction in order to keep it running—like reaching out to every customer for a short interview or building something entirely in-house just can’t scale up very well.

But starting from a non-scalable solution is a great way to get started. While you’re able to, talk to every customer. But as the company grows, there have to be ways of setting up processes that take into account the fact that there will be more customers that you can directly interact with, and there will be more people involved in moving the business forward.

More people leads to more complexity, and processes exist to improve communication, efficiency, and transparency for people in the company and the customers who use the product. If we’re creating a process that slows people down, then it’s simply got to go. All processes should be flexible enough to change and grow with the people they’re intended to help.

The process had to be easily repeatable

We made things more repeatable by creating internal documentation, and sharing it with the rest of the team. Since tasks like ordering new swag and reordering previous items would require someone to actually make the call or send the email, we set up templates that anyone could use.

We also documented all of our swag and invoicing in Airtable, so that it was easy to see what had been done and anyone on the team could get a snapshot of the current and past swag orders.

By limiting the amount of tasks a person had to do and documenting those processes well, it meant that anyone could read the process and complete the tasks.

We’re taking this one step further by revamping the project management workflow so that all internal processes are scalable, repeatable, and better automated!

Creating the Process Framework

So we had our limitations, our strengths, and a rough idea of a solution that could help get us to our end goal.

But what did that process actually look like? We had our starting point — someone contributes to Gatsby and their PR gets merged. And the end point — that person receives swag as a thank you.

Basically, our process looked like this:

South Park Underpants Gnomes in front of large poster board with 3 phases listed: Phase 1. Collect Underpants Phase 2. Question mark Phase 3. Profit

The Gatsby Swag Project… off to a strong start!

So we worked with what we had — starting at the end and worked our way backwards.

We had a meeting that was solely focused on laying out each step in the process as clearly as we could.

The conversation looked a little like this:

So the final step is that a person receives swag. What has to happen right before that step?

Well, the swag has to be shipped.

And what has to happen before that?

The swag has to be ordered.

And what happens before that?

The person has to be on a site that allows them to order swag.

It’s a slow process, but worth it to put the work in upfront. Having this conversation helped us think through how everything would actually need to run, and identify gaps in our reasoning.

But How Do You Set It Up?

Since we knew now what we were setting up, we were left to figure out how.

Each how is a step in the process that requires an integration, automation, tool, or touch point of some kind.

Since we were going with an “automation first” framework, we had a lot to consider at each touchpoint:

Eventually, by working backwards from the end, we created a full process and recorded it using Whimsical. You can see our flow chart here!

Picture of the flow chart for the swag store

Flow chart with the step by step swag process

The top section lists each tool that we’re using to manage and automated the swag process.

In this process, just like any site, we have a front-end that people see, and a backend that people don’t.

In this case, the front-end was the process that people went through to order and get their swag.

And the backend was the systems design, tools, and automation triggers that handled all the requests and process.

So Gatsby contributors see this:

__

And this is what’s happening in the background:

Where We Ended Up

Our goals when we set out were to create a way to give back to the community, keep contributors interested, and make everyone who took the time to contribute to feel really welcome.

But we needed to make sure that setting this up was sustainable, scalable, and easy to keep doing so that we’re always able to reward the community.

Setting up a mostly automated process for swag gave us the best of both worlds, so that we could keep working on Gatsby while still showing our contributors how much we appreciated them.

It also meant that we get to see pictures like this:

Thanks @gatsbyjs for the t-shirt! If there are any developers out there that haven’t tried out Gatsby yet here is my dog Birch silently judging you. 😉 Trust me, it’s awesome. pic.twitter.com/THDSmhKdBb

— Ryan Wiemer (@ryanwiemer) July 25, 2018

And this:

@jlengstorf You have seen pictures of the Gatsby socks with dogs, well, meet rayman! 🧦 🎉 pic.twitter.com/kFhAA6SsfV

— Sara Vieira (@NikkitaFTW) July 31, 2018

Dogs and cats in Gatsby swag? Yes please. I’ll have another. Find out how you can #buildwithgatsby on Twitter or on our site!

You can also read about how we built out the store here!


Join the Design & Nature Reimagined Newsletter