Uploaded byConnor Turner
Campaigning With WordPress: Design and Story Telling Lessons From The World of Political Web Design.
The document provides insights on effective political web design, emphasizing the importance of professionalism, engaging storytelling, and user-centric strategies to attract voters. Key components include creating a clean website with strong messaging, appealing hero images, and clear calls to action for donations or volunteerism. The author, a seasoned front-end WordPress developer with extensive political experience, shares lessons on achieving impactful designs within tight timelines.
More Related Content
Similar to Campaigning With WordPress: Design and Story Telling Lessons From The World of Political Web Design.
Campaigning With WordPress: Design and Story Telling Lessons From The World of Political Web Design.
- 1. = CAMPAIGNING WITH WORDPRESS CAMPAIGNING WITH WORDPRESS DESIGN AND STORYTELLING LESSONSFROM THE WORLD OF POLITICAL WEB DESIGN. = =
- 2.
- 3. = CAMPAIGNING WITH WORDPRESS • I runArmadillo Studios Inc., and I am a front-end WordPress developer for GROW Wireless. • I have been working with WordPress since 2007. • Volunteer and past Co-organizer with WordCamp Calgary from 2014-2016. • Got involved with Politics after moving to Washington D.C. in 2010. • Spent most of 2010-2012 attending Political conferences and working with NGOs in D.C. WORDPRESS BACKGROUND.
- 4. = CAMPAIGNING WITH WORDPRESS • In 2012,I created AlbertaTweets.ca. An infographic project to track Social Media usage during the 2012 Provincial Election. (Featured on CBC’s Election Night Coverage) • From 2015-Late 2016, I was the volunteer Social Media and Web coordinator for a Provincial Party. • Sat on the Board of Directors, for the above mentioned Provincial Party from 2016 until two-ish months ago. POLITICAL BACKGROUND.
- 5. = CAMPAIGNING WITH WORDPRESS • Built andran 12 campaign web sites for (MLAs, Party Nominees, Municipal Councilors, Provincial Campaigns). • Ran Social Media campaigns for 5 different candidates (Provincial MLAs). • Track record with: POLITICAL BACKGROUND. (PART 2) 3/12 with Web Sites. 3/5 with Social Media.
- 6. = CAMPAIGNING WITH WORDPRESS WHY SHOULD YOUCARE ABOUT POLITICAL WEB DESIGN?
- 7. = CAMPAIGNING WITH WORDPRESS LET ME PUTIT THIS WAY - A CLIENT ASKS YOU TO HELP THEM SELL A PRODUCT ONLINE.
- 8. = CAMPAIGNING WITH WORDPRESS THINK ABOUT WHATYOU’RE SELLING.
- 9. = CAMPAIGNING WITH WORDPRESS • Probably alreadyinterested in your product. • They’ve heard about your product or organization through someone. • Maybe they found your product through Social Marketing. • Or maybe they found you through SEO. WHAT IS YOUR AUDIENCE LIKE?
- 10. = CAMPAIGNING WITH WORDPRESS • You wantto capture people’s attention. • Driving them to follow you on Social Media. • Leave a positive review online. • Maybe order something online and give your client money for a service or physical product. WHAT ARE YOUR WEB SITE GOALS?
- 11.
- 12.
- 13.
- 14. = CAMPAIGNING WITH WORDPRESS • Probably alreadyhas a predetermined idea about your candidate. • They’ve heard about some thing your candidates has done. (hopefully good) • Maybe they found your candidate through social media. • Or if you’re working with a good campaign through Facebook WHAT IS THIS AUDIENCE LIKE?
- 15. = CAMPAIGNING WITH WORDPRESS AND IN ADDITION TOTHE USUAL WEB SITE CONSIDERATIONS …
- 16. = CAMPAIGNING WITH WORDPRESS … THIS WEBSITE NEEDS TO ...
- 17.
- 18.
- 19. = CAMPAIGNING WITH WORDPRESS 3. TELL AMEMORABLE STORY AND EXPLAIN POLICY.
- 20. = CAMPAIGNING WITH WORDPRESS 4. MAKE MEWANT TO DONATE, VOLUNTEER OR ORDER A LAWN SIGN.
- 21.
- 22. = CAMPAIGNING WITH WORDPRESS … YOU ALSOHAVE TO CONVINCE ME TO GO TO A POLLING STATION ...
- 23. = CAMPAIGNING WITH WORDPRESS … TO STANDIN LINE FOR 20-30 MINUTES ...
- 24. = CAMPAIGNING WITH WORDPRESS … ON ARANDOM MONDAY IN OCTOBER ...
- 25. = CAMPAIGNING WITH WORDPRESS … TO MARKAN X BESIDE YOUR CANDIDATE’S NAME ...
- 26. = CAMPAIGNING WITH WORDPRESS … AND NOTTHE OTHER CANDIDATE’S NAME ...
- 27. = CAMPAIGNING WITH WORDPRESS … AND YOURWEB SITE HAS TO DO ALL OF THIS IN LESS THAN 90 SECONDS...
- 28. = CAMPAIGNING WITH WORDPRESS • It needsto built in a third of the time that a web site usually takes. (Typically one-two weeks) • With no discover time. • And a predetermined set of colours and branding. … AND
- 29.
- 30.
- 31. = CAMPAIGNING WITH WORDPRESS KEY INGREDIENTS Action Items!Action Items! Action Items! Repetition of messaging. Invoke a professional and trusting feeling. Memorable and realistic Hero Images.
- 32. = CAMPAIGNING WITH WORDPRESS LET’S TALK ABOUT SASKATCHEWAN {AS ASET OF CASE STUDIES} = =
- 33.
- 34. = CAMPAIGNING WITH WORDPRESS • Clean colourschemes (match the campaign!). • Crisp and attractive Web Fonts (Use google fonts if need be). • Simple and straight to the point wording. • White space. • Spell check the site 5-10 times. PROFESSIONALISM TECHNIQUES
- 35.
- 36.
- 37.
- 38.
- 39. = CAMPAIGNING WITH WORDPRESS • Remember the90 second rule. • Map out your key phrases/talking points. • Repeat them in large fonts. • Highlight them with your campaign colours and provide simple contrast. REPETITION OF MESSAGING
- 40.
- 41.
- 42.
- 43.
- 44. = CAMPAIGNING WITH WORDPRESS • Authentic. • Untraditional. •Engaging. • Show your Candidate in a positive light. • Tied to the community. • Creating a sense of connection with the viewer. HERO IMAGES
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. = CAMPAIGNING WITH WORDPRESS • Continue onthe theme of the campaign. • Attention grabbing, but not a distraction. • Relatable Iconography. • MOST IMPORTANTLY, THIS IS THE WHOLE GOAL OF YOUR SITE. ACTION ITEMS!
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
Editor's Notes
- #2 Thank WordCamp organizers. Thank everyone for coming. Today we’re going to learn about the Wonderful world of Campaign web site design. I’m going to tell you about the difficulties of building of Political Web Sites and the Challenges you face in this niche market 4 key lessons from good Political web design to implement in your own web site design.
- #4 This was a unique time in the political world. It was after the social media revolution that Obama’s campaign ushered in and it was a vibrant time in the political world.
- #5 Alberta Tweets was a WordPress site that I used to post Infographics about the 2012 Provincial election that we created using an Twitter API. The cool thing about it was that it got the attention of media outlets and I was asked by CBC Calgary to come and provide Social Media advice to the panel during the live on-air broadcasting. They wanted to hear some Social media drama the night of the election? Does anyone remember the 2012 election? It was suppose to be this tight race and the results were going to be going online as the Wildrose potentially over threw the PC dynasty? Well that didn’t happen. The PCs were declared a winner in 10 minutes and I had CBC analysts phoning me asking me what was going on in the Social Media world to kill time. My response was noting. Everyone was shocked. That spurred my interest in provincial politics and I got involved with future campaigns.
- #6 Since I got involved with Politics in 2012, I have built. If any one is curious, here’s my track record with “winning” campaigns. So that’s a bit of my street cred in the political world. Now let’s get into the meat of the topic.
- #7 My honest answer is because there is a lot to learn for regular developer and design due to the incredibly ridiculous constraints and challenges that come with designing in the world of politics.
- #8 - What is your process for building a web site for your client?
- #9 - The first thing you do is think about what you’re selling. Start mapping things out based on what the product or service is? Cool local clothing company. Killer pizza from your favourite new restaurant. Supporting Homeless puppies or just puppies in general. Or your building a non-profit site “for the kids”. Fairly typical products for the average web site. They can be exciting and get you energized to do your best work.
- #10 Then you start thinking about the intended audience for the web site. Super positive audience and looking to learn more about your client’s products.
- #11 The last thing is to ask yourself and the client. What are the web site goals?
- #12 This is what we do for a living. Arnie is all like. This is good stuff.
- #13 Now think about how you would sell this guy. Or this lady. Or even this guy? Of course this is Barry Sanders, German Chancellor Angela Merkel and Mayor Nenshi. Neither one of these people are super exciting, they are successful politicians. These are not cute homeless puppies or awesome clothing lines that you love. They are politicians. And most Politicians can be fairly dorky or fairly run of the mill generic.
- #14 The reality of Political web design is that you rarely get to build for someone cool like Joe Biden. So it’s already a difficult task from the start.
- #15 The next step is to think about what is the Audience for this site going to be like? The audience for Political web sites is totally different ball game.
- #16 - And on top of all your usual web site considerations.
- #31 So now that we know about these crazy challenges Political Web Designers face. What makes a good political web site. What can the average web developer or designer Learn from Political web sites? Let’s get into the meat of the topic
- #32 - There are four Key Ingredients that make a great political web site.
- #33 So let’s talk about Saskatchewan, in particular Saskatoon Municipal politics. I know this sounds like the sexiest topic but bear with me here. As a backgrounder last year, Saskatchewan had it’s Municipal elections similar to what Alberta is doing right now. So it’s a really good reference point, because these sites are less than a year old. (And yes as we see some, you’ll be shocked that some of these were built in 2016). I’m also using Saskatchewan’s recent municipal election for two reasons. 1) On average, Municipal web sites are what the average web design will work on. The larger federal parties and provincial parties already have teams dedicated to web design and development. So these examples are far more inline with what the average designer or developer will be working with. And more inline with the local businesses and non-profits you will be working with. 2) I’m also going to poke fun at Saskatchewan to save my skin. I could poke some big holes in the Federal and Provincial parties, but I don’t want to get in trouble with any people I may want to work with in the future. And let’s be honest nobody in this room is from Saskatchewan.
- #34 - First element – A Good Political Web Site needs to invoke a feeling of professionalism and trust!
- #35 Here are some techniques for building professionalism and trust through your design and web site. Nothing is worse in politics than a glaring spelling error!
- #36 This is an example from the 2016 Saskatoon Municipal election. What is your take on this candidate from first look? Out dated? And why is that? Fonts are bland. The gradient looks awkward. The design techniques are from years ago. It doesn’t instill confidence. The photo is awkwardly cropped. There is no relation to the surroundings. The irony is that it is “professional” in that early 2000s way, but it doesn’t give that sense of professionalism and trust when it comes to being a politician.
- #37 Here’s a different example. What are your first impressions of Hilary’s web site. It’s warm. It’s clean. It’s bright. The communities she’s running in are listed right there. The only thing it’s missing is White space. It’s current, yet you can connect to her and feel like she can represent you. - (BTW Hilary did win her race and is the Councilor in Ward 2)
- #38 Again a professional look and feel. The colour balance might be a bit off, but you get the feel for who Sarina is and you get the feeling that she is a professional. It’s easy to read and it’s not an eye sore. (BTW Sarina did win her race and is the Councilor in Ward 8)
- #39 - Second point – repetition of messaging.
- #40 The Big thing to remember is that your audience will spend on average 90s seconds on your campaign site. So you have to on point with your design and messaging. Map out the key phrases and talking points you want to reinforce. Repeat them in large fonts. Highlight them with
- #41 This is from Mark Zielke’s web site who ran in Ward 2 in Saskatoon. He’s the jolly looking guy from the previous slide. Although there are some general issues with his site design (in that it doesn’t look professional enough or convey the same level of trust). The repetition of messaging is great here. Remember your audience will maybe stay on your site for 90 second. There are three things about Mark that we learn really quickly. 1. His name is Mark Zielke. 2. He is running in Ward 2. 3. He loves Stronger communities AND Building Opportunities. Extreme example. But it works. I get who Mark is really quickly.
- #42 This is from Tobi Loopkey who ran in Ward 4 in Saskatoon. Have a look at the messaging on this page. IT’s really all over the map. You have a shout out to Millennial. No image of the candidate. No connection to the candidate. It’s talking about change, but doesn’t get me excited for change. And my favourite part is you have a big box to the right that says Your Vote Matters and the right below it, a link to an article that says “Does Your Vote Really Matter?” So what is it. Does my vote matter? The site is all over the map.
- #43 So this is who won in Ward 4 in Saskatoon. And yes, while the site is a bit of train wreck from a web design standpoint. (Yes those are broken links up above in the top right hand corner) It does reinforce Troy’s message and that is about his “roots” and “growing up”. A quick glance of his content and you get the idea that he LOVES growing up in Saskatoon and will never, ever, ever leave.
- #44 Does everyone know what I mean by Hero Images? Hero Images are large scale, polished images that appear on web sites.
- #45 What makes a good Hero Image for Politicians?
- #46 Two photos from two Saskatoon Mayoral web sites Charlie Clark on the left and Don Atchison (The incumbent mayor) on the right. Which of the two are you more drawn too? Most likely the one on the left. It’s down to earth. It’s engaging. It’s authentic. There’s a random Baby looking at you stealing your soul. The one on right, while a great photo looks like a polished politician. It’s not connected to the community. It looks strange.
- #47 This is from Kelly More’s web site. She also ran for Mayor of Saskatoon. - Even this is a nice touch. Friendly. Warm. Smiling. It’s not a traditional Hero Image but it does connect you to her. It’s big and it’s bold and it draws your eyes.
- #48 This is Charlie Clark’s Welcome Page. (The eventual Mayoral winner and the guy in the first Hero Image slide). What Do You Notice? Yes. No picture of Charlie Clark? It’s of normal every day unpolished people. Even though it’s post election, this is the perfect photo for setting him up for the next election. It’s a thank you post with actual people in it and not self serving. You can relate to everyone in this photo. There’s no polish it’s just real. Look. Even Saskatoon’s own Comic book guy is there. It’s awesome. It’s real and authentic and gives you a connection.
- #49 Okay I lied. I can’t pass up an opportunity with these next two photos. This of course is our PM, Justin Trudeau or as my American friends like to call him Maple Jesus and his family. It comes directly from the Liberal web site on The Leader page. What is the feeling that this invokes? To me this is literally amazing. I look at this and go. Damn I want to have babies. It’s just amazing. It’s literally the perfect family photo. But when you take a step back, think about this photo. How many of you have kids? Or even a dog? How many of you have ever had an afternoon like this in a park? Probably none of you. If this was my family it’d be a picture of me and my wife picking up dog poo in yoga pants. And I can bet that none of you are the Prime Minister of a nation of 35 odd Million people. So when you think about it, it’s a totally unrealistic photo. But it works on so many levels.
- #50 Now this is a photo from the Federal Conservatives Leader web site for Ron Ambrose. Again on a first and quick glance this is a pretty cool photo. But when you unpack it a bit more, it’s actually a pretty hysterical photo. Look at all the people in the photo. There is so many mixed messages in here. You have this really old guy in the back and then you have a bunch of kids all in suit jackets. One kid is posing like he’s going to run in the next election. One girl who’s reading her phone and then another who’s looking of into the distance. It’s a weird photo on so many levels. The least of which is that In all my years of playing beer pong, I have never played it in a suit and tie. But it also kind of works and that because of two things. 1) Rona looks authentic in it. Like there is no denying that she took that shot. 2) The kid in the beige jacket is literally having the time of his life. Seriously what is ever in his ginger ale. I want it!
- #52 -
- #53 Again here’s an example from Kelley Moore who was a mayoral candidate. There are tones of examples of action items. But so many and they are so jarring that it’s hard to focus. You have social media networks, meet Kelley buttons. Where to vote in an abrasive Red and then a weird Need a ride in an odd clip art image. IT’s too much for the eyes and actually takes away from the site.
- #54 Back to Charlie Clark’s web site. On here you have three distinct and easy to read action items with great iconography and colours. A Heart for Volunteering and a Credit card for donating. The colours standout, but they also feel like they are apart of the site.
- #55 Alright one more lie. This time from the Liberal Web Site. (Which I feel like I can highlight again, because it’s a little known fact, but all of the Federal Liberal web sites are run on a WordPress Multi-user site). Again, simple and important Action items. Even with the Red and White colour scheme you have three Green buttons that dry the eye to the most important part of the sites. It makes you want to connect and get involved.
- #56 - So I know you’re probably all bombarded with information, but let’s recap the four key takeaways from Political web sites. - Now that you’ve seen them in action, look at your own web sites for businesses and non-profits and think about how you can improve upon your designs and functionality to improve your interactions.
- #57 - Design your site so creates a feeling of professionalism and trust. You want your customers or donors to feel like you are legitimate.
- #58 - Repetition of messaging. Like Political sites, you only have a short amount of time to get your readers attention so repeat your key message so it leaves an impression.
- #59 - So Big glorious Hero images that are authentic, engaging and memorable. But also don’t distract or take away from your product or Non-profit.
- #60 Last but not least Action Items. The big whole reason you want people to come to your site to interact. Make them fit with the site and create an atmosphere where people want to get involved, buy your product or donate to your non-profit.
- #61 And before I wrap this up, I do want to make one last request. As you’ve seen from my examples, there is a whole lot of bad design in Politics. And one of the biggest complaints (and beefs that I personally have) is that people in Politics are atrocious with technology. Either web design or Social Media. The reason of course is that the people who are hyper engaged with politics are really tech people. But in this room, there are a lot of talented folks that could really lend a hand in the upcoming municipal election and make a big difference on a campaign. So if you are interested reach out to a campaign and get involved. The only way we can improve Politics is by getting involved.