Green Party Cheltenham

An ongoing project to simplify and improve the path to engagement with the Green Party.

Client

GP Cheltenham

Project Type

UX/UI Redesign

Date

Jul. 2021

Introduction

In volunteering with the Cheltenham branch of the Green Party for the last two years, I created various graphic adverts to use on social media, promoting our local election work and attempting to build up membership. After the success of these campaigns, I was invited in July 2021 to work on the main website for the Cheltenham Green Party (hereafter referred to as GPC).

Please note: this project is ongoing, and at the time of writing has not yet been implemented on GPC's live website, while user testing continues.

Green Party web ad created in 2021

Hypothesis

The brief provided by the GPC calls for me to bring the design closer to the latest standards for a modern political party; help bring up numbers of volunteers in Cheltenham; and make our supporters more aware of current work by the GPC as a community organisation.

In order to achieve this, my initial prototypes will focus on:

· The Home page

· The News page

· The 'Get Involved' page

It is my belief that in doing so, I can exponentially increase both the number of users and the number of meaningful interactions as we progress towards the 2022 campaign.

Phase 1: Research

The research phase is comparatively simple here, as the Green Party has already wisely invested in a style guide for their web and print promotions, and their branding is already consistent across multiple locations across the web.

My choice of competitors is focused around those local branches of the Green Party which have enjoyed both electoral success and effective communication with their voter base, as well as organisations local to Cheltenham who also engage regularly with the community.

Direct Competitors:

• Green Party Bristol

• Green Party Sheffield

• Mid-Suffolk Green Party

Indirect Competitors:

• Clean Air Cheltenham (A local volunteer group focused on air quality and breathability)

• Cheltenham Welcomes Refugees (A local volunteer group focused on helping and housing refugees)

The recommendations I was able to draw for GPC's page was informed by each competitor's prioritising of elements of their respective pages, such as the 'Get Involved' button or a pargraph of information about the party's values. My Competitor Analysis findings can be read in more detail here.

As part of my research I also charted out the 'Red Routes' taken by the GPC's frequent users:

Initial Conclusions

1. Home Page

GPC's home page uses a strong hero section but the image used is outdated, featuring volunteers and a candidate from a few years ago. The design content does not reflect the party and candidates as they are now. The design sense is not intuitive, providing too much information at once, which confuses potential users as to which option they should take - for instance, in the secondary banner menu.

2. News Page

The latest blog posts are correctly organised, with tags, dates and authors. However, unlike most competitors there is no visual element to them (such as stock photos), no organisation of tags/categories, and the author is not properly credited (using a meta-data name rather than their full name).

3. 'Get Involved' Page

The 'Get Involved' page uses a consistently bright visual language but is unfocused overall - the user needs to scroll down to access all the information, and the formatting is inconsistent. Additionally, the hero image lacks a photo.

Phase 2: Ideation

Working from the conclusions drawn in my competitor analysis, I created a quick 'Crazy 8s'-style guide in Invision Freehand to experiment with alternative ways of applying the style revisions I have in mind.

Wireframing 

Based on my previous experience of small business web design and the GPC, I felt confident in moving on to the wireframing stage in this project, with plans to modify my final prototype after a later stage of user testing.

My low-fidelity wireframes, also created with Invision Freehand, are as follows:

1. Home Page

My primary focus in redesigning the homepage is to repurpose the hero section as a scrolling feed of Cheltenham's primary figures and election candidates, since winning local elections is currently one of the highest priorities of the GPC. The page would then prioritise the news feed, a small manifesto about GPC's values and missions, and an expanded footer section. This footer would be a new home for the less immediately necessary banner menu options (reduced to 'News', 'Get Involved', 'Why Vote Green?' and 'Donate'.

I also intend to create a consistency in visual language in terms of menu options - the 'Donate', 'Register to Vote' and 'Get Involved' buttons seen while scrolling down the page will all be in the same bold colour and typeface, allowing them to stand out as the most important options for potential users.

2. News Page

My strategy for the News section is two-pronged. First, the categories/tags need to be given their own dedicated section, anticipating users approaching the news section with specific topics in mind, such as:

·     The policies of a candidate currently running

·     Green Party activities in a particular ward or area

·     Blog posts about specific issues (plastic pollution, air quality, etc.)

Categories would be divided into Category Groups for ease of use, with a search function to provide additional clarity.

Second, the 'news feed' section would now include pictures, categories and author information in a separate box from the initial preview of the news item itself.

3. 'Get Involved' Page

In this design I was most clearly influenced by the Green Party Bristol design, which uses a tabbed system of forms to encompass all the various ways of engaging with the Party and thus prevents unnecessary scrolling. This puts the options prominently at the top of the page and reassures the user that they are all 'equal' - i.e., volunteering is not necessarily better or worse than joining the party.

Phase 3: 'First Draft' Prototypes

At the time of writing, this project is still ongoing, and the mid-fidelity wireframes are available to peruse in the gallery at the bottom of the page. These wireframes expand on my low-fidelity designs in figma, providing a closer design sense to how the final pages will look (such as the usage of different colour grades, line weights, and the Party's signature typefaces).

At this stage I am working on the 'first draft' high-fidelity prototypes, which will be uploaded to this page once finished. Following this will be a process of user testing prior to applying the final design to the live site.

UI Principles Applied

My work on this project adheres to the following design guidelines:

· Hick’s Law

As discussed above, the current GPC pages provided users with too much data and call-to-action points at once. Following Hicks' Law, my immediate concern as a designer is to find ways to reduce the clutter for a more streamlined experience - such as reducing the top menu options to only five links.

· Miller’s Law

Adhering to the need to redesign information into 'chunks' to allow better memory retention and aesthetic usability, I have taken steps across all the pages I focused on for this project. In the Home page I have moved menu options from the header to the footer, grouping them together; in the 'Get Involved' page I have placed the various options under tabs to keep them all in the same place.

· Jacobs Law

As discussed earlier, my initial design work for the GPC is in their social media adverts. Thus, I have had ample experience in keeping our designs closer to that of other branches of the party (as well as communications sent from the central party itself), making use of their style guidelines.

My final prototypes will follow not only the succesful and dynamic elements of the competitors I studied, but also the visual language I established in our social media ads. This will allow for a more comfortable user journey for new followers and volunteers who are drawn to the GPC website from Twitter, Instagram and elsewhere.

· Accessibility

As the colour schemes typically used by the Green Party overall are bright and sunny, with bolded white letters on lighter colours, my design work in creating the final prototypes will include a thorough audit of colour-contrast, readability, usability, and the possiblity of providing a pre-designed 'dark mode' for the site.

Let's Work Together!

Want a quick chat? You can reach me here, or at edjoy.design@icloud.com.

Thanks for getting in touch!
I'll try to reply ASAP :~D
Oops! Something went wrong while submitting the form.