Redesigning Rory Stewart’s 2020 Campaign for London Mayor

Rory Stewart is a former Member of Parliament and independent candidate for Mayor of London. (Photo Credit: Rory for London)
Rory Stewart is a former Member of Parliament and independent candidate for Mayor of London. (Photo Credit: Rory for London)

In early January 2020, I kicked off one of the most exciting projects I’ve worked on in a long time: a redesign of both the website and the overall brand identity for Rory Stewart’s campaign for Mayor of London.

Less than one month later, we brought it online. 

In this post, I’ll walk through the project from start to finish and give you a sense of why I’m so proud of the work.

The Pre-Project Status Quo

The screenshot below is how Rory’s website looked at the start of the project.

Screenshot: Rory Stewart’s Pre-Launch Homepage
Screenshot: Rory Stewart’s Pre-Hines Digital Homepage (January 2020)

His NationBuilder theme was functional and versatile, but the overall branding didn’t reflect his personality or the campaign’s focus.

My mandate was to redesign the branding from the ground up, and then to use the new branding to create a simplified and streamlined NationBuilder theme that differentiated Rory from his primary competitors: Incumbent Mayor Sadiq Khan & Conservative candidate Shaun Bailey.

The Branding Design

I started the logo design process by providing the campaign with a seven-page branding and messaging brief in the form of a Google Doc. The goal was to provide a structured way for the campaign team to share their thinking and insight into Rory’s unique personality and tone. 

From that brief, I was able to distill my direction to a few key points:

  • Rory is an independent candidate, not beholden to any party. His branding should reflect that independence and avoid any visual cues that could unintentionally convey partisan affiliation. 
  • His branding should be unifying — conveying imagery that would appeal equally to Londoners from all walks of life and each of the city’s diverse communities.
  • Rory focuses on meeting voters at the doors, on the streets, and especially around tube stations and other places where our voters are likely to be. The brand needed to convey that grassroots focus. 

With this feedback in hand, I synced up with my graphic design partners and started working through the design process.

Round #1: Exploring Initial Concepts

To start, we wanted to explore the soft colors used by the City of London. So, we mocked up several logo variations using the color palette described in the city’s brand guidelines. 

Logo Design Draft #1

In this specific example, we’re exploring ways to use the skyline to tie things together.

Logo Design Draft #1
Logo Design Draft #1

While the soft colors work for the government’s branding, they felt too weak for our purposes. Moreover, the skyline felt (possibly) exclusionary. Downtown London, while iconic, is not the whole of London.

Logo Design Draft #2

Separately, we wanted to explore the idea of evoking the London Tube as a sort of unifying brand, underscoring the campaign’s grassroots “tube stop” approach to campaigning.

Logo Design Draft #2
Logo Design Draft #2

We liked this vibe, but it has glaring issues — not least of which is Transport for London’s strict trademark of the Tube’s “roundel.” Still, it was a good exercise in design exploration.

Round #2: Applying Lessons & Refining Direction

Logo Design Draft #3

Here, we applied the brighter “Union Jack” color scheme to the earlier “skyline” concept. 

Logo Design Draft #3
Logo Design Draft #3

The “Union Jack” colors were a positive change, but this design did not address our earlier concerns about using the downtown skyline. I also had concerns about how the vectorized skyline outline would look at smaller sizes. It was becoming clear that despite various approaches, this design direction would not work.

Logo Design Draft #4

With the below mockup, the goal was to re-imagine the Transport for London “roundel” as an explicit campaign logo. I hoped that we could evoke the spirit of the roundel while also respecting its trademark.

Logo Design Draft #4
Logo Design Draft #4

I felt that this was a solid direction, but even with the changes, it was still too close to the Tube’s trademark for my comfort.

Round #3: Making Sure We Weren’t Tunnel-Visioned

As we entered the final round, I wanted to achieve two goals: refine the concepts in our existing direction, and make one last effort at trying something new.

It was vital that we were confident that we hadn’t gotten “tunnel-visioned” and inadvertently ignored potentially great ideas.

Logo Design Draft #5

Because we felt strongly about the tube-inspired direction but wanted to respect Transport for London’s brand, we decided to explore more related design approaches.

The slanted text and narrower circle in the design below helped to create a higher degree of visual distinction between this concept and the “roundel,” while still subconsciously evoking the familiar symbol.

Logo Design Draft #5
Logo Design Draft #5

Looking at this mockup, I couldn’t help but think we were close! Feedback around this concept was positive all around, but before we locked in on it, we wanted to try one more push into new, unexplored territory to make sure we weren’t missing anything.

Logo Design Drafts #6–8

As part of that last gut-check moment, we generated a lot of new ideas in this final round. Ultimately, we didn’t choose to progress with them, but in the interest of transparency, I wanted to share them here.

Logo Design Draft #6
Logo Design Draft #6
Logo Design Draft #7
Logo Design Draft #7
Logo Design Draft #8
Logo Design Draft #8

 

I’m glad we took the time to check our assumptions and explore additional ideas, but we were definitely on the right track with our initial direction. 

The Final Version

In the end, we settled on the logo below. I’m quite proud of how it turned out.

Logo Design, Final Version
Logo Design, Final Version

To get there, we took Draft #5, darkened and reversed the colors, and removed the background color from behind “Rory.” 

The result, I feel, is a brand that evokes the Tube — and as a result, feels authentically like London — without infringing on its brand.

The Website Design

The next challenge was to develop a NationBuilder website theme that felt like a natural extension of Rory’s brand.

To that end, I made a few decisions that I think help define the design of this NationBuilder theme:

  1. The static, left-aligned navigation;
  2. The ubiquitous use of the typeface “P22 Underground;” and
  3. The emphasis on action, and mainly offline events, in the design.

Before I dive into how each of these elements affected the design, here’s a quick look at how the homepage would look to you if you visited it on a standard laptop.

Screenshot: Rory Stewart’s Redesigned Homepage
Screenshot: Rory Stewart’s Redesigned Homepage (February 2020)

Now, let’s talk about the distinct design elements of the theme.

The Left-Aligned Navbar

When the site launched, the thing people commented to me about the most was the left-aligned navigation. 

Frankly, left-aligned navigation isn’t something you see a lot on the modern web. But in this case, I thought it was appropriate.

From a brand-management perspective, the vertical navigation allowed me to display the logo at a larger scale. Had I attempted to fit the logo (which is roughly square-shaped) into a traditional top nav, I would have had to shrink significantly — and no client wants their logo smaller.

From a usability perspective, having the sidebar fixed on desktop screens keeps the navigation always-visible, increasing the likelihood that visitors will browse around. 

But most importantly, from a design perspective, the left-aligned navigation stood out as different — and for a candidate that’s trying to differentiate from the establishment candidates in the race, different is good. 

The P22 Underground Typeface

Typographically, I set the whole site in P22 Underground.

It’s a typeface that I’ve never used, and I may well never use it again.

But for this project, it was perfect.

P22 Underground mirrors the same design principles as Johnston, the official typeface of the London Underground. It’s a dead-ringer for Johnston — which is good because you cannot use Johnston without a license from Transport for London. 

For a Londoner, P22 Underground immediately feels like London, and that was our goal.

An Emphasis On Offline Action

Rory Stewart is, at his core, a man of action. And from the outset, our goal was to convey that in the design of his website.

To that end, offline event RSVP pages formed a core component of the site’s content and design.

Screenshot: An Event RSVP Page
Screenshot: A Rory Stewart Event RSVP Page

These pages feature large, static Google Maps depicting the event location (instead of a featured photo). Using Google Maps Static Images served as a quickly-scalable way to create event pages with relevant (non-repetitive) imagery that conveyed offline action.

The Bottom Line

Helping redesign the branding and website for Rory Stewart’s mayoral campaign was a dream project. His team was clear about their goals, needs, and expectations, and they gave me the latitude I needed to do my job well.

Unfortunately, the planned 2020 elections are postponed until 2021 amid the evolving coronavirus outbreak. As a result, we won’t know for some time whether Rory’s campaign will prove successful. But I am eager to see how his team continues to make use of these tools — and hopeful that he will prevail on Election Day.

Note: Since 2013, I have worked as a consultant & website designer, helping leaders to effectively navigate the intersection of politics & technology. If you’re interested in working together on an upcoming project, please get in touch by visiting hines.digital/contact.