Voices of Gatsby - Looking for The Lighthouse

Gatsby believes in cultivating inclusion and elevating the many members of our diverse community. Our new Voices of Gatsby series, publishing every other Friday, showcases and celebrates our users for who they are as they share stories from the tech life. True tales from the front lines, personal accounts of each of us came to be where we are today. Got a story to share? Visit the Voices of Gatsby info page to learn more and connect with us! Accepted submissions pay a $500 author’s fee, because we recognize the value of writing whether it’s words or code 💜.

Hi I’m Paul 👋 and I’m what some might describe as “old in tech” since I’ve been working in and around the internet for a fair amount of time. Since 2016 I’ve been building React applications and component libraries for big corporations, but I haven’t always worked in tech.

I started out in digital advertising. For the best part of a decade I designed and developed websites, online campaigns and digital out-of-home experiences for some of the UK’s top advertising agencies and brands. I even picked up a few awards along the way including (and this is the truth!) a BAFTA for “digital creativity” for my companies role in Channel 4’s Humans (Persona Synthetics campaign) 🕺

Beginnings

My first job after graduating University (circa 2005) was with a small web agency called ward404, now defunct. The agency’s primary work was to create fun and engaging online experiences to help promote acts and artists for top record labels such as EMI, Virgin and Warner Music. My role as a Flash Designer / Developer required me to think on my feet. The “brief” (advertising lingo for the agreement between agency and client on the objectives for the advertising campaign at hand) was the single or album artwork, commonly known as a “packshot.” Most of the time the packshot was a flattened .jpeg image file; sometimes we got lucky and were supplied a layered .psd (Photoshop) file. Using that, we’d work alone to conjure up ideas, designs, and animations to create interactive experiences that would entice users into sampling the audio and pushing a point of sale, usually an iTunes link.

My second job was with a much more established advertising agency called M&C Saatchi where the budgets and scope for creativity were much much larger. The briefs were more structured and it’s here where I honed and sharpened my concept, design and development skills. During this time I won a D&AD for my involvement with RNID’s 1-7 Campaign which at the time (circa 2010) was unheard of because developers didn’t win awards -🕺

Following a number of promotions I decided the time was right to flex my creative muscles with other UK advertising agencies. I became a freelance consultant and worked at BBH, RKCR Y&R and TBWA (Apple’s ad agency) to name just a few. Some years later (when I was supposed to be on holiday) I accidentally started my own digital advertising agency Super natural, from my kitchen. Eventually that grew to a team of ten — by then we had offices, we weren’t all in my kitchen! Further awards ensued but after five years I hung up my business owner hat and returned to freelance consulting — only this time in tech.

Lessons Learnt

Lessons I learned during my adventures in advertising, though, have helped me a great deal as a frontend developer. It’s entirely possible to use next level tech whilst still being creative. But it does require a process… and i don’t mean Agile.

Whether I’m building complex React applications or fun side projects my process still broadly follows the same working processes I established back in my advertising days. It’s particularly useful for personal projects where you start with only an idea and there’s no pre-existing path forward. The workflow i’m about to describe is effective because it encourages a bit of upfront thinking and planning before diving into the part we as developers are always keen to start with… the code itself. But if you do the up front due diligence, I find the coding part flows so much better.

There is one core piece to this approach: Vision. Remarkably, only recently did I discover that not everyone has this. The best example I can use to help explain how I work is what I call The Lighthouse.

I’m in the ocean and I can see the Lighthouse. I know what a Lighthouse is and I know where it is. The waves may be tossing me about, I might not be able to get to it just yet, but I know it’s there and I know that if I continue to swim in the right direction I’ll reach it.

That’s the key: Before I really start any project I need to see the Lighthouse.

To demonstrate this in a more tangible way i’m going the explain the steps i took to create BumHub — my (first place) entry for Gatsby’s 2020 Silly Site Challenge — 🕺

The Proposition

I’ve witnessed so many projects go downhill because the first thing everyone wanted to do was write code. To quote Abraham Maslow:

“I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.”

If you’re a developer the first thing you’ll naturally want to do is write code. But I urge you to put down the hammer and have a bit of a think first. Just a small one, because there’s really only one question: What exactly is it I’m trying to achieve?

In the case of BumHub my “end goal” if you like was as follows:

As a self-employed Jamstack developer based in the UK I wanted to raise my public profile (Twitter) and position myself as a Gatsby / Jamstack specialist both here in the UK and with a bit of luck across the pond too.

To achieve this I planned to develop BumHub in public, Tweet and blog regularly about my progress and demonstrate some of the newly released / cutting edge Gatsby tech. As a bonus, The Silly Site Challenge gave me an opportunity to show my personality — the fun part that I kinda lost when making the move from advertising into tech. 😥

In advertising terms this is known as The Proposition. Typically a brand / client will outline the “end goal” before the advertising agency begins the creative process.

Now that I’ve identified what it is I’m trying to do I can begin to develop creative ideas. This is ultimately what led me to what you see on BumHub.

I can see the Lighthouse

But before I commence swimming there’re a few more things I need to address. Again I lean on my advertising days and begin to dissect the proposition some more. Here’s some of my actual notes from when I was working it all out.

1. Define the creative idea: Silly Site is all about fun and what’s sillier than a Bum? A bum speaks to all audiences because everyone has one but it needs to be fun, the look and feel should also be silly… 🤔 I’ll need a cartoon illustrator to help with the Art Direction.
2. Technical application: Gatsby recently announced the new and improved Routes API. What’s my angle going to be? I don’t want to regurgitate the documentation, I need to demonstrate its use in a way that no one else has yet. They say in the docs you don’t need to touch gatsby-node.js … so I will touch gatsby-node.js and I’ll need a data source of some kind to create content to put on the routes. I don’t have time to write loads of content, let’s make it programmatically generated!
3. Outline the approach: To develop in public I’ll need to show progress… how might I do this without making progress (I have a day job)… can the code show auto-progress?… It’s December, Advent Calendars progress each day, code can do that too. I’ll update a blog post less frequently but with more significant information. Do some teasing on Twitter, show visuals of the bum illustrations?

I won’t go into any more detail about BumHub, but if you’re really interested you can read the full write up with more information about my production process on the Gatsby Blog. I would however like to point out that by this point, almost two weeks into the project, I still hadn’t written a single line of code.

Perhaps consider it as a pre-process step, the bit you might miss when starting anything new. My personal approach has been modified and tailored to suit my needs and is the product of many years of doing what I do. Yours will most likely be different, particularly in the specific execution details. But getting started should look the same for both of us: first, identify your Lighthouse.

Conclusion

I know from painful experience that this kind of approach is seldom followed in tech. On any given contract I’m governed by whatever’s in the current Jira ticket. Worse still, though, i’ve worked on projects that literally have no end goal. Seriously: Even the bigwigs at the top of the chain don’t really understand where the project is heading or how to get there… And it’s such a shame. Unfortunately, when I am on a job, I have to work the way the job works.

But I don’t want to manage my personal projects or personal growth in the same scattershot way! I like process, I like structure and I always try to evaluate what I’m doing before I try to do it. And, no matter how off course I’m pushed, so long as I keep the Lighthouse in sight I’m still able to swim in the right direction.

Perhaps this has been instilled in me by my family who will regularly cite the “measure twice – cut once” mantra. I have certainly reaped the advantages of taking this approach. I did for many years in advertising and will continue to do so wherever I can in modern day tech. Maybe you can give it a try, too?

I hope you’ve found this helpful and maybe in your next project you’ll try to see your Lighthouse.

Lemme know how you get on.