Posted on 15 August 2021 / 4 minutes to read
Applying a design system to a constellation of sites
At ReedPop we're midway through a massive task -- creating a single platform that powers all of our editorial websites.
One of the more interesting philosophical problems with this type of project relates to the appropriate use of design systems.
My opinion of design systems is largely positive but they have become a type of low-hanging fruit in recent years. It's increasingly rare that you encounter a website that doesn't have some form of design system or component based templating system. Or people who want to talk about them. Add me to the list.
Here's something we're dealing with. What happens if you need a design system that powers not just one website, but an entire constellation of them?
Normally that's fine as you'll be applying the same design and branding systems across a host of sites that power a single brand or entity. They are a network of sites in service of a single brand. They speak in the same tone, and ultimately you'll be looking to apply a consistent look and feel across every site you're applying your brand system to.
But what if your design system needs to be applied across a series of sites of the same class (i.e. a portfolio of editorial sites), and each site has their own distinct brand voice?
You'll encounter a few colliding constraints:
- You'll want to take advantage of the efficiency gains in having a design system to reduce the amount of repeated work you do on common items like page layouts and components
- But you won't want all of the websites to end up looking the same
So what to do?
The trained eye can spot editorial sites that stem from the same design system. There are companies out there that have a collection of sites that have an identikit look and feel. The Kinja powered sites or SBNation are a good example of that type of thing.
Does it matter if two sites which produce different content look the same? I think it depends on the overlap of their audiences.
If there is a strong audience overlap between the sites then I think it makes sense to avoid creating sites that have an identical look and feel. People will soon make the connection that the two sites are related, and the danger is that people will feel -- either consciously or not -- that the two sites are interchangeable. You will start to commodify your own product.
In order for the sites or your organisation to not be self-commodifying you may want sites A and B must be unique in every way, shape, and form. Distinct layouts, information architecture, functionality, the works. This means they can sell themselves as being unique and something that stands alone in the market. This is all well and good if you have resources to burn, but there's a lot of repeated effort to exert with this approach.
The biggest downside of this approach is that ultimately one layout will be better than the other. I believe there are optimal layouts and information architecture decisions for a given class of site. And choosing to have sites that deviate from the optimum for the sake of brand difference doesn't make sense to me. Why produce something inferior in the name of uniqueness?
These positives and negatives are something that a good product manager will be able to negotiate.
Given all of the above, here's what we're doing:
- Creating a design system where common building blocks of editorial web-pages have standardised, best practise layouts. This means from site-to-site there is a common language for how the sites function and behave and that each site benefits from optimal layouts.
- Creating enough room within our branding systems to meaningfully adjust the look of the sites so that they don't feel cookie-cutter.
The important bit here though is that we're not themeing sites by only adjusting typefaces and colours. We're using layouts as a framework for what-should-go-where, but then painting over the top of that layout with flourishes and expressive changes that reinforce the site's branding in artful ways. But the key thing is not to have to start again or reset an entire layout.
There is always a balance to strike between being a layout and usability purist, allowing designers to be expressive, keeping engineering efforts efficient, giving editorial team a unique brand to work under, and giving readers memorable experience. I think we're on the right path with recent efforts like Rock Paper Shotgun, Cosplay Central, Dicebreaker, and the soon to be launched new version of VG247.