Piccalilli is evolving into a more ambitious publisher and a big part of that is a brand refresh and full visual redesign. It’s a very large iteration of a longer term roadmap for the site which we’re undertaking here at Set Studio.
I thought it would be a good idea to give you a peek behind the curtain at our process. It’s a rare treat for us because everything we do is so often under a non-disclosure agreement. Our design process has evolved considerably recently too, so I want to demonstrate how using the right tools at the right time is super effective.
Where we were at the start of this iterationpermalink
We’ve done a lot of discovery and planning work internally. It’s quite loose — admittedly — but we’re trying to follow the same process as we do for clients. A silo’d discovery phase is mandatory for projects at the studio to make sure everything is accounted for and planned for. Sure, it’s never perfect, but it focuses clients on what it is the thing they want actually does.
The discovery for Piccalilli has been done in a less formal and often piecemeal fashion, focused on the following areas:
- Evolving the brand from my blog to an independent, respected publication
- Re-focusing Piccalilli as a publisher of extremely high quality content that is relevant for folks working in the real world, on real projects
- Publishing authors from across the industry with vast and elite-level experience
- Evolving the site’s look and feel to a proper editorial style that hyper focuses on the best possible reading experience
- Expanding Piccalilli’s offering with premium courses, written by industry experts
- Setting Piccalilli as a trusted, dependable source of knowledge
Before this iteration, we’ve replatformed the site to Astro and have already done a bit of a UI refresh. You can read more about that process here.
The first sprint of the design processpermalink
We don’t do pictures of websites in the studio, but instead break down the design process into seven distinct phases, split over two sprints. The deliverable is a collection of HTML, CSS and (some) JS disposable prototypes and UI documentation that is then used to inform a focused, production process.
We’ve been burned a lot by spending too much time in Figma during client projects so we’ve evolved this process to try to avoid that as much as possible.
Everything in the design process is also completely disposable. It gives us the freedom to experiment and work at an incredibly fast pace as a unit. We’re lucky in the studio that we have a multidisciplinary team, but this process can work for very specific design a dev teams too. Let’s break it down.
Sprint onepermalink
The aim of the game in the first design sprint is answering “what is going on each page/page type, what is the priority of the content and what vibe are we going for?”. We have three phases in this first sprint:
Priority guides
If you haven’t already, I urge you to read Priority Guides: A Content-First Alternative to Wireframes.
The aim for a priority guide is to focus solely on content strategy in a low-fidelity wireframe-like context. As the above article suggests, this can be in any format, whether in Figma, post it notes or our preference: web-based.
This is part of a whole web-based system we have developed for the design process. It is in itself, a deployable, accessible website which houses all the deliverables. Each client has their own home page, which links to relevant sections.
This then leads to navigation pages for priority guides and prototypes. Sticking with prototypes for now, we did three for this iteration of the redesign: home, about and author pages. In future iterations for example, we will expand to course templates and sponsorship pages.
Let’s look in more detail at the homepage priority guide with this little scroll-through.
We’ve got the site header in here too, which we’ll redact from other pages. It’s important to start on the homepage because although we often build that last, you want to look at the most important stuff while there’s the most energy left in the project.
It’s also the most important page because if a user lands here, it’s very likely they’re coming in cold, so you need to very quickly inform them what you’re all about and why you’re trustworthy, in our case.
One benefit of priority guides is it forces you to think in sectional-based design, which in turn, often results in much better, concise content. A priority guide also forces to you to think about UI elements and affordances at an abstract level which usually simplifies the visually designed interface. A win-win!
Lastly, even though we’re reduced in scope for this redesign iteration, we need to think about the future at all points. It’s why we’re thinking about promotion of courses, sponsorship and even merch. It’s better to work out the long term balance when you’re in such low fidelity than trying to strap that stuff on later down the line. Sure, those phases will revisit priority guides, but thinking further than the end of your nose is never a bad thing.
Creative ideation and design research
This is the fun part! At this point the priority guides are locked in, so we’re safe to think about visual design. The creative ideation process is abstract, meaning we’re not necessarily doing page design work here. Instead, we’re doing:
- Mood boards which pull together design inspiration for the directions we want to explore
- Typography and colour exploration
- Some loose look and feel concepts that start to feel like pages, but with a sharp focus on visual elements
The mood board is supposed to be quick and rough. You want to be exploring ideas at speed, making annotations as you go.
As you can see, for us, we have three conceptual directions:
- Classy punk editorial
- Grown-up alternative editorial
- Bold industrial editorial
With those in mind, we find examples of what we like and bring it all together. We’ll also create areas for typographic work we like, graphic and illustration work we like and colours.
After mood boards, we move on to focused typographic exploration. This is especially important in the Piccalilli redesign because we want to create the best possible reading experience. I put only one red line in this process: I wanted us to use serifs — ideally Georgia — for body copy. Hell, design agency founders can be tricky clients too!
With that in place, we broke each typographic exploration into a display font (headings), an accent font (subheadings, lede) and a base font (body). Lots of calls happen in this phase too. In our case, our designers were getting a temperature check from me on font combinations. The end goal is to settle on ideally one, but at worst, a couple of options.
Once we’ve settled on a combination of fonts, we then move on to typographic scales — in our case two, which we’ll cover more on in the future. We calculate leading (line height), spacing and in this case, some solid colour design tokens too and present them in easy to understand documentation for designers and developers alike.
Next up, we’ll start playing in Figma with some concepts. In the case of Piccalilli it made sense to think about the site header, hero units and some general prose content. The aim of the game is to test different look and feel variations of our agreed creative direction here to further refine it before moving on to the next phase.
Prototypes
At this point, we’ve done loads of creative in Figma, so it’s time to expand into page designs. We start with a very quick pass in Figma.
This is immediately followed by HTML and CSS prototypes. No matter what your favourite design tool adds as functionality, you simply cannot visualise a web design until it is an actual website. It’s also a hell of a lot quicker to iterate in the browser than back-and-forth between Figma and the browser.
It’s really important to remind you again that this work is 100% disposable, so we write pretty junk CSS. We’ll get the semantics right in HTML because there’s absolutely no benefit to recreating what the browser gives you for free with <div> soup. What we want to solely focus on is speed at this point because we know we’re gonna change everything anyway.
We don’t let ourselves get attached until we’re happy with the direction. We certainly don’t get attached to the code because we know the production phase will be where we build a solid codebase and pattern library.
We go back to our web-based system at this point and create relevant prototypes.
In our case, a page that documents colour, contrast, fonts, leading, type scales, and the space scale is the first port of call. These are the foundations of the design, so we build them first. It’s also an opportunity to test stuff like our colour palette and type scale for accessibility.
From there, we build pieces of the UI and stack it all on top of each other. We wanna see how things actually look in the browser at this point. For example, we wanted to play with red background hero units, but the text contrast on meta info like date and author wasn’t up to scratch, even though technically that colour combination is WCAG AA compliant.
With those pieces in place, we start to build out real-life web pages. For example, this one is the articles listing page.
We deliberately build dark mode as a separate URL so it’s easier for folks to see the two side-by-side and provide specific feedback. It’s all powered by the theming system we’ve used on recent client projects.
There’s no point building a theme toggle at this point. The focus is purely on HTML and CSS to create and iterate on a UI design as quick as possible. We’ll sort the theme toggle in the production phase.
We also account for future stuff in this phase. For example, there’s a search bar, but that’s not happening in this phase. We just want to calculate where the search affordances are positioned for balance. The same goes for a message regarding sponsorship.
We’re also utilising Vercel’s branch deployments at this point so we can comment on the UI. It works pretty darn well! It’s certainly easier to track than Figma comments because at this point, we are all working in the browser.
On this page type, I could quickly leave a comment about layout, which we can then have a wider discussion about. Folks can then quickly iterate the ideas, right in the browser.
Wrapping uppermalink
That’s where we’re at: first sprint of the design process done. In the next post, we’ll look at the second design sprint and see where we’ve ended up.
If you like what you see already about this process and are looking for an agency partner, get in touch. We’d love to speak to you.