Graphic Designer & Web Developer
voting-desktop-mockup.png

Voting Campaign Case Study

Voting Campaign Website Case Study

 

Voters are more enthusiastic about voting than in any midterm election in over 20 years. Still, millions of Americans will not exercise their right to vote. Young adults, in particular, are less likely than older people to say voting is convenient and exciting. In my personal experience, I’ve always been so busy that researching each candidate and issue, understanding it, and choosing my position seemed almost impossible. That is where this voting campaign comes in! This voting campaign website will make it easier for voters of all ages to find important information about how to vote, where to vote when to vote, and what and who’s on the ballot.

THE CHALLENGE

The objective of this project was to design a website that caught the attention of young voters to encourage them to vote and inform them of all that they need to know to make it easy and simple to vote. I was tasked to design a website that could react responsively to multiple screen sizes including desktop and mobile phones.

Requirements:

  • People should be able to volunteer to help get the vote out.

  • People should be able to check their registration easily, it should be a call to action and be distinguished from other links. When people check their voter registration, they will fill out a form.

  • People should be able to learn about races in their area.

  • They should be able to learn about upcoming important dates.

  • They should be able to learn about important issues to understand.

TARGET AUDIENCE

The target audience is young voters ages 18-29. This may be students or young working professionals. They may not have the time to do their own research or just need the whole process to be more convenient.

DELIVERABLES

Responsive Website Design
Mobile design
User experience interface (UI/UX)


vote for our future

Research & Discovery

In my research, I sought to look for websites that encourage people to vote. I studied them for inspiration and learned about what I could do to improve the experience, especially for young audiences. Here’s a list of websites I studied:

votetexas.gov

vote411.org

rockthevote.org

vote.org

lwv.org

Most of the voting websites, although informative, lacked good user experience or good visual layouts that weren’t distracting. They almost always used the colors red, white, and blue and would probably not catch the attention of younger voters. My ideas for improvement started flowing!

Areas for improvement:

Good, clean layout that isn’t overwhelming.

Better readability

fun, hip, and eye-catching imagery better suited for younger target audiences.

Better user experience overall.

Choosing colors that are more youthful and fun.


 

STYLE TILES

With the following style tiles, I explored color palettes, typography, moods, buttons, and icons to get a better idea of which might work better.

 

Style Tile One

With this style tile, I explored bright youthful colors along with graffiti imagery. The typography for the header has a bit of character yet isn’t too distracting and the body text is a clean sans serif to allow for easy readability.

 
style tile 2

Style Tile Two

With this style tile, I explored bright youthful colors along with graffiti imagery. The typography for the header has a bit of character yet isn’t too distracting and the body text is a clean sans serif to allow for easy readability.


 

WIREFRAMES

Keeping the user experience at the forefront of my mind, I started thinking about the layout of the website. I tried to put information in an easily digestible way while making sure to fulfill all of the requirements of the challenge. I created wireframes for both website and mobile sizes.

 

Desktop View Wireframe (Low-fidelity)

 

Mobile Focused Wireframe (low-fidelity)

 
 

MID-FIDELITY Mockups

Using the wireframe for a website, I was able to include color and typography from my style tiles. I chose the color palette and button styles from style tile one and the typography from style tile two because they had such a versatile font family. I will only show mobile version to save space.

Mobile Focused Mid-Fidelity Mockups

In this mid-fidelity mockup, I brought in typography, color, and powerful imagery. Some of the critiques I received from my peers and teacher include:

  • Extend the banner image to the edge

  • Check the readability of some texts, especially on buttons

  • In the “You Can Help Us Get The Word Out” section, readability is very poor. Perhaps move the image to the top.

  • For “Important Dates to Know,” add colors from the color palette

  • Add a call to action button for checking your voter registration.

In the final mockups, you will see all of these changes implemented

 
 

 

FINAL

After a final peer and teacher review, I was able to refine both my desktop and mobile views. I ensured the spacing, readability, message, and user experience were good. I tested these out with family and friends to make more improvements to the user experience.

 

 

Website Scroll View

 
 

Mobile Focused Scroll View

 
 

voting website color palette

TYPOGRAPHY & COLOR

Display Type & Body: American Black & Light


 

REFLECTION

Creating this voting campaign was a good kind of challenge. It was fun to think about user experience because I feel my old job as a teacher really primed me well for this. As a teacher, by designing the layout of the classroom & flow of the curriculum while also creating lessons that catered to students of all learning levels, I had already trained my mind to think of every and all kinds of users. In this way, I was able to use my past experience to enhance the user experience of responsive websites. It was also fun to create something about promoting voting among young voters since I believe this is a great and important topic.