I mean, Figma has it's "multiplayer" thing, but I don't know anyone who actually uses it to co-create a design in tandem — that would be chaos. A single designer responsible for the execution of a website design is curious when you think about the sheer number and diversity of people from all walks of life who will use a design in the real world, once it's built. The design decisions that we as individual designers make will affect people with ways of seeing and thinking that are vastly different to our own. Even within our team the diversity of thinking is pretty broad. Which is why getting a design review has huge value.

In Andy's last post, he used the word interrogated to describe our internal design review. We go in pretty hard in these reviews, and that's ok. In fact, it's good, because it's all for the greater good, meaning that inviting a broader perspective helps us make resilient websites that work for everyone.

We’d identified a few areas as tricky or problematic in the design. Here's how we tackled them.

The easy stuff

Some of this stuff was easily handled. Folded corner graphics could be dropped, and offset outline in buttons whilst a lovely design detail could be removed to reduce the impact of theme styles on the wider design system. A little compromise, but no big thing.

The not so easy stuff, such as switching the display font for JavaScript for Everyone

We made the call — the readability of the display font for JavaScript for Everyone was too far off the mark to be viable.

Ouch, now we're into painful territory. Yes, my heart sank. Repressed memories of clients dropping bombs like this at the eleventh hour came flooding back.

But this time it wasn't a client whim, but my own design decision that had come back to bite me.

These situations can seem huge at the time. I mean I wrote a whole post about how the typeface selection was the cornerstone of the whole design! Yes, I was nervous that the whole thing would topple over. Not to mention the fact we're working in the open here. But that's the point of this whole thing — to share the whole process, even the messy "in-between" moments that nobody ever talks about.

But when the dust settles, there's always a way forward. Here's how I approached this one…

Retrofitting a retro-futuristic font

Our foundation — the messaging that's built around the idea of taking your skillset way beyond remains untouched. We want to stay in the visual territory we're in, inspired by sci-fi film and retro futuristic computer game design cues, but we want to dial up the readability on the display font, whilst retaining the integrity of the design.

When I say integrity of the design here, I don't refer to visual standards or some kind of aesthetic ideal. I'm referring to retaining the integrity of what we're trying to communicate through each element of the design. Careful consideration is also needed to ensure the new font either works out of the box with the other design elements or that the other elements can be tweaked to work with the new font. Importantly, it needs to do this whilst still communicating the same messaging effectively.

As I explained in my last post, each design decision builds off the last, so let's just say I was a little nervous that the design would lose some of its impact. It would be much easier if we were swapping out a generic sans-serif here, that's for sure.

Here's a reminder of the font we dropped. Oof! I'll miss this one.

Cue more digging for fonts. Deep cutouts or heavily unusual letter shapes were off the table, so I put my focus on looking for typefaces with bold angular shapes, and future retro aesthetics. Here's the shortlist I made.

Eurostile was an option that would give us an easy route into sci-fi territory and the angles in those X and Y characters work great with our iconography. It's pretty much the definitive font if you want to give an instant impression of "this is in the future". It's also from the 60s so it's got retro covered too.

Going all the way back to our brief, Mat wanted us to avoid playing the techy/futuristic look straight off the bat, so this one remained on the cutting room floor.

Raptor V2 had the angled shapes I was looking for and some much more subtle cutouts which would tie nicely into the iconography and graphics. I was leaning towards this one, but was it retro enough?

Right Grotesk had a nice monospaced influence and shared the sharply angled corners with our lede font Azeret Mono, making it an easy on to make work with the rest of the typography but personality wise, it was a bit on the quirky side. At this point I was feeling a bit like Goldilocks after the first two bowls of porridge.

Then along came Cartridge, a font quite literally designed to give that feel of an 80s Atari game cartridge or a VHS box. Instant retro vibes.

I was feeling it. In terms of tone it was a different direction, but one that I thought we could make work with a few tweaks. Firstly, shape wise, this threw a few spanners in the works. What we were gaining in vibe, we were losing in connection between the shapes in the font and the shapes in the graphics. I'd need to find another way to tie the graphics into the design assets.

The other spanner was that this font had very different letter shapes to our lede font, which lessened the harmony in our type combinations. Here's a reminder of those shared curved corners I talked about in my last post.

Here's was where serendipity came to the rescue (as it so often does if you're paying attention). Our lede font Azeret Mono has a huge set of alternate characters — and would you know it, I was able to swap out most of Azeret’s letters with curved corners for alternates that echo the tapered notches between the stem and bowl in Cartridge. Much better!

Now the headings and ledes were working really nicely together. The tone of the typography was different, but spot on to the brief which left one final thing I wanted to address: the logo.

I'd already been playing with setting the logo in a block capital style and had settled on a font that had the feel I was looking for — the kind of thing you could imagine written on the side of a ship belonging to some kind of distant future corporate space entity. Like Eurostile but with more interesting letter shapes. It also it had to have a good J. Neue Machina fitted the bill nicely.

The aim I had was to use the logo to bring some of what was working so well about Orientation back into the design — the way the shapes reflected the angles and cutout elements within the graphics and iconography but it needed to be more subtle, so as to retain readability. I set to it in Illustrator and began chopping away at the type. Here's the un-chopped and chopped logos for comparison. It definitely felt a lot more sci-fi now.

I’m delighted, and I'll be honest a little relieved with the end result. It's not easy retrofitting a display font into a “finished” design concept, but I think we got there.

The imperfection of humans designing for other humans

We learnt a big lesson on this project — don't skimp on design reviews and get them done early in the process. We do exactly that with our clients. We like to call that process, “getting a temperature check”.

We’re normally better at doing this internally too., but for whatever reason on this project, I felt a false sense of security designing for a system that we all knew well, and I took the design too far before inviting feedback. It happens. I was in a real flow with this one, and driven by a genuine excitement about where the design was heading, so I kept my head down working on it. I won't be doing that again!

Even after nearly 20 years in the industry, I'm not immune to getting caught out, nor would I ever want to give that impression here. We're humans at the end of the day, designing stuff for other humans (here, here, I can hear Scott cheering!).

So yes, I'll be getting a team design review earlier next time — it's for the greater good.

There's two phases to this process. The first phase is where we sketch-up the creative as it sits — a concept I teach in Complete CSS — and then a round of low-fidelity, rough prototypes. Again, I teach how to use prototypes to better communicate with designers in Complete CSS.

Sketching up

I’ve been writing CSS for nearly 20 years and still personally rely heavily on visually planning before I build anything. You might be thinking “of course you have to plan”, but that isn’t building a backlog in Trello, Jira or Notion. It’s about grabbing a flat version of a design — in our case by exporting Figma frames — and drawing all over them.

Historically, I used to print designs and take to them with markers, mount board and scalpels, but these days, I use FigJam.

The aim of the game is to work fast and give your brain space to think about the build at an abstract level. We’re not specifically thinking about technology choices here either. Sure, you’re going to think about CSS techniques and semantic markup, naturally, but we’re not in the business of weighing up frameworks against each other.

It’s hard to grasp what we’re doing in writing, so allow me to show you with a quick video.

Watch the video.

With that context, hopefully you get the idea of a sketch-up plan, so let's take a look at ours for this project.

This sketch-up is different to the example above because this is a completely different context:

1. We're in a very established project and design system
2. Visually these themes are very different but our job is to make sure they are the same under the hood
3. We have to consider both "how do we get this done" and "how do we prevent damage/debt in the codebase"

The main focus of this sketch-up is sectioning out the creative, determining if it already fits or can fit and finally, finding problems.

I can't stress enough how important it is to find problems in planning and not in production. Sure, we're not in a utopia, so something will always pop up in production, but avoiding breaking your flow state with blockers is really important.

I'm very much of the opinion that production coding should be pretty chilled because you've front-loaded your planning and have already worked out how you're going to build the thing. The focus should be more "how can this break and how do I mitigate that?"

That's exactly what we're trying to do with this process. We're giving the creative work not just fresh eyes, but completely different eyes that see things another person might not see.

Jason did all the creative for this project and Leanne did the whole sketch-up plan. Jason is really creative but doesn't think as much in systems whereas Leanne is extremely systems-oriented. It's all about blending those unique skillsets at this point.

The point I'm making is Leanne will see things Jason won't (and visa-versa), so her job in this sketch-up process is to clearly identify those problems.

Catching up as a unit

Once Leanne had done her first pass as a sketch-up, we got together as a team and interrogated that work and the creative it referenced.

This part is really important because just like with a sketch-up, it's useful to work fast. We could do the part where we all come together asynchronously — it's how we work the vast majority of the time — but this approach allows for quick decision making and quieter notifications in Notion 😅

It gives each person an opportunity to argue their case on the details too. For example I will drive everything to be as simple as possible as a policy, but while I hack away, doing this on a team call gives Jason the opportunity to say "wait up" and add more context as to why a visual treatment is important.

By the end of the call, we're in a position where we can break off to producing low fidelity prototypes to test potential problems areas while we tackle the immediate issues with the creative.

Some problems we found

Let's take a look at three problems we found during the sketch-up and the team call.

The display font for JavaScript for Everyone

This font is great but there's a real readability problem with it. It tends to be better when it's rendering a short phrase with clear intonation, but the font is used everywhere, including buttons.

The font was — as Jason saw it — critical to conveying the brand, which I agree with to a point, but we zoomed out and remembered what is important: readability over everything. With that reminded, Jason went back to the drawing board and worked a few alternative options. We settled on Catridge as the new display font.

Offset outline in buttons presented a wider design system risk

The Piccalilli design system isn't the most heavily guarded system in the world, but we do really look after it. We're mostly a bunch of design system nerds after all.

Now you might be wondering why this is a problem. It's not a huge problem, but consider the CSS for buttons as it currently is:

.button {
  display: var(--button-display, inline-flex);
  align-items: var(--button-align-items, center);
  justify-content: var(--button-justify-content, center);
  gap: var(--button-gap, var(--space-2xs));
  padding: var(--button-padding, var(--space-xs, 0.8em) var(--space-m, 2em));
  background: var(--button-bg);
  color: var(--button-text);
  line-height: var(--button-line-height, var(--leading-slim));
  border-color: var(--button-border-color);
  border-width: var(--button-border-width, var(--stroke-weight-light));
  border-style: var(--button-border-style, solid);
  border-radius: var(--button-radius, none);
  box-shadow: var(--button-box-shadow, none);
  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  font-weight: var(--button-font-weight, var(--font-bold));
  font-size: var(--button-font-size, var(--size-step--3));
  font-family: var(--button-font-family, var(--font-display));
  letter-spacing: var(--button-kerning, var(--kerning));
  cursor: pointer;
}

This is just the main .button class, but it also inherits this base focus style:

:focus-visible {
	outline-color: var(--focus-ring-color);
	outline-style: var(--focus-ring-style);
	outline-offset: var(--focus-ring-offset);
	outline-width: var(--focus-ring-width);
}

The second part rules out using outline which would give us that offset. Modern browsers support border radius with outline too. It's just a bit hacky to do that and we want to maintain the global focus treatment across the site without overriding, the overriding again.

We could achieve this treatment by adding a child element to the button but that sort of treatment in an existing design system is a big decision to make with potentially wide-reaching consequences, so we have to ask ourselves, "is this treatment worth all of that work?". Of course not, so an alternative is needed to simplify.

Visual treatment also presented a wider design system risk

One nice detail introduced in the creative exploration was a little folded corner in the header for Mindful Design. It was a wink and a nod to how Scott runs his design workshops: lots of post-it notes.

Similarly to the button, we have to ask ourselves if we want to add additional CSS and markup everywhere to accommodate this one bit of treatment.

As we saw it during this process, it's very subtle but potentially problematic on small viewports because there's a risk of the smaller gutter not giving enough space for the corner to visually collide. We're also using that treatment further down the page too, so again, a re-think is needed.

Now it's over to Jason to talk about how he resolved these problems prior to prototypes being produced.

So much of being a great designer is feeling confident in having something to say, or finding something within the messaging of a piece of work that you can confidently stand behind. Yes there's technical skill needed, but the job is fundamentally about getting people to pay attention, and so you'll get a lot further if you're saying something interesting.

Every time you add something to a design, you're making a decision and those decisions add up. Think of the messaging as the foundation. If every design decision is made in support of communicating that same foundational idea, then not only will our design hold together well, but each element of the design will subtly help communicate what it is we're trying to say.

For JavaScript for Everyone, the messaging we'd chosen to build the design around was communicating taking your skillset way beyond where you're at, with a UI inspired by sci-fi films and retro futuristic computer games. With this settled, each design decision for the JavaScript for Everyone course brand and landing page was much easier.

Starting with typography

Nine times out of ten I'll begin a design by trying out typefaces. Not just because it's a good excuse to spend an afternoon digging for fonts, but because each design decision shapes the next. Building on the metaphor of the messaging acting like a foundation, the display and body font for me act like the cornerstone in a design. They're usually my first design decision and all the other decisions I make tend to build off that first decision.

For the heading typeface, I quickly fell in love with Orientation Bold. It's easy to imagine it adorning a racer in the WipEout universe (thanks for the tip off on that book Mat!). The shapes within the letterforms looked like they were pulled straight from sci-fi iconography.

With Orientation Bold taking the lead, I chose Azeret Mono as a supporting accent font for use in ledes, buttons and other incidental typography. Monospace fonts have a very retro sci-fi feel by their nature which is perfect for our needs. Why did I choose this mono font though?

A quick tip when choosing typefaces — I like to read the background info on the font and get a sense of the design inspiration and details. There's often some information hidden in there which can help inspire aspects of a design or clues as to whether it's going to fit your brief. In this example, I discovered Azeret Mono is based on optical character recognition (OCR) fonts, which were designed in the late 60s to be read by machines.

The design aesthetic is also deliberately styled to look like a futuristic operating system font — perfect! I also know we're in good territory with anything from Displaay Type Foundry. On that note I've got a list of go-to type foundries and font designers I swear by. A good workman is only as good as his tools after all! This "building a house" analogy is holding up well — I do love to string an analogy out as far as I possibly can!

Another thing I look for when I'm pairing fonts are shared traits within different characters. It's the little details like this that can make a font pairing work, even with pairings that might on the surface seem unusual. If you'd like a great primer on pairing typefaces based on their characteristics, check out Bethany Heck's The Value of Multi-Typeface Design.

Both fonts share similarly tightly rounded corners. This shared characteristic really helps give the pairing an intentional feeling, like they're two different parts of a considered system.

The alternate characters in the font (a, b, c, d, g, h, m, n, p, q, r, s, u, y) take this cohesion a step further. We can use CSS to get those enabled too.

For the body font, Georgia offers a nice stylistic contrast but the main reason I chose Georgia here is because it's such a clear throwback to the early days of the web.

It gave the retro feeling I was trying to create a kind of authenticity that I liked. I imagine everyone expects a sans serif font in this kind of design, so I wanted something to break away from the stereotypes I was playing on so heavily elsewhere.

Iconography

In this kind of retro futuristic design, iconography often plays a huge role in building out the design language, as you can see going back to some our references…

I wanted to bring some of the angular shapes from Orientation into the rest of the design. So I chopped up some of the more interesting characters to see what might be useful for iconography.

This evolved into the "TIE fighter" inspired icon below. The “wings” were based on an evolution of the angular shapes used in the exploration above.

Building cohesion into your designs

Those angled shapes also fed into other aspects of the design like image masks and the runway horizon background in the hero design. There are plenty more aspects of the design I could reference here that all build off this aesthetic, like the CRT screen inspired background texture, or the image dither effects, but I think this is enough detail for this post!

This process of adding layers to the design, with each decision building off the last is central to my own process. Over the course of a design I build a clearer and clearer picture of what it is I'm making. This is how you build cohesion into your designs.

Because we set our visual foundation on the messaging we want the design to communicate, everything is subtly communicating the same central idea, which is going to help our messaging to hit home, which is the most important outcome.

You'll have to bear with me a bit in these posts. Writing is fairly new to me (I put my first post out in December), and I'm already feeling like my default tendency is to stick to the safe ground of "this is what we did", and "here's how you do that".

I have a feeling this process will be much more interesting if it's also about sharing the messy in-between bits of our projects. It definitely feels more me to be in sharing mode than teaching mode.

Over the next few posts I share here, I'm going to pick out a few aspects of the thinking and decision making behind the design work that took me from the brief to the final concept, and talk about how I navigated those. I'm also going to share some of the "in-between" moments that worked on the project, and some that didn't.

First up, one of the biggest joys of this course brand development project was the way Mat and Scott embraced what we're doing and gave such lovely feedback. It's not just about the nice words, but about the way they both gave so much space for us to design with freedom, without any sense of trying to steer the process too much. I think that's one of the reasons I'm so pleased with how these designs are coming together.

The importance of going all-in

I was recently feeling in a creative rut with a particular project. I was sat with a mentor of mine who reminded me that all that I was making a classic mistake. I was trying to fit too many ideas into the concept.

I've always tried to find a central idea that can thread throughout a design, and honing in on that thread is central to my process. But I was too close to the project to see that I'd allowed several good ideas to creep into the design, at the expense of one great idea. Essentially, I was reminded of the importance of going "all in" with a design concept.

I like Saul Bass's take on this idea: "Design is thinking made visual". It's why I love working with writers and brand strategists. Great strategy and messaging makes finding a design concept a lot easier and by proxy a lot more fun.

All of this was fresh in my mind at the beginning of this project. For me, there are three key tactics I tend to lean on when coming up with a design concept:

1. Speak to the client
2. Read the thing
3. Go find some inspiration and reference material

The best ideas are hidden in between the words

I've already spoken about getting a gut feel for a project's visual direction by speaking to the client and gathering reference material, but I'd say above and beyond any other aspect of the work — reading the thing you're designing — is probably the most important thing I would advise anyone getting started in design to do before opening up any kind of design tool or browsing Pinterest.

It sounds obvious, but given the extent to which so much of the internet looks the same, perhaps it's worth stating the obvious. For me, the best work I've done has always come from reading and reflecting, then going out in search of inspiration. The best ideas are always hidden in between the words, in my experience.

Take Mat's course, for example. Originally we had "Learn to write JavaScript deeply" as our hero headline. I liked this, and it got me thinking about a few visual metaphors we could use to support the statement. But after reading the page a few times, one of our secondary headlines really stood out.

Senior level JavaScript developers have a skillset that goes well beyond syntax expertise. I'm here to help you get there.

This felt like it captured the essence of why Mat's course was different — so many courses focus on syntax and learning various methods and properties, whereas Mat's focus is to go beyond that, and develop an understanding of how JavaScript thinks.

With that in mind, I played with moving the copy around a bit and re-worded that statement to "Take your skillset way beyond syntax expertise" and gave it a try as the hero headline, with "Learn to write JavaScript deeply" as a supporting heading below the hero.

This new headline opened up some much more interesting creative avenues. The idea of taking your skillset way beyond was much more in alignment with the ideas we had to explore retro futuristic aesthetic, and gave me a focus for reference imagery to hunt for, like graphics relating to motion, sci-fi user interfaces, and futuristic horizons. It gave me an idea that I could go all-in with, and the end result was so much better for it.

The question of what to show, and when?

If you've read my last open working post, you may have noticed that I made the judgement call to get input from Scott and Mat at very different stages of the design process. Here's a reminder of what was presented to each of them:

My approach to getting that first feedback on a creative direction is to bring a client or external partner in at the point when you're confident enough in what you're presenting to know you're onto something, but early enough to allow time to change course if needed.

How early that feedback point tends to be in the process for me is usually fairly tied to the scale of change in the design. If it's an existing project or brand (as with Scott's Mindful Design course), there's a much smaller risk to the project to take the design further before seeking feedback. But for from the ground up design — especially anything where you're establishing a brand look and feel — getting input on the creative direction early could save a lot of time.

The framing around this first point of feedback is so important, too. We want to remain firmly in control of the project during feedback windows, and that's a bit of an art. One I haven’t always got right, I must add! We’re all learning from experience.

A big principle we hold on to at Set Studio is to only show what we need to show to get the feedback we need. We also don’t ask for permission by asking for sign-off. Instead we’ll say something along the lines of “we’re planning to move forward in this direction unless there’s something specific that doesn’t feel right to you”.

We’ll also highlight specific areas we need their input on, keeping the focus on the decisions we're asking a client to make. This ensures we stay in control because if we don’t do that, we end up turning into human paintbrushes, even for the most reasonable clients. We want to foster a spirit of collaboration, without compromising our role as the design partners in the relationship.

Presenting work via video also helps avoid putting the client on the spot on a call, which can often result in shallow or reactionary "feedback under pressure". We’re trying to avoid creating a situation where the client feels they have to respond right there and then.

Here's a typical idea of how we might present a piece of work to a client…

A deceptive pattern is probably best thought of as a tactic to manipulate an individual — psychologically — to con them to do what you want them to do on your page, rather than what they likely initially set out to do.

Deceptive patterns work, which is why they're everywhere, but there's an ethical cost to implementing them. An ethical cost we're never interested in paying here because ultimately, we respect our user base.

Let's have a look at some popular methods of CRO and which ones we've opted for on the course marketing pages.

Social proof

This is a psychological phenomenon which essentially boils down to humans correcting their behaviour based on their peer's behaviour and yes, marketers love to exploit this.

Probably the most common way that social proof is utilised is with testimonial-like content. This might be quotes or Trustpilot reviews. What you're aiming for — when utilising social proof — is the feeling of "my peers like this, so I will probably like this too."

We lean into this methodology on the course marketing page for Complete CSS because — in our opinion — if you apply social proof tastefully and with consideration, it can be really useful.

For example, these are people that have purchased and enjoyed Complete CSS. As we see it, it's a good idea to display these quotes because someone might have doubts, even if the marketing page has done its job of outlining the benefits of taking the course. It’s rather important to determine if a course is actually going to be good before you purchase because the tech industry is — well — a bit of a snake oil pit 😬. We’re trying to reassure with this pattern, rather than manipulate.

Another way we use social proof is selected quotes from well known names in the industry. The reason we use these is because if a user comes in cold — as in they've never heard of Complete CSS or the author (me) — they might recognise Chris Coyier for example. Knowing that Chris says nice things about the author's writing might be just the nudge a user needs to at least explore the marketing page some more.

Lastly, we leverage how many people have purchased a course as a social proof signal too. Nothing encourages trust quite like seeing lots of people have already purchased a course.

Above the fold

Let's start with the definition first. “Above the fold” is the area immediately visible to the user on page load before they scroll. It’s something that found its way to the web from print media as “above the fold” is a reference to broadsheet newspapers.

A very aggressive marketer will try to stuff as much information as possible "above the fold" because data — such as reported in this Nielsen Norman Group study — will tell them that the majority of users will spend the most time viewing content above the fold.

A shallow translation of that would be "if people spend most of their time above the fold, we need to put as much information and actions in there as possible". That fails to consider the following though:

1. Optimising for the fold is near-impossible when we have no idea how big a user's viewport is
2. Users may indeed spend a lot of time "above the fold", but do they bounce after that? If so, that points to the "above the fold" content not engaging the user so be mindful implementing a hard-sell right from the start

We opt for a different approach: good messaging. Typically, when a user lands on Complete CSS they see the above. There's a bold headline — "Take your CSS skills beyond the next level" — that is supported by a summary:

Get to a level in development that you never thought would be possible with this expansive course from Andy Bell.

This is immediately followed by prose content, headed with another eye-catching headline: "Senior level CSS developers are so much more than syntax experts". Instead of trying to catch a quick sale, we're instead, gently nudging the user to what's important: what is this course actually going to do for you?

Interstitial popups

Quite possibly one of the worst patterns on the web: an annoying popup that steals your focus. You know the type, an immediate “sign up to our newsletter to receive a 10% discount” pop up arrives as soon as you and on a page.

Kate sums it up well.

If you pop up a dialog box in my face the very second I visit your site, I'm not sticking around and bushwhacking through your digital weeds to get to what I was trying to do in the first place. I'm out.

That's on you for having a mess of a site and frankly being a little rude.

The theory for marketers is that if you "grab attention" (literally), you'll increase the odds of getting a conversion. We respect our users though, rather than hedging bets on a cheap conversion opportunity.

The Nielsen Norman Group did a good study back in 2017 where they outline how disruptive modals/dialogs/popups can be when utilised for the wrong reasons, such as interrupting the user's workflow, causing a user to forget what they were doing and worst of all, they block the content behind which presents an accessibility risk.

As that study goes on to address, there are good uses for popups. For example, if a user is about to perform a dangerous action — such as deleting an account — a popup is a good way to deliberately interrupt the flow to be absolutely sure that deleting the account is what a user wants to do. That's nice, defensive user experience (UX) design.

A user isn't doing a potentially dangerous action on our course marketing pages though, so an interstitial popup — or even a triggered popup — is not a good pattern to deploy, so of course, it didn't even get considered by us. Not to mention, it goes completely against our principles of reader experience first, always.

Fear of missing out (FOMO)

The last method I want to touch on is FOMO. Marketers will exploit the feeling of missing out to push a user over the edge. The edge being the checkout process in our context.

The problem with this method, aside from it being exploitative of human emotions, is that by aggressively selling a product — especially a high ticket product — is you're opening yourself up to the risk of dissatisfied customers.

Dissatisfied customers will almost always (rightly) want a refund — which is expensive as you don't get back the payment provider fees and currency conversion fees in our case because we charge in GBP.

What's more expensive though is reputational damage. The last thing you want is people broadcasting their dissatisfaction with a course you've published, especially when that the person feels like they've been misled.

We see this FOMO pattern more often on lower ticket purchases on extremely optimised e-commerce platforms.

It's important though to be aware of your offering which in our case is a higher ticket course sale. That process should be slower and more considered so the people who actually want to buy it, buy it, happily.

I'll take a happy user base over a user base that feels like they were misled into a purchase. Sure it might hit the sales targets, but that's fine as far as we're concerned. The risk of reputational damage is far more important to avoid in our case.

The marketing page's job is to close, not to sell

In sales, closing a sale is the tough part. It's the point where you convince a customer to give you their money. It's the primary reason why our marketing pages — in fact, most stuff we design for ourselves and client — is section-based.

The job of each section is to reassure because we're optimising for warm-to-hot leads rather than cold leads as a priority. Let me break down what I mean by that.

The funnel for Complete CSS is complicated because there's many entry points. For example a user could land on Complete CSS from:

1. A social media post by Piccalilli or myself
2. The end of a blog post, written by me
3. A social media post/blog post by someone recommending the course
4. A YouTube video
5. An LLM, such as ChatGPT (yuck)

Each of these entry points are warm because the user likely has some context already about the course, or at least my reputation. We lean into that with the structure of the marketing pages. They're designed to inform, rather than sell hard.

It's partially why advertising the course in newsletters etc. has been rather unsuccessful because all of that context is missing, which suddenly makes that user a cold lead. What we need for those situations is a very specific, harder-selling marketing page, often called a CRO page.

This need for context might pose as a potential problem that we have to solve in the future, depending on work that course authors do before and after their courses go live. What we've done to maintain our methodology of closing and keeping their visitor-base informed with context already is set out a "battle plan"guide that we hand them as soon as the contract is signed.

In essence, we're advising authors to do a lot of authentic off-site work to "warm up the leads". This off-site work includes:

1. Appearing on podcasts
2. Writing articles and publishing on other publishers — not just Piccalilli
3. Investing time into publishing on their own blogs
4. A constructive presence on social media (with the odd shitpost, naturally)
5. Building trust overall that they are the person to learn from

This is fundamentally what it's all about when selling courses: trust. People need to trust in your ability to teach them well. The perfect way to demonstrate that is to give away way more than you take. It's something I've done for years and will continue to do so.

Wrapping up

The key takeaway for people working with conversion-based design is that you can read thousands of articles that'll instruct you to use Tracker Tool X or Tracker Tool Y, but it's actually all about context and understanding your market. A surveillance tool ain't gonna do that for you.

In our context that's an unacceptable way of working and will scream desperation too. That's not a good way to build trust is it?

Instead of collecting heaps and heaps of tracking data on your landing pages, you need to do the research up front to understand who you are selling too, what resonates with them and what turns them off. There's always room for experimentation to optimise — just like we have — but try to be pragmatic with your experimentation.

By being pragmatic and trustworthy, you'll sell to people that really want your course/product/service. That sets you in a much stronger position to maintain a relationship with the customer in the much longer term and maintain a good reputation, which is always a good thing.

It's all about prioritisation at the end of the day. Do you want to squeeze every last penny out of users, no matter what? Leverage deceptive patterns. But know that when you do, you will do serious reputational damage. It's not even worth considering in our opinion.

Where we started

This is our starting point for Scott's course brand.

Scott handed us a fantastic, ready to go visual identity for his Mindful Design brand. We love it, and it's a big step away from our Piccalilli look and feel, which is exactly what we wanted from our first custom theme project — a good "stress test" for our theming system!

We were in a good position with our landing page, which has been live on Piccalilli for a while. Because of the refinements Andy's been working on, we were happy with the content structure and UX for this phase of work, so we could focus fully on updating the template design to make theming as effective as we can.

For Mat's course, the landing page followed the same structure, so we planned to get cracking on Scott's first, and then use Scott's landing page as a base for the work on Mat's.

How we approached the Mindful Design course brand

Each project has different needs, so adapting the process to the project is something I've always tried to do. Beyond that, something I've learned to do over the last few years is to play to my strengths and to design the process to avoid the things that typically trip me up.

For me, I know that decision overwhelm can be a big roadblock to creative work. It's why I do a lot of discovery. It's not just about following best practice, it's also about getting answers to as many decisions as I can before I get into the design to avoid that overwhelm.

(As a side note, I've found the Myers Briggs personality test (I'm [ENFP]) to be a valuable reflective tool to help me work to my strengths.)

For me, I always want to get away from the blank white page as soon as possible in the design process. So while starting with a wireframe for a landing page that already exists might seem counterintuitive, that's where I began. This gave me a few useful outcomes:

1. First and most importantly, I built myself some momentum
2. It was a quick way to get all the elements into Figma
3. Because our look and feel was broadly there, I could apply some very quick global type styles as a base
4. It allowed me to strip out most of the layout decisions that had been made on the landing page and start with something much cleaner

You'll see that I paid very little attention to neatness or consistency here. Plenty of time for that later.

From here, I could start working iteratively to tackle a single aspect of the design at a time, which kept that momentum going and gave the process focus. For each small iteration, I created a new artboard.

First up, applying the existing brand assets and styles to the landing page gave me a sense of how it was working in our context. I only mocked up the first three sections of the page at this point, as I'd explored enough to feel confident that this centred layout idea we'd been discussing was going to work well.

Each iteration was pretty small here — introducing a subtle pink that Scott had been playing with, and switching out the body font to give the typography just a little more personality. I've also labelled the frames here as I've gone, so it's easy to look back through and trace the decisions and make playing spot the difference easier if I come back to these designs at a later date.

After a few more iterations I landed on a design direction I felt happy with, and had the first pass of the whole page designed.

There was still more I'd like to do. We had a curriculum overview section we were talking about dropping in, and so far the illustrations were lifted wholesale from Scott's main site design and I'd like to update those. But it was ready for some feedback from Scott.

How we approached the JavaScript for Everyone course brand

The open ended nature of Scott's brief needed a very different approach. We had a loose idea of a few potential jumping off points for the visual inspiration, but for any project where look and feel needs to be established, I always start by gathering some references.

For me a lot of this work is intuitive. Going back to working to your strengths, my personality type is down the intuitive, sensing and feeling end of things, so I'm looking more for a feeling to follow here than anything at this stage. That feeling or sense of where I'd like to go with a design is something that builds for me even from initial project discussions.

When I'm chatting to a client, I'm digging for a sense of the kinds of things they might respond well to, and looking for nuggets of info that can give me clues that might lead down interesting creative avenues. I'll ask them to send me references too. Looking at the references we'd pulled together below, there were a few themes beginning to emerge at this stage.

1. We're channeling some retro vibes here
2. Mat’s mentioned a few gaming references that all share a common theme of techy, but without falling into sterile tech stereotypes
3. I was leaning towards the idea of some kind of abstract graphic device to support the brand

I've already admitted to suffering from a severe case of Fear Of The Blank Page™, but to get over that initial inertia here, I took a totally different approach to Scott's design and kicked off by asking myself "what if we were advertising the course with a poster?".

Cue an afternoon spent in my happy place — digging for fonts!

At this stage, I was playing with the concept of a graphic metaphor for depth to support the headline "Learn to write JavaScript deeply", and playing with some found imagery to keep the process quick and keep up momentum. It's so easy to get sidetracked creating graphics at this early stage, which I find can really slow things down.

Using found imagery makes it really quick to try out different ideas and quickly change the feel, and sometimes stumble on a direction you'd never have come up with otherwise. The idea is to find sparks of inspiration here, not to take these graphics for our own use!

There was something in the last frame below that really struck a chord with me, and the idea of a runway was something I wanted to explore more. Graphically it could be a good metaphor to support the idea in the hero lede text…

Senior level JavaScript developers have a skillset that goes well beyond syntax expertise. I'm here to help you get there.

…and it got me thinking down a kind of retro futuristic avenue, which Mat had alluded to being very ok with.

Off the back of this I started exploring graphics of my own, leaning heavily into retro futurism. At this point I felt like this was starting to go somewhere, so it was time to run these past Mat and get a temperature check.

That's the key when working on an existing project — not a greenfield project. You need to define a focus and stick to it like glue. Otherwise, you'll find features drag, pull requests (PRs) get huge and timelines aren't met.

Sure, Piccalilli is in itself more of a product type of project, rather than a typical agency type of project, but the risk of escalation is arguably higher because it's an internal project. The risk comes from the fact we care deeply about the health of the Piccalilli codebase, making ourselves vulnerable to nerd sniping.

It's not about skipping the problems, it's about being organised

Instead of dealing with everything as you see it, it's a good idea to keep a refactoring backlog, or in our case, a refactor type for items in the backlog, which are surfaced in Notion database views.

In that clip, there are various types of elements that we want to improve on Piccalilli. The rule is if you see it, you log it. Then, whenever we start a new run of work on Piccalilli, we start with a refactor.

By starting with refactor work, we can do that while discovery and creative sprints are running.

As you can see, there's a few weeks from the start to when production development work happens, so there's plenty of time to clear the decks. By starting with refactoring, you're tackling the tricky stuff early when you're at the peak of your energy levels for a project too.

It also helps us qualify design decisions early because the source code is fresh in our minds.

What's going to need to be refactored for this project?

I've spent some time calculating what isn't working well — mainly because I'm the creator of those things 😅 — and I've settled on the following items.

We need to tidy course marketing page variables and experiments

This is what months of experimentation looks like:

const pppEnabled = true;
let pppDiscount = pppEnabled ? pppDiscounts.items.find((x) => x.countryCode === countryCode) : null;

/*
  EXPERIMENT
  I want to see if applying a discount from author promos boosts sales a touch.
  If it does, we can refactor this into something a bit more well thought out.
*/
if (!pppDiscount) {
  /* @ts-expect-error */
  pppDiscount = currentPromotions.find((x) => x.utmMedium === utmMedium);
}

const courseBasePrice = 249;

const enrollAnchor = '#enroll';
const coursePrice = `£${courseBasePrice}`;
const flowCTALabel = `Take the course for just ${coursePrice}`;
const generalCTALabel = 'Let’s get you to a level in development that you never thought would be possible.';
const encouragingStatement = `Join over ${usersCount} others who are taking their CSS skills to the next level`;
const dockedCTALabel = encouragingStatement;
const pppBanner = pppDiscount
  ? `Howdy, you get a ${pppDiscount.discount} discount because you’re coming in from ${pppDiscount.descriptor}. Use code ${pppDiscount.couponCode} at checkout.`
  : null;
const pppSummary = pppDiscount
  ? `You get a ${pppDiscount.discount} discount which saves you £${(courseBasePrice * pppDiscount.multiplier).toFixed(2)} because you’re coming in from ${pppDiscount.descriptor}. Use code ${pppDiscount.couponCode} at checkout to get Complete CSS for only £${(courseBasePrice - courseBasePrice * pppDiscount.multiplier).toFixed(2)}.`
  : null;
const flowCTASummary = generalCTALabel;
const flowCTALink = enrollAnchor;
const banner = {
  icon: 'heart',
  children: generalCTALabel,
  variant: 'primary',
};

At the very least, we need some in-file documentation that explains what these variables do and how they are used on the marketing pages.

We also need to make sure variables are correctly grouped together. For example flowCTA-based variables are correct in terms of they power the <FlowCTA> component we use, but they are split apart and messy. These need to be grouped and you guessed it, documented.

Clean up lazy use of @ts-ignore

Again, this is me… I am not a strong TypeScript developer and I also don't have much time to do development work. Quite the horror combination, I know.

{
  content.previewFrame && (
    <div class="flow">
      {content.previewFrame.headline && <Headline {...content.previewFrame.headline} />}
      {content.previewFrame.lede && <Prose content={content.previewFrame.lede} />}
      <div class="wrapper">
        {/* @ts-ignore */}
        <PreviewFrame client:visible url={content.previewFrame.url} />
      </div>
    </div>
  )
}

The problem with a //@ts-ignore is it’s a bit like a //TODO comment. We write them with the mindset of "I'll catch that later" and it is never in fact, caught later. At the very least we should be using @ts-expect-error because if that particular error stops occurring, TypeScript will throw an error that it's not needed anymore.

A great time to clean @ts-ignore, @ts-expect-error and //TODO comments up though is at the start of a project — especially if they're present in files you know are going to be affected.

The page specific CSS is a mess

One of the reasons we chose Astro as our framework was being able to import CSS only when you needed it. For example, every component and region pulls in its own CSS file. If the component was <Button>, it would start like this.

import '@repo/css/blocks/button';

That is an alias path to our CSS (in the monorepo). It means button.css only loads if there are <Button> components on the page.

We do the same thing for specific page CSS too. Most pages on Piccalilli don't need this capability, but where there's quite a lot of deviation from the standard user interface (UI) set, adjustments need to be made.

.course-lander {
  /* Magic number, yes, but getting the sidebar and grid aligned is hard work */
  --consistent-sidebar-and-grid-size: var(--course-lander-consistent-sidebar-and-grid-size, clamp(16rem, 33%, 410px));
  --signup-summary-max-width: var(--course-lander-signup-summary-max-width, 60ch);
  padding-block: var(--course-lander-block-padding, var(--space-xl));
}

.course-lander:has(.docked-cta) {
  padding-block-start: var(--course-lander-has-docked-cta-padding-reset, 0);
}

.course-lander .prose {
  font-size: var(--course-lander-prose-font-size, var(--size-step-1));
}

.course-lander .prose p,
.course-lander .prose ol,
.course-lander .prose ul {
  max-width: var(--course-lander-prose-max-width, 75ch);
}

.course-lander .prose {
  --flow-space: var(--course-lander-prose-flow-space, var(--space-l-xl));
}

.course-lander .grid[data-layout='thirds'] {
  --grid-placement: auto-fill;
  --grid-min-item-size: var(--consistent-sidebar-and-grid-size);
}

.course-lander .sidebar:not([data-direction]) {
  --sidebar-target-width: var(--consistent-sidebar-and-grid-size);
  --gutter: var(--course-lander-sidebar-gutter, var(--space-l) var(--space-4xl));
}

.course-lander__intro .sidebar .wrapper {
  padding: var(--course-lander-intro-sidebar-wrapper-padding, 0);
}

.course-lander__intro h3 {
  font-size: var(--course-lander-intro-h3-size, var(--size-step-5));
}

.course-lander__intro .flow-cta {
  --flow-space: var(--course-lander-flow-cta-flow-space, var(--space-2xl));
}

.course-lander__intro .banner,
.course-lander__user-form,
.course-lander .product-details {
  --flow-space: var(--course-lander-multi-flow-space-reset, 0);
}

.course-lander__faq {
  --flow-space: var(--course-lander-faq-flow-space, var(--space-l-xl));
}

.course-lander__closing-cta {
  --flow-space: var(--course-lander-closing-cta-flow-space, var(--space-4xl));
}

.course-lander__intro-action {
  margin-block-start: var(--course-lander-intro-action-top-margin, var(--space-m));
}

.course-lander__intro-action + .banner {
  padding-inline: 0;
}

.course-lander .wrapper:has(.praise:not([data-praise-variant])) {
  margin-block-start: var(--course-lander-default-praise-top-margin, var(--space-4xl));
}

.course-lander:has([id='enroll']:target) .docked-cta {
  display: none;
}

Could you tell me what's going on here? I can't and and I wrote it. The file started as complete-css.css and when we launched the initial marketing pages for Mindful Design and JavaScript for Everyone, we normalised everything to be course-lander.css instead.

What we didn't do though is audit the CSS and qualify what everything does. The argument for not doing that was all three course marketing pages were going to be identical in terms of UI. We were focusing on the project at hand.

That's very much not going to be the case on this project though — all three will be completely unique — so the time has come to go through this CSS, determine what each block is doing and then you guessed it: comment it within an inch of its life.

I can hear one or two of you thinking "why do that if you know it's going to be changed?". It's a valid question! What we need to achieve here is confidence when code will be deleted. It's all about smoothing the path as much as possible, so production-level CSS authoring is fully focused on making stuff look good and maintaining the already high levels of flexibility. By documenting first, we’ll by proxy, enable that smooth working.

I'd say our CSS is in really good shape overall (you'd hope so wouldn't you?) but even then, deleting CSS can be quite scary if you don't smooth the path first. By qualifying everything in course-lander.css either Leanne or I can confidently delete stuff at will, if we need to.

Organise, qualify, regroup and get on with the work

The next part to do is go through the existing refactor backlog items and determine what could be done in this project. All of this work should be in a separate, smaller PR to the main production work.

The reason for that is we want focused PRs rather than huge PRs. It makes the reviewer's life a lot easier and more likely they'll actually analyse the code. If that's not happening, you're doing PRs for PR-sake, rather than what they should be for: working together to make sure code is in the best possible shape before it's merged into the main branch.

It's my job as the project lead to do a rough time estimate too to make sure this work doesn't get in the way of the project. With that in mind and the fact that this project is quite a short timeline, we'll likely pick up one or two items out of our refactoring backlog to compliment the items I outlined above.

Wrapping up

Sorry, that ended up being quite long along with a 5 minute video. If you've read down this far, you've done well.

Let's move back into the design world on the next post where Jason will explain his initial creative exploration work. It's much more fun that refactoring!

A good example of that is in the last post, Andy mentioned that there's some qualitative research to do, but instead of halting the project, we're going to use that to qualify design ideation concepts.

The most important question in discovery is “what are we trying to achieve?” We use a process we call framing in discovery to help with this, which is based on two questions:

1. What is the problem we're trying to solve?
2. What solution are we proposing to achieve this?

For this project, the problem we're solving is that we're working on following up our first course, Complete CSS with two new courses by guest authors later in the year, and to put it frankly, it'd be pretty boring if they all looked the same.

Our whole ethos at Piccalilli is to create a platform for authors and educators, and to give space for them to do their thing. We love our visual identity and it serves the editorial content well, but we want each of our courses to live in their own little universe — one that our course authors can feel is theirs. Some of our course authors will have their own brands too. In short, we want our brand identity to get out of the way.

Often, arriving at an answer to the second question in the framing takes a good amount of digging, but as our course platform is a project we’ve iterating on for a while, we’ve already got a proposed solution that we’ve been working on in preparation for implementing branded courses.

When we redesigned Piccalilli we built a whole theming system in from day one, which was sitting there ready to power this. We already had the first iteration of a landing page set up for each of our two new courses — Mindful Design and JavaScript for Everyone, and Andy had been busy iterating the Complete CSS landing page over the last few months, so we had a good idea of what's working. This sprint was all about working out the best way to update our course landing page template to support multiple brands, each with their own theme.

At the start of this sprint, our three landing pages looked like this:

Finding out what matters

The first order of operations was to chat to Scott and Mat. I wanted to find out what was important to them, and the context for where these courses sit alongside their other work.

These calls were really informal. I think that's so important when you're doing design discovery because building good relationships with the people you work with is foundational. Work is a whole lot better when you're making friends along the way, but building relationships is a foundation for the trust you'll need to ask from them when you present work later in the project.

Authenticity creates a shared sense of safety, which sets us up for a successful collaboration.

Scott's context

Scott has his own Mindful Design brand, which you can see on his website.

His course will be part of a wider collection of products, including a toolkit, book and newsletter. The course will be linked to from the Mindful Design website, and Scott's keen to keep it all feeling cohesive.

He's also open for us to subtly evolve the design language. In essence our brief here was to take the fantastic work that Scott has already done, make it work in our context, and look for opportunities to flesh it out and refine the execution.

Mat's context

The brief for Mat's course was a bit more open. Mat's written books and courses before, but they all exist as standalone products that don't need to be visually related to his upcoming course. We could essentially be quite free with the aesthetic choices for his brand.

Together we established a few key criteria for the visual direction — primarily to avoid the increasingly generic blue/purple-on-black tech site look, or in Mat's words "signal technical without it looking like someone turned off all the lights at an Apple store". And we wanted to have fun with the design.

There was some talk of perhaps taking influence from tech of the past, and that the design should have a warmth and approachability to help emphasise the for everyone aspect of the course.

A note on theming flexibility

This sprint was as much about making sure our theming system works, as it was about creating visual brand identities for each of these courses. We have one course that's got an established identity, and another that is more of an open brief, which is serendipitous. Our system should be able to handle both, but the thinking around how the structure needs to support this is important. Upfront, we decided that we needed to do two things to ensure the flexibility of the system:

1. We needed to push the landing page designs further than we had for our first course, adding more visual flair and details to the layouts to find the areas that needed theme-ability baked in
2. We also needed to find smart ways to make the layouts resilient enough to handle theming without breaking

Wireframes

Working on Scott’s project first made sense, as their solid existing identity gave us such a leg up. Off the back of the discovery call, we opted to get straight into wireframing. We're usually a big fan of priority guides instead of wireframes as they take layout decisions out of the equation at this early stage, but in this context, layout decisions were precisely what we needed.

We'd already defined content and our current landing pages acted as our guide to content priority, so our task here was to improve layout resilience. First up, we dropped a screenshot of the current landing page into FigJam and carved it up into regions.

The first port of call was to look for opportunities to simplify the region layouts to better handle theming. Having built a few projects with theme-able front-ends recently, one thing has become very clear — the more complexity in the structural aspect of the design, the more chance of it breaking when a new theme is applied. As Andy has mentioned, our theming system is powered by CSS custom properties. We use them on almost everything, including our fluid type and spacing scales.

:root {
  /* An excerpt from our fluid type scale */
  --size-step-2: clamp(1.3125rem, 1.1951rem + 0.5872vi, 1.75rem);
  --size-step-1: clamp(1.1875rem, 1.1036rem + 0.4195vi, 1.5rem);
  --size-step-0: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);
}

This level of flexibility means each theme can have its own type and spacing scales — which is powerful — but it also opens up scope for upsetting the balance of elements within a layout on a page with a custom theme. Building with flexible layouts helps us out a lot here, as we're likely to avoid elements wholesale crashing into each other, but the more width of the road we can build in to the layouts, the more likely our layouts will look great no matter the theme.

This section below is a great example.

It looks great in our default theme. But with a more dramatic type scale, that heading suffers from a distinct lack of space. It's not broken, but we can do much better.

Thankfully, this isn't the first theme-able project we've built. We worked with The Lost Estate last year to build a platform that allows them to create landing pages for multiple live entertainment experiences, all using the same underlying theme-able system, but each with their own look and feel.

Their visual aesthetic is on the maximalist end of the spectrum because they like to throw a lot into their designs, to build a sense of the immersive worlds they create for their shows.

One of the big things that we found during design exploration for The Lost Estate was that keeping layouts centre aligned and stacked helped hugely with layout resilience. It makes a lot of sense. Strip a website of its CSS clothing and it's responsive by default, with block elements like headings taking up the full width of the viewport, and everything nicely stacked. If you're not averse to a swear or two, here's a great example of that! (content warning: contains explicit language).

You can throw anything at a layout like this and it will handle it. Want to use a super wide font like Obviously Extended? Go for it.

The other benefit of this approach of centring content, is that it makes responsive design simple, by introducing minimal layout changes across viewports.

With all of that in mind, this is where we landed with our wireframes. We're taking full advantage of stacked layouts here, barring a few spots where we selectively introduced multi-column layouts to break the composition up.

We've introduced the brand typefaces here, but you'll notice that we're not aiming for any level of neatness or consistency. This is our messy first draft. It's a concept I picked up from Anne Lamott's Bird by Bird, and it's helped me hugely in this early stage of the creative process to get that initial momentum.

I'm a long-suffering perfectionist. And I've learnt the hard way how much perfectionism shackles creative freedom if you don't keep it in check.

At this point, I feel happy with where we’re at, and ready to dive in and get into some design work. Andy will pick up next with a look at the existing technology of our systems.

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.

To see this demo, head over to the web version.

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?

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 continues

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 start

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?

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.

Well, I say simple, but as with any working on an existing project context, it feels simple until you start doing it.

I'm willing to bet one English pound that the vast majority of you are working on existing projects, day-to-day, so as we see it, starting this open working content with an existing project makes a lot of sense.

We’re hoping that seeing how we operate on this project and future projects will be helpful to you and your day job. That’s a big part of what we’re trying to do. Let’s get on with it.

Some background of the problem we’re trying to solve

We publish premium courses on Piccalilli. Right now, one is available — Complete CSS — and two others are launching this year: JavaScript for Everyone and Mindful Design.

Now, if you take a moment to check out those landing pages — it's ok, I'll wait — you'll probably notice they all look very similar to each other.

We actually have a full theming capability on this site that we wrote about in our redesign article series. Almost every global style, component and region is hooked up like this:

.my-element {
  background: var(--my-element-bg, black);
  color: var(--my-element-color, white);
}

Because CSS custom properties are affected by the cascade, this system allows us to determine a specific theme, anywhere we choose to do so.

:root {
  --my-element-bg: red;
  --my-element-color: yellow;
}

What you're seeing right now is the default theme. If you toggle dark mode, you're seeing the default dark theme.

If no theme is defined, those fallback values — for example black for --my-element-bg — are honoured. As soon as --my-element-bg is defined by a theme though, that value is honoured instead. This gives us the ability to completely change the look and feel of any element of the website whenever we want. Handy!

How we’re aiming to solve the problem with this theming system

For a client project, we'll send a Statement of Work (SOW) that breaks down high level deliverables. For this first project, the deliverables are as follows:

1. Refactor the default theme for course marketing pages into a simpler, more themeable structure. This will be applied to Complete CSS
2. Further refactor the sectional structure of the course marketing pages in general
3. Develop two distinct brands for JavaScript for Everyone and Mindful Design
4. Implement those distinct brands — using the theme system — on each course marketing page

This means we're going to cover the following in this open working project content:

1. How to calculate a strategy for new features on an existing project
2. How to find edge cases and dive deeper than “it should be ok”
3. How to fight the urge to implement deceptive patterns and interrupting elements
4. Advice and strategies for working with external partners in terms of discovery, creative ideation and giving and receiving feedback
5. A look at our methods of planning the implementation work, iterating design concepts in the browser and calculating deliverables based on that
6. How we work out the iterations to land on those immediate deliverables and future deliverables with ice boxing
7. Delivering the tangible assets — AKA the website work
8. Testing and quality assurance

You might be thinking “how does all of this other stuff relate to a theming system?”

We’re extremely into core skills — often called “soft skills” — in the studio. Sure, the technical implementation of the project will be heavily weighted in applying a theme, but it’s really important to front-load as much thinking, testing and strategy into the early parts of a project as possible.

What feels like slow, laborious work will save time when it really matters: applying code to the project to make thing thing you’re trying to do, actually happen. By front-loading the project with strategy, we have focused time to calculate what will go wrong, what will be affected and how we’re going to navigate those eventualities. If we try to do that while we’re doing production work, we’ll end up with shortcuts, hacks and // TODO comments littered in our code.

By moving slow, we will go fast.

The timeline and where we are today

We start at Sprint 1 - Planning & creative exploration. Let’s look at where that is in the whole project timeline:

Both upcoming courses are in different phases of the authoring and production work. Both are also in different phases in terms of branding too. Scott — the author of Mindful Design — has already done some fantastic work, creating a strong basis of a brand with their Mindful Design website. Mat has got a completely blank slate for us, so we're starting in two completely different places here.

The first step of this project is to do some discovery work to work out an answer to "how do we get these courses on the same level as each other in terms of branding?". That’s where Jason kicks off his writing in the third post of this project.

That's it for this post though. Next up, we look at what the project landscape looks like right now so we have a good understanding of our starting point.