---

On September 10 2024, we announced Complete CSS and offered people the opportunity to get a heavy discount for pre-ordering the course. It was a monumental moment for us at Piccalilli because we knew that this truly was the start of something exciting.

It was just the pre-order of my course to most people, but for us, it was the first dip of our toes into something much more than that. This was the start of the process of publishing many courses over years.

To enable this goal and set our principles of producing a marketing page that worked, but didn’t annoy people, we based the whole process of this iteration on the basis that marketing pages should:

1. Be really easy to scan and digest
2. Calmly signpost people towards the main call to action (CTA) with subtle repetition and reassurance
3. Informed users of how the course will bring them tangible benefits

That was the first iteration of the course marketing page system and it looked like this.

We shift on to November 26 2024 — the full launch of Complete CSS. That truly was a monumental moment because it was the ultimate test of whether this premium course arm of the publication is going to work or not. It did better than expected, which is great and why we’re able to publish this open working content in the first place.

We made a lot of mess getting there though. It’s natural in these situations — a period of extremely high pressure — to Get It Done™ and that’s exactly what we did, but we knew there was a lot of work to make sure the marketing page for this course sustained the success we needed, long after the initial momentum of launch and Black Friday died down.

We’re obsessed with iteration here and as we saw it, even on launch day, we were still right at the start because this was just the first course of many more to come. We also wanted to solely lean into what works in terms of conversion optimisation from our work, delivering commercial design work in the agency.

We’re still — even today — in the messy first iteration. The job of this course brand theme development project is to get us into that second, slightly neater state.

What got done before this brand development project?permalink

After the launch of the course last year, we spent the first quarter of this year experimenting with the marketing page, while introducing new features. The key areas of focus and questions to answer were:

• How do we make sure there are as few barriers as possible to converting?
• What promotion channels are working for us and which ones are not?
• Is Purchasing Power Parity (PPP) as frictionless as possible?

How do we make sure there are as few barriers as possible to converting?

What we could have done — and what commercial clients often fall in to the trap of — is deploy heavy tracking tools like heat mapping and even creepier surveillance technology like the Meta Pixel. Technologies like this seem like a good idea but utilising this early on in a product’s marketing effort will almost certainly send you down rabbit holes based on reactivity to incomplete data.

The Meta Pixel and associated technology around it is a great example of an easy to fall into trap, because the whole system will make feel like you have to invest more and more into advertising your product. They do this by leveraging the emotional response to the numbers no going up as much as you like — we’re only human after all and that type of user manipulation works.

If your principles are “make money no matter what”, then sure, these technologies will turn the number dial up for you. We’re not like that here though — we respect our users above everything — so we opt for demonstrating the value much more prominently instead and focusing on how to optimise natural, pre-engaged traffic to the marketing page.

Technology like the Meta Pixel is again, incredibly creepy, but it’s also invasive and resource intensive. It’s why advertising is completely JavaScript and cookie free on the piccalilli website and newsletter. We opt for a simple, server-side, click tracker to report back to advertisers because they need to see a return on investment (ROI). The priority is always the reading experience though so we deliver that advertising as non-invasively as we can, using standard HTML and CSS.

With all of this in mind, I spent some time working on patterns that disrupted, but didn’t distract. A disruption can be achieved with a block of colour or texture and it should be aimed at gently pulling a user’s focus to where you think it should be. Mostly this is to optimise the experience for people that prefer to quickly scan content.

For example, I added an experiment where I gave the closing call to action (CTA) more contrast by making it full bleed and bright yellow.

The original CTA had very little contrast and didn’t even mention the price right at the most important point which is yeh, a mistake, but that point in the processes was the time to make mistakes because we were so early in our overall, iterative process.

The new CTA is a massive difference, visually, right? This change definitely increased sales too as the conversion rate increased on the landing page by a handful of percent, which is also a success!

Another experiment had us looking at a docked CTA, like this:

The aim here was twofold:

1. For visitors that were pre-engaged — for example, someone who had read a recommendation for the course — they had a quick route to purchasing the course
2. For visitors that were browsing, it is a persistent quick route to purchasing the course

We experimented with various messaging strategies and eventually settled on “Join over X others that are taking their CSS skills to the next level”. The message “take your CSS skills to the next level” is one of the brand promises of Complete CSS, just like “You won’t be the same developer after completing this course” is.

By prefixing that message with a number of other people that are experiencing that brand promise is a form of social proof — which is an essential part of optimising for conversion as social proof encourages and reassures people. Although £249 is cheaper than a lot of other courses in our industry, it’s still a lot of money, so reassuring people that they’re going to get value for that is really important.

This more empathetic, human-orientated method of making a marketing page work is incredibly important to us.

What promotion channels are working for us and which ones are not?

Since the launch of Complete CSS, we also experimented with advertising externally, along with introducing promotional elements to articles on our website.

There were mixed results with external advertising. For newsletter advertising, we experimented with a few different publications, after analysing their metrics, either from their website or talking to their advertising reps.

For each newsletter ad we took out, we tracked traffic using UTM parameters for our Fathom and Cloudflare analytics. We tracked conversions using specific coupon codes for each advert. There was a mixed level of success with this approach. Some newsletter spots did really well and others did nothing at all.

It’s understandable in those moments to think “this doesn’t work”, but you’re consistently broadcasting your brand by doing advertising like this, so it’s always worth doing. What you have to calculate — rather than blindly chasing KPIs — is “how much am I willing to spend to broadcast our brand”, which in our case, was quite a lot.

Another example experimented with was podcast advertising on the Shop Talk Show. This was a rather expensive experiment which — in terms of sales — wasn’t overly successful, but the value of having Chris talk about the course for a couple of minutes on our behalf, to a highly engaged audience, was worth every penny.

The most successful method of promotion though — without a doubt — is article based calls to action like this one.

When we monitor spikes in sales, we can almost always track that back to an article I wrote generating a lot of traffic. In fact, so far, it’s been the most consistent and successful way of promotion Complete CSS. But that isn’t a surprise to me because the most successful underpinning of my career has always been writing.

Is Purchasing Power Parity (PPP) as frictionless as possible?

When we launched the course, PPP was done in a manual way. People would land on a specific PPP page that automatically opened a Crisp Chat window. We would then provide coupon codes to users who reached out. The main reason for this is we wanted time to come up with an automated solution that benefitted everyone. Delivering that functionality and the course in the best possible shape at launch was too much of a stretch for us.

The main problem with this manual approach though is it was very limiting and exclusionary. It was limiting in terms of our time, but also, it was an unnecessary barrier to entry for people that rightly, should get PPP discounts — the exclusionary part.

Vicky — our producer — spent hours analysing PPP and used her analytical and data processing skills to come up with a solid, fair dataset. We then implemented a system that detects a visitor’s country — server side — and if their country is supported, it delivers a coupon code in two places. First, in the docked CTA:

And then, in the main CTA:

The increase of PPP sales was significant. Sure, we lost out early here — as did people that qualified for PPP discounts, unfortunately — but we had to get an automated system right. Well, right in terms of helping people. In terms of code, it’s a bit of a mess, which we’ll tackle in a later post.

The experimentation continuespermalink

You never know all of the answers, so it’s really important to continuing experimenting. This is especially important for us because we’re going to be launching JavaScript for Everyone and Mindful Design this year. It’s better to get as much experimentation done as possible now, so Mat and Scott get the best possible support from us.

For example, the CTA at the end of articles works really well, so we’re currently experimenting (at the time of writing) with detecting visitors from there and offering a nice discount to them. It’s only a short experiment, but its to test ways of getting through traditionally quiet periods in selling education material like the spring and summer are.

This is the key you see, it’s all about consistency. You get peaks and troughs, sure, but maintaining a healthy level of revenue, using a healthy amount of energy and cost — both monetary and time — is the ideal situation you want to find yourselves in.

This is especially important to me to make sure we deliver for our course authors too, who are almost always independent/freelance. Nothing beats consistent revenue when you’re working for yourself, trust me.

What we wished we got right from the startpermalink

Although the timeline for this project is sprint-based, there’s still time and space to do more discovery work as we go. For example, I think we’ve fallen short in the following areas:

• We’ve never logged where someone came from at the point of purchase
• We’ve never asked people who bought the course what the reason was for them buying it

The first point is a possible red-herring in itself. For a reasonably high ticket sale, you wouldn’t expect people to make the decision immediately. This means it’s highly likely that when they come to make the purchase, they arrive without UTM strings. We should still implement this idea, but we should treat the data as trend data, rather than absolute data.

The second point we should have absolutely done. There’s not many things as valuable as high quality, qualitative data. While other planning and creative exploration work happens, Vicky and I will start to work on this. If anything, the data can be useful in this project to determine if the stuff that works is still well represented in the new design concepts for course marketing pages that we come up with at the point when they need feedback.

Where do we go from here?permalink

Jason is going to spend the next post talking about getting started on design discovery, so I’ll not write any spoilers here now, but something that’s really important to do at this point of a project is determine what does success look like?

It’s one of the first questions we ask a new client in a kick-off meeting because the answer to that question becomes a key pillar in the process. The answer can of course be “more money” (it so often is), but I’m more pragmatic than that and by proxy of being the founder of Piccalilli, I am the main stakeholder of this project. With that in mind, success looks like this for me:

If at the end of this project, our upcoming courses have a high quality and unique brand, along with a course marketing page that is clear, light and easy to understand, I’ll be happy.

If the course marketing page for our existing live course brings in more consistent revenue, it’ll enable all sorts of positive outcomes, not just for us, nor even our authors, but also for the community as it enables more open working and investment in guest author content.

I’m very confident we achieve this, without harassing and tracking visitors to the nth degree.

We’ve got all the Boring Project Management™ stuff to do now, such as setting up a backlog, timeline and plan in Notion. With all of that in place though, we’re in a good position to get into design discovery, which is next up.

Next post in this project

Getting started on design discovery