• Kat Fenton

Interactive Prototype

Spring break is over, it’s time to user test


Over spring break I had the chance to finish up the design for my prototype. While there’s still some problems with the breakpoints, I think the prototype is coming together nicely. You can access it here (this link will hopefully update itself as I make changes to the site so don’t be alarmed when things move around). So let’s start with the updates that I’ve made to the homepage. 


Let’s go from the top down. The menu is adjusted to reflect major changes to the politicians and ballot issues pages. I combined them into one page known as the ‘Know Your Vote’ page and added a calendar page for upcoming elections as well as the about page. After that I removed the headline ‘Know Your Vote’, it’s a bit redundant if its also in the menu and moved the zipcode to be positioned where the hands in my picture are pointing. After that, I switched the black bar to a submit button and further down the page added a button linking to the quiz as well.


The bottom of the page remains relatively the same. I’m still making adjustments to the pages in the footer and I’ve updated the text in Trumps box to be more black. The design looks fine in Sketch but when exported with anima looks a bit fishy in the browser. I’ve also updated some of the language on the home page (specifically the politicians in power).


A big problem I’ve been facing is a large amount of white space in my design. By combining the two items, politicians and ballot issues, I’m solving that problem. I’ll have to iron out the hierarchy a bit more but I think I’m feeling much more comfortable about the direction this is going in. So once again we’ll start with the head menu. I’ve added a block of color to highlight the section that a person is in. I’ve used the same idea in designating positions for politicians. For the menu, I’m debating switching it to a black swatch since it’s currently competing with the State, Federal, and Local as well as the Upcoming and Current buttons. It will be extremely important to separate these to eliminate confusion amongst my users.


Behind the color bars for each position, I’ve also added a slight white gradient to further the separation between rows. For the people that have no picture, I’m using a standard flat vector portrait. I’m thinking about including more of the person and switching the background to grey so that it ties in more closely with the image on the home page of the site. I’ve also toned down the outline surround the section and removed the underlines from the Federal and State designations. They’re tertiary in the hierarchy and shouldn’t draw so much attention. I’m still working out how color will play into the issues section.


I don’t want to downplay the issues but currently I think it might be too difficult to come up with imagery for some of the more abstract ideas. Under the current tab, I do plan to keep an issues section. It will contain recently passed issues or new laws ordered from newest to oldest. Currently, I am organizing my politicians (when there are multiple in a category) by alphabetical order. I feel like this is a good way to prevent bias when choosing someone to view. Now on to the politicians profiles.


One of the main updates I’ve made to the containers for photography on my site was switching them to be rectangular or square. This is mainly due to the fact that I want the containers to be consistent throughout the site (aka brand guides). I update the politicians on the home page to also be in square containers. From there, I switched my header to be right justified and contain color blocking as well as the candidates party icon as added texture and a more fun element. I’m still working out ways to incorporate color into the lower portion of the page but expect it will come in the form of icons.


Fun Fact: Those social media buttons work

As with many of my other pages, I felt like there was too much white space in the original version of this page. To resolve this, I’m making the sections interchangeable. For people who don’t have a lot of information on their stances or background, these can be stacked. If someone is extremely opinionated and thorough, this section can stand alone. The sections will still be divided by the grid, but the movability of them will hopefully create a new flow that prevents the user from getting bored as they change pages.


Obviously here you can tell that I’m experimenting with the color bar in the menu. While I originally thought it might be a good idea to have a different color for each section, I’m beginning to think that may be too much. Like I stated in the near the start of this post, black might be better for the menu. Now for the question portion. I’m keeping the colors fairly minimal here. I tested out adding in red and green for the for and against text but couldn’t find a color that quite matched my palette. I decided instead to use a color block for the issue number and then make the slider selection a more prominent grey. I think I want to experiment with adding in some people to this portion to see if they add depth.


Another idea I thought about was using the political party icons as ‘confetti’. This is something DJ mentioned last time we met. It might be a good textural element to add as it would draw the eye without being overbearing. It’s something that I’ll have to play with in the upcoming week. I’ve not yet completed the upcoming elections calendar or the about page. They are however linked in the prototype and should be updated soon.


Now we can jump back a bit. I’ve been instructed several times to revisit my logo and much to my chagrin, I finally have. I took out the star in one sample, and removed the line as well in the second. I have to say I actually really do prefer the second iteration. I might further it a bit more by reducing the line weight of politics even further. However, I’ll have to check out the readability of this on a small scale further down the line.


To wrap up this post, I’ve had some further thoughts on how I can make this project really successful. My other professor, Julia, has been pressing me to think about how I can further my branding for the show and I think social media might be the answer. Specifically instagram, as it reaches my original audience and allows for a more visual approach to marketing. I’d like to set aside some time to set up an account and create some simple posts for my site. Here’s some thoughts I’ve had for those:


  • Politicians are people too (or are they?!) — Lizardmen

  • No mudslinging, no fake news, no avoiding the question.

  • Do you know your vote?

  • Featured politicians.


While I still feel behind, I think I’m really making progress and at the very least I’ve got the wheels turning. My goals for next week include fleshing out the prototype and beginning user testing. If I have the time, I’ll put together a few sample posts for things I’d like to put up on instagram.

Kat Fenton | Cincinnati, OH | fentonke@mail.uc.edu

  • Grey Facebook Icon
  • Grey Pinterest Icon
  • Grey Instagram Icon

Kathryn Fenton