You are sooooo good! I am really glad you are on my team! Thank you, thank you!
- Katie Riley, candidate for State Representative
http://www.katieriley.org
When I first met Katie Riley, she had an interesting challenge for me. She was already in the middle of campaigning in the Democratic primary to be the candidate for Oregon State Representative of district 29. One of her greatest concerns was being able to reach young voters, especially those who are away at college but still registered to vote at home, who she couldn’t reach with her relentless commitment to knocking on every door in the district. And her web presence was severely lacking.
When I arrived on the scene, her site was in a sorry state. Design-wise, it was disorganized, crammed into a corner of the screen, and no two pages matched. Selecting any page would result in the navigation – and sometimes even the logo – vanishing. And although she hoped to use the web to keep absentee voters up to date on her campaign, there was no effective method of doing so. Nor was there any call to action to be found to spur volunteers or donations.
The campaign had already started. To make a difference, the project had to be fast tracked like never before.
The first thing I did when redesigning Katie’s site was organize her logo, portrait and navigation into a column to trade the old disorganization for a feeling of order and reliability.
To create visual unity, I carried the shapes and colors from her logo throughout the site. For example, the same font that was used for “Katie” in the logo is now the title font for each page. The reds and blues on the page were sampled directly from the colors in the logo. And lists use the same red stars from the logo instead of regular bullet points.
I echoed the block lettering inside the red rectangle in the logo in the two calls to action featured prominently on every page. As you can see, I’ve used the red square with capitol letters in a very similar font. It is the brightest thing on the page to attract the eye to the two things she most wanted a visitor to accomplish while they’re on her site; donating to the campaign, and signing up to keep in touch. Both squares are very visibly interactive when the mouse hovers over them, which encourages clicks, and again there is an echo of part of the star– I chose to only show half the star. Although it could be perceived as showing the star having momentum or traveling off into the future, the main motivation for this choice was that partial objects create more interest and inspire people to investigate more than a full view of an object. It creates a mystery that attracts investigation — which is exactly what we wanted when it came to the calls to action.
Next to the calls to action, I placed a very high contrast box that displays a random quote about Katie and her qualifications each time a new page is loaded. This is an important part of the page because it functions as the online equivalent of a sound bite. It gets those drive by visitors, people who stop by for only a second to see what it’s about but don’t read very deeply. Because it is high contrast and very colorful, it grabs the eye, so that when we have visitors who only read two sentences before leaving, we have a good chance of controlling what those two sentences are. It makes sure that visitors get exactly the message that Katie wants before they leave.
The home page became a blog, handled through WordPress to make updating her constituents a snap for Katie. No more wasted time battling HTML when she could be out knocking on doors and talking to people about the issues that matter.
And although it seems like a small thing until you don’t have it, the navigation in my version of the site is constant across all pages. The current page that you’re on is also shown in red, which will allow someone who is doing a thorough reading of Katie’s positions and qualifications to know at a glance where they are and where to go next to continue in their civic research.
Under the hood, the site’s code was substantially updated for easier maintainability in the future, and standards compliance that will make it easier to access by users with disabilities, people on slow connections, and help boost her search engine rankings.
As a final touch, when viewing the site on a mobile device with a tiny screen, the site automatically reorganizes itself for easier browsing in that environment. The portrait disappears to increase loading speed, the navigation moves from the side of the page to the top, so there’s no wasted space on either side of the screen while someone is trying to read about Katie, and less chance of an accidental touch click. And the call to action moves in toward the logo to increase the odds of being seen and getting even visitors on mobile devices to accomplish the goals Katie set for the site.
Next, Katie has engaged me to assist with her social media campaign. More about that as the election draws near!