Stuff & Nonsense product and website design

The Green Party website could be better at promoting their policies, so I imagined how that could be done

There are less than two weeks before election day, and most of the headlines have come about from things the party leaders have said on the various TV debates. Out of nowhere, Prime Minister Rish! told young people he might take away their driving licences if they refused his national service. Keir Starmer was pushed on his supporting Jeremy Corbyn but not Arsenal, which is an even bigger character flaw. Ed Davey said, well, actually, I can’t remember anything Ed Davey said. But the person I’ve been most impressed with is Carla Denyer, the teeny-tiny confident co-leader of the Green Party.

Talking to some younger voters, there’s a lot of support for the Greens. Not enough for them to form a government, obviously, but perhaps enough for them to increase their number of seats. Given their appeal to younger voters looking for a more radical agenda than the main parties are offering, I wondered if the Green Party website design was as interesting. Spoiler alert: It isn’t. Which made me imagine what I’d make if Carla came calling.

What’s up with the Green Party’s current design? Besides the poor typography and poorly laid-out content, their website suffers from the same problems as every other political party I’ve studied. It doesn’t make it obvious what the Green Party stands for, their policies, and why people should vote for them. For that, a potential voter has to dig down two levels, past a manifesto opening page filled with subdued stock shots but not much else, before being faced with uninspiring and poorly typeset policy pages.

Green Party website, June 24th 2024

How would I fix this? I’d start by working on their content, organising it into an obvious typographic and visual hierarchy. Then, I’d use a hierarchical grid layout to focus the eye on key messages and their associated calls to action. Finally, I’d develop a distinctive visual identity with a simplified colour palette as their current design inexplicably includes not one, not two, but five different greens.

Five different greens

I decided to replace their messy mix of greens with a new hue, backed by white and a dark base colour. Their current website uses full black, but instead, I opted for a softer dark colour, which reduces the contrast between inverted backgrounds and white text.

Colour palette transformation

The Green’s designers chose to use a combination of two free-to-use fonts, Bebas Neue and Manrope, both of which are available from Google Fonts. Bebas Neue is a condensed sans-serif. It’s a good typeface and one I’ve experimented with several times. But it’s never made it into one of my finished designs. I wanted a typeface that maintains Bebas Neue’s confident feel but has more character and flexibility. In the end, I chose Barlow Condensed, which is also available from Google Fonts.

Typeface iteration. Bebas Neue to Barlow Condensed

A variety of weights, from the very lightest to the boldest and blackest, often influences my choice of typeface. Whereas Bebas Neue is available only in one weight, Barlow Condensed offers a wider variety of weights. For example, this helps to make its smaller sizes more legible by using semibold instead of bold for button text.

Typeface iteration. Barlow Condensed weights

One of my biggest problems with websites from all the parties battling this election, including The Green Party’s, is they don’t inspire people to vote for them by making their policies plain to see. The Greens voter journey starts on their home page, which does not include even one of their policies. Someone needs to scroll past the ubiquitous full-width banner—almost as tall as Carla Denyer—past the introduction, past the latest news, and past not one but two slogan panels before they’ll find a link to the manifesto.

Green Party website, June 24th 2024

Once on the manifesto page—with its own full-width banner—and below a badly typeset introduction by the party’s co-leaders is a grid of items containing subdued stock shots and policy titles, which are links to individual policy pages.

Green Party website, June 24th 2024

To reduce the number of pages a potential voter needs to navigate to see the party’s policies, I selected six of the strongest policy areas and brought them to my transformed home page. I cherry-picked the most eye-catching facts, figures, and statements for each area and typeset them using the new Barlow Condensed typeface. The single green also lets me make more of my new super-sized numerals.

Design transformation

Not everyone wants to be faced with long blocks of text, so to give people more information about a specific policy, I turned each policy promise into an anchor that opens a stylish new modal containing a little more detail plus a link to the full policy information.

Design transformation

These modal windows could be a fabulous opportunity to introduce graphic elements, including charts or graphs, which are styled to suit The Green Party’s visual identity.

Design transformation

Nothing communicates complex information as effectively as a graphic, so this imagined redesign could include more graphical elements which reinforce The Green Party’s messaging.

Design transformation

Having said, not everyone wants to be faced with long blocks of text; there are situations where they’re exactly what’s required, and party policies sometimes need lengthy explanations which need careful handling to be easily understood. The Green Party’s policy pages include long lines of text with awkward paragraph spacing. They also lack supporting visual elements which help someone understand content quickly.

Green Party website, June 24th 2024

With the goal of improving readability, I shortened the lines of text by narrowing the content column. Then, I swapped a plain unordered list for a grid layout before finally introducing graphical typography elements which make their content comprehensible at a glance.

Design transformation

As I said in each of my design transformations, this redesign is me imagining what I’d make if the Greens came calling. I have no insight into their messaging or strategy. I haven’t had to consider what may or may not be possible with their CMS, and I don’t have to answer to anyone if my assumptions are wrong. Still, I enjoyed spending some time imagining, and I’m pleased with the outcome.

Design transformation

Carla, Adrian, if you’d like help with your design in the last weeks of the campaign, I have the time.

Written by Andy Clarke who tagged this with design, politics

Would you like advice and inspiration on making better designs for the web?

Every two weeks you’ll get design inspiration and insights on how to improve your design. View some recent emails, sign up today, and get:

    I promise never to share your email and you can unsubscribe with just one click.

    Get a free set of Layout Love grid templates if you sign up today.

    Hire me. I’m available for coaching and to work on design projects.