Redesigning Rory Stewart’s 2020 Campaign for London Mayor

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.

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 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 London’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. 

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

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

We’re exploring ways to use the skyline to tie things together in this specific example.

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

Logo Design Draft #2

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

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

We applied the brighter “Union Jack” color scheme to the earlier “skyline” concept. 

It was becoming clear that this design direction would not work despite various approaches. 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 in smaller sizes.

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.

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

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

As we entered the final round, I wanted to achieve two goals: to refine the concepts in our existing direction and make one last effort to try 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 create a higher degree of visual distinction between this concept and the “roundel” while still subconsciously evoking the familiar symbol.

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 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 I wanted to share them here in the interest of transparency.

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 pretty proud of how it turned out.

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.

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 on a larger scale. Had I attempted to fit the logo (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 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 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, which 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.

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, Britain postponed the 2020 elections 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 use these tools — and hopeful that he will prevail on Election Day.