Building Ops Hacks
Sep 27, 2021

Building Ops Hacks: The Landing Page

As I promised, I'm going to share updates on building Ops hacks as I go. For this first part, I'll talk about how I set up the landing page in a matter of a couple of days.

Webflow

This site was built using Webflow, a no-code website builder. There are other no-code website builders that are a lot more beginner-friendly (like carrd.co, which I used to quickly set up my personal site), but there are 3 main reasons why I chose to go with Webflow for the Ops Hacks project:

  1. Webflow has a much higher ceiling in terms of design and customizations. Yes, in order to use it well, you have to climb a steep learning curve of understanding the fundamentals around modern website design like CSS. Once you've done that, though, it feels like the things you could do with Webflow are virtually limitless, especially when you take into account the ecosystem that's being built around it. This extra room to grow into that comes with Webflow was important for this project, as I'm not quite sure how it will grow and what capabilities we may need down the line. For example, I may want to add a member login and limit access to content to only Ops Hacks members - I can do that fairly easily on Webflow using Memberstack or Outseta, which are membership-specific services built for Webflow.
  2. Speaking of ecosystems, Webflow has a robust marketplace of pre-made website templates. I am not a designer, but still wanted Ops Hacks to look somewhat put together, so it was an easy decision for me to purchase a template - which resulted in a site that looks way better than what I could've designed myself. One advice if you're purchasing a template - try to find one that's modular, with a lot of "building blocks" (e.g. lots of different designs for blog post pages, signup forms, pricing comparison tables, etc.) that you can mold to your own needs. I found some templates that looked amazing, but were fairly limited in the choice of their design. Again, going back to the fact that I don't know what this site will look like in a few months, I wanted to get a template that would help me experiment with different designs and scale nicely.
  3. Lastly, Webflow has an amazing Content Management System (CMS). As you know, I started Ops Hacks as a writing project and plan on continuing to write and share what I know going forward. So it was important to me that the website builder have a robust CSM system that's scalable. Webflow makes it really easy to design around dynamic content in a scalable way, and I felt comfortable that I'd be able to continue to write on Webflow.

If this reads like a cheap sales copy for Webflow, I apologize. I'm not getting paid by Webflow to write this - I just think it's an awesome product!

So, after deciding to build Ops Hacks on Webflow, below are the steps I took and how much time I spent on each:

  1. Learn Webflow, again (1 day). I had built another simple website on Webflow for a previous company, but this time, I wanted to take the time to learn the fundamentals. Webflow's own 101 crash course is a great resource for this. The course's run-time is only 2 hours, but it took me a full day to get through it, as I wanted to pause and research some basic web design concepts like CSS or flexbox on my own to better understand them. W3schools is a great place to learn the basics and the resource I most often turned to for web design.
  2. Select a template and tweak it (4 hours). Based on my previous Webflow experience, I sort-of knew what I was looking for when it came to templates. It didn't take me too long to find Ollie, which looked great and had a lot of different components and provided great flexibility. After purchasing the template, I spent a couple hours tweaking the overall styling (e.g. primary colours, fonts, etc.) to fit the vision of how I wanted Ops Hacks to look. It was a lot of trial and error but I was able to get it to a point where it looked good enough (to me).
  3. Build the one-page landing page (4 hours). I wanted to keep things simple for the landing page - a one-sentence value prop + specific benefits + email capture form. So the design aspect didn't take too long - I simply copied a few components from the template that came pre-loaded with the stock photos. Writing out the copy was a bit more difficult. If you've been a reader of Ops Hacks, you may have noticed that I'm not very succinct in my writing. So copywriting is not a strong suit of mine. It's something I'm trying to work on - if you have any feedback / suggestions on how I could improve, please let me know! Anyway, so it took me a little while to write out the content on the landing page.
  4. Connect the Webflow site to my custom domain - opshacks.com (15 mins). I had already bought the domain when I started writing the newsletter, so it was a simple matter of just changing the DNS records of the domain to point to Webflow. Webflow has a helpful walkthrough on this, which I followed along. It took about 10 minutes to follow set up and then 5 minutes for the change to be effected.

So it took me literally 2 days to get this site up and running - 1 day if you don't count the day of learning Webflow. Pretty amazing given that I don't have a technical background.

Refining the Form Submission Process

Webflow has its own form submission functionality that's decent, but not great. When a visitor leaves their name and email address, Webflow sends me an email:

It quickly became apparent to me that there were two issues with this. One was that Webflow wasn't validating the email address of the visitor (by sending a confirmation email to the address the visitor entered), and I got an email address with a typo (Abraham, if you're reading this, please sign up again).

The second was that I had to manually write an email to each person with a welcome email that outlined what the next steps were.

So, I decided to automate this process.

MailerLite

MailerLite is one of countless email marketing services out there that helps you manage a subscriber base and streamline your email marketing. I looked at a couple alternatives, but decided to go with MailerLite because it was free up to a thousand subscribers and its Free tier came with basically all the features I was looking for (embeddable signup form with double opt-in, native automations, and integration with Integromat in case I need to build more complex automation workflows outside of what they offer).

Using MailerLite's form editor, I created a signup form that I could embed into the landing page, replacing Webflow's signup form. I toggled on the double opt-in feature with MailerLite - it sends out a "confirm your email" email for verification of email address. I briefly thought about the double opt-in feature hurting conversion - it's another step for a subscriber to take and there will be some drop-off. But ultimately I decided to go with it, because I'm trying to build a community of engaged members + double opt-in is a pretty standard step that I figured the drop-off would be minimal. We'll see how this pans out.

MailerLite's embed signup form editor

Once the signup form was implemented, it was time to add an automation that would automatically send a welcome email. This was fairly intuitive to implement on MailerLite.

The automation has a familiar if-this-then-that drag-and-drop editor

And that was it! After spending another day or so learning MailerLite and designing/building the form and the welcome email, I have a good email capture + automated welcome email process.

Here's the before and after of the welcome email for comparison:

Before: Sent manually from Gmail

In its defence, this version of the email had a nice, personal touch to it

After: Using MailerLite

After using MailerLite to design the email template, the welcome email looks a bit more professional

All in all, this process took me about 3 days (2 days for Webflow, 1 day for MailerLite) and cost $100 (for Webflow template and hosting plan).

It's pretty amazing how cheap it has gotten to get started on your ideas compared to before. In today's world with so many amazing and affordable products like Webflow and MailerLite (which is completely free actually), the barrier to getting your idea up and running isn't so much the money, but rather your knowledge and time. Again, all the more reason why I believe a community like Ops Hacks, where operators can share their knowledge with one another, will be immensely valuable.

Continue reading

Sign up for early access

Be the first to know when we launch.