Copyworking — The Landing Page
I've built the landing page for Copyworking — the online copywork writing exercise. In this post, I'll talk about why I need it, how I built it, and what I am going to do next.
I wrote about the idea behind Copyworking in my previous post. Give it a read, as it shines a light on my motivation behind all of this.
The goal is simple — I want to see whether people will find value in online copywork. The metric I'll use is the number of people who subscribe via the form on the page, and I will use that to make a go/no go decision on developing the MVP.
I will proceed with the MVP if I manage to get at least 200 subscribers by September 2023.
To achieve that, I need a tool that can do the following:
- Describe what copywork is and what its benefits are, explain how to do it, and answer possible questions people may have
- Show copywork in action
- Capture people's interest
A landing page can do all of that. Here's how it looks as of the time of writing this post:
How I built it
The technology I've picked is nothing fancy, but it does the job. Here's what I've used.
Design and layout
I wanted to have a simple and beautiful design, so I've reached out to my friend, Nic Grobler. He came up with a mockup of a minimalistic page that is divided into two parts (on wider screens), which symbolizes the duality of the author and you.
I decided not to use a website builder, but to code the page myself. This gave me full control over the responsive layout and allowed me to build the "Try it Out" widget within the same codebase.
The page is a statically-generated Next.js React app which is written in Typescript. I've picked MUI System as a layout system and Joy UI as a component library.
Infrastructure and hosting
The app is hosted in AWS. Since I use Next.js in an SSG mode, the published output is essentially a bunch of html, js, and css files as well as fonts and images. All of those are deployed on S3 behind a CloudFront proxy. I use Route53 as a DNS service.
I manage infrastructure with CDKTF and Typescript.
I decided not to invest in an automated CI & CD at this point — so I use a makefile to build and sync the app.
I have opted for Plausible Analytics instead of Google Analytics to collect traffic metrics. The reason is that Plausible is privacy-focused - it doesn't track people across the web. Plausible is also incredibly friendly: it's easy to set up and understand.
Plausible allows you to configure goals to better understand how people interact with your website. Each goal tracks a particular event, and I have three of these:
- Subscribed - happens when a person subscribes using one of the three forms
- Copywork started - happens when a person types at least five words in the "Try it out" widget
- Copywork completed - happens when a person completes typing a copy in the "Try it out" widget
I've picked MailerLite as a tool to collect subscribers. It has a free plan and is simple to use.
How much did it cost
Time was by far the biggest investment. I'd been working on the page in my free time and it took me 5 weeks in total: a week to code the responsive layout and four weeks to come up with a fully functional "Try it Out" widget that allows doing copywork right on the landing page.
From the finance perspective, there were no one-off costs, but it takes some money to run Copyworking:
- Hosting: $0.5/month with AWS Free Tier.
- Analytics: £9/month with Plausible Analytics.
The next step is to promote the landing page. I will do three things:
- Reach out to blog authors who's written about copywork. I'll tell them about Copyworking and ask for their feedback.
- Engage with writing-related subreddits on Reddit to get a community response.
- Dedicate a small budget to Google Ads to see how the landing page converts.
I will share the results in this blog — so bear with me, and in the meantime, give Copyworking a go!