Problem Solved: How Tank Design Rebuilt Its Website with Jamstack Technologies

Dan Pearce is the director of technology at Tank Design, a leading independent brand and experience design firm based in Boston and San Francisco. 

What You Made

We redesigned and rebuilt the Tank Design website with Jamstack technologies. Using these technologies allowed us to create a faster and more secure website for ourselves and learn valuable lessons for our clients.

The Problem

We wanted to create a beautiful, cutting-edge website, but we also wanted to learn more about Jamstack. This new technology can make a static site from multiple dynamic sources. Jamstack was new to us, so if we were going to build with this technology for a client, we certainly wanted to get experience on our dime first.

There are a couple of significant advantages to the new technology. Jamstack sites are optimised for performance, meaning they are lightweight and super-fast. They are also more secure because there is no publicly available site administration area to hack. Tank's website was previously built exclusively with WordPress. The very thing that makes WordPress and other content management so powerful is the ability for non-developers to edit content. However, that same content management feature is the target of many hackers. We always had to be on guard for people trying to break into the site through the site administration area. 

By building a static site that publishes content from a hidden WordPress site, Jamstack limits the attack area while preserving our editor's ability to make content changes. I believe this technology can solve problems for many of our clients: 

● Marketers → Losing leads due to a slow site is a past thing with Jamstack. A speedy website is Jamstack's significant benefit that you and, more importantly, your customers will appreciate.

● Designers → Because Jamstack sites effectively separate the front-end (website) from the back-end (content sources), designers are not constrained by limitations imposed by some content management systems. Using Jamstack means your design vision can become a reality.

● Content Creators → Traditionally, content management systems were not only the content source but also the presenter of that content on the web. This was fine until duplicate content was recreated for a mobile app or other content mediums. With the right content system that functions as a Digital Experience Platform (DXP), the same content can be used for a Jamstack site, a mobile application, or other content destinations. No more triple-entry for content editors.

Ideation

We first needed to understand this new technology. Our developers did some research, and then we just dove in head-first to get something working. First, we set up a basic WordPress site. This first site would be the content management system that our editors would use, but it was (and would remain) hidden from the world. Then, we created the Jamstack site with a technology called Gatsby. Meanwhile, our UX, design, and content teams created wireframes and content outlines. The development team could run our research parallel to the design process. Finally, we connected these two parts: the back and front end, so that we could publish the WordPress content to our Gatsby site. There were many trials and errors, but today's Tank site is the finished product.

Challenges

One of the biggest challenges we hit once our content folks got involved was that they couldn't preview their changes. Like other content management systems, WordPress provides instant gratification to content editors: You make the change, hit "publish," and it's live.

Jamstack sites are built and published statically, which means we needed to create a "build" before editors could see their changes. I like to think of a printer metaphor here. Once you hit "print," the only way to make a change is to make the change in your text editor and print again.

The thing that makes Jamstack great is that it's a static site with benefits of security, ease of hosting, and performance, but the fact that it's static is also a bit of a downer to folks who are used to instant editing and publishing. To get partially around this limitation, we found a WordPress plugin (a community-supported bit of code for WordPress) that would allow our content editors to run a build on our test server to see their changes after they made them. We added some connections to Slack so they could know when the build on staging had started and was completed. 

Prototype & Design

Of course, as always, with new technology, Gatsby released a new plugin that made getting content from WordPress cleaner for us, but it also required some rework in the middle of the project. We ended up hosting our site on Netlify—a Jamstack-specific provider.

We chose them because they had one feature that we couldn't find anywhere else: a built-in form capability. This capability allows us to capture leads directly on the site, something that a static site can't provide on its own. Navigating all of this new technology at once was a challenge, and I would say that by the time we finished, we learned better ways to do many things, which is what makes this such a great learning experience. We're excited to talk to our clients about the benefits because they are game-changing.

Live

Any organisation for whom security and site performance are critical would benefit from Jamstack. Biotech companies, in particular, should take a close look at this technology as companies in that industry tend to have a significant number of legal requirements that play to Jamstack's strengths. In addition to security and performance, those companies often need a legal review of the site as it is, as it was, or will be.

Since Jamstack sites are built as copies of the site, this is a trivial and often built-in feature. As I said initially, I think people in many roles and industries can benefit from this technology because the content is everything right now. There is not one industry that is not clamoring for content and trying to keep its content fresh. Jamstack is one way to build fast and secure sites quickly and without traditional content management systems' design and time-to-market constraints.