Welcome to the first open working project! We’re starting up with something simple.

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 solvepermalink

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 systempermalink

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 todaypermalink

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.