Design discovery for this project was deliberately fairly light. We want to move fast, and iteratively. Traditional waterfall design approaches require extensive upfront discovery work because you only get one shot at getting it right. Whereas working iteratively allows you to keep discovery lightweight, based on what you know right now, and course correct with each iteration. The key is making sure the iterations are small enough to not veer too far off course, and to be continually in a process of discovery.

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 matterspermalink

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 flexibilitypermalink

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

Wireframespermalink

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.