Even though we built our website (complete with 5 separate CMSs) on Webflow when we started our growth meeting notes company, Hugo, we didn’t realize what powered by Webflow truly enabled ... until a few weeks ago.

Enter a pandemic

Early March 2020. Hour by hour, the world was changing in front of us. Events were being canceled, meetings were switching from in-person to video, and the streets of San Francisco were getting quieter each hour as we looked outside.

And then the emails, tickets, and live chats started flooding in: “How do I best use Hugo with my remote team?” “What’s the best way to keep track of tasks now that we’re at home?” “We’re having more internal meetings. How do we best run them?” For a tech company headquartered in San Francisco, we didn’t quite appreciate the learning curve that most businesses around the world were facing as they were forced to transition — literally overnight — to being a remote company.

I remember the Slack message I sent to the Hugo leadership team: “We need to talk. The world working from home is a BIG deal, and we have to do something.” As a business that has been operating with a partially distributed team, and with a product that powers thousands of remote teams, the work-from-home playbook and the best tools for the job were second nature to us. We quickly realized that remote work was not second nature for most businesses.

“Let’s write another book. 10X Culture was a great success!” “We could build out a bunch of webinars?” “What about an online event with partners?” The problem was we had hours, not weeks, in order for us to truly create value for our customers and broader community who didn’t know the difference between Slack and Skype but needed their now-remote team to be humming.

What if we could spin up a website with a directory of all the best tools used by successful remote teams? Better still, we could even show off which products had remote work deals to help new customers. Then, with the volumes of helpful content about making the switch to remote work, how to use various pieces of software, and how to look after yourself and your remote team, we could truly have a valuable resource for remote teams.

Literally 2 hours later, we launched The Remote Team Toolkit.

Webflow for the win

With a plan to build a beautiful website, complete with multiple CMS collections, and the ability to scale to huge numbers of users that needed to be out the door yesterday, we turned to Webflow.

While we’re experienced Webflow users, we certainly didn’t have the bandwidth to build a new brand, divert design and engineering resources away from our product, and pull someone from the marketing team to manage directories of products and content. We needed a quick win that looked like we had spent months on it.

Here’s how we did it.

00:01

Templates are your friend. Webflow now offers over 100 site templates that you can copy and modify to suit your project so you don’t have to start from scratch. Many of the templates come with the level of polish that typically only gets added further down the track — for example, page load animations, beautiful hover states, and out-of-the-box responsive design at every breakpoint.

We went with the Journey template, which had the clean, contemporary, easy to read look we were after for The Remote Team Toolkit.

00:09

With a new Webflow site created we were ready to make the template our own. The template we chose had more pages than we needed, and the CMS had more fields than we needed, so we quickly deleted pages, removed superfluous fields, and played around with the various sections. We had to design 2 sections from scratch, but all the other sections almost exactly matched the template, minus a few color and font changes to make it feel like ours.

Tip: Even when you’re designing directly in Webflow, it helps to have a quick wireframe (even a sketch) of the layout. I took a piece of paper and scribbled down the parts of the page and how we wanted to structure things to make sure the page had everything it needed before we started with content.

Every 10 minutes, we published to the Webflow staging site and sent it around to the team for comments.

In an hour, we were basically done.

00:30

While we were working on the page design, we needed to get the branding sorted. One of the team members recorded a quick Loom video describing what we thought a logo for The Remote Team Toolkit could look like. We posted it on a few design competition sites, to return to later.

01:09

With the page now looking great, it was time to get the content ready. We had a quick team sync and added a few content editors to the site from our team, and then everyone was on their way to adding the best collaboration and communication tools and great resources they had read about remote work to the 2 CMSs powering the site.

Pro tip: Webflow supports importing collection items from CSV. When you’re bulk adding content like we were at creation, it can be quicker to put all the data in a spreadsheet and then import the spreadsheet full of content into Webflow in just a few clicks.

01:51

Time’s almost up! While a teammate was doing a quick quality assurance pass of the site (making sure it’s all readable and looking great at every screen width and checking for any dead links, missing images, or typos), I connected a domain we bought earlier and connected Google Analytics so we could keep an eye on how the site performed.

01:58

Ooh, 30 logo designs to choose from already. We went with something that we could all relate to while working from home and uploaded it to the site.

Ta-da! It was time to publish to the remoteteams.org domain and share the news with all of our partners and customers.

02:20

We couldn’t help ourselves. The new native Lottie integration to support animations right in Webflow was too tempting, so we asked a friend to add some animation magic to our logo, which became our new hero image.

Our new approach to rapid iteration

We previously saw Webflow as a way we could design and build our marketing website faster, with everyone being a part of the process. We didn’t realize the potential for Webflow to widen the scope and rate at which we can run significant experiments. A project like this would have previously been a big strategic decision with a huge resource requirement for the business. Now, it was a quick experiment implemented while eating lunch — a pretty small price to pay for the help we’ve provided for so many remote teams.

Making no code a strategic part of how we operate has democratized who in the business can have a meaningful impact and can contribute to our web presence. Designing, building, and producing content for something like The Remote Team Toolkit no longer requires a design, development, and content team, which is an exciting prospect for fast-moving teams like us.

You can check out what we’ve done with Webflow in more detail and see how we’re helping remote teams at The Remote Team Toolkit and at Hugo.