AOC Mockup

The idea for this class project was to create a mockup front page of a website for a political candidate. While it is a mockup and not a functioning webpage, the goal still was to create a page that looked professional and would appeal to the demographic determined. The target demographic I was looking to reach was single, under 35 years old, registered democrat audience.

Date
4.1.20
Project Type
Mockup
Tools
Adobe XD
Scroll Down

The Challenge

The challenge was to encourage users within the target audience to get involved with the political candidate’s campaign through monetary contributions or volunteering. The target demographic is young and relatively politically aware/engaged, so they would be interested in getting acquainted with the political candidate’s vision and target issues before deciding to get involved. So, I created a page that focused on telling the story of why Alexandria Ocasio-Cortez is a candidate they would want to support.

The Design Process

Hero Section

For the hero section, I focused on creating an impactful and clear visual that captured the message behind the political candidate’s campaign. 

Alexandria Ocasio-Cortez had a powerful visual brand when running for house representative in New York, using a very distinct shade of purple on most of her campaign material. I decided to use shades of purple, as well, to remind her base of what she has already accomplished. However, I wanted to introduce a new hue, liberty green, as an indication of change, promise, and furtherance. 

Her profile picture indicates that she is confident, looking ahead in the direction of the liberty green, accompanied by the fitting message “Change takes courage.”


The Issues Section

The second section on the front page displays rectangles with the main issues that are part of AOC’s political platform. 

The “card” layout resembles the posters which are being held by AOC’s supporters in the picture on the right. I designed this section with progressive disclosure in mind, as the user would be able to hover over each of the “cards” and read a sentence or two about each of the issues before clicking the “read more” link.

I prioritized this section as the first one to appear as the user scrolls down because I believe the political candidate’s platform would be of the highest priority for my target audience.

This Campaign is About you Section


As part of the storytelling, I wanted to emphasize the importance of every supporter. 

I believe that allowing the user to see themselves in other’s experiences can make a product/service – and in this case, a campaign – relatable, and therefore more personal. 

In this section, I wanted to showcase relatable opinions that would encourage the user to want to participate and get involved with my political candidate’s campaign, be it through volunteering or donations.


Get Involved Sections


Both sections above are encouraging the users to take action. Volunteering and making donations are the two main calls to action of the site, and I purposefully placed these sections after clarifying my political candidate’s message and platform. 

I believe the “Help Elect AOC” section is successful because it showcases specific ways by which a supporter could get involved.

The “Your Contribution Will Make a Difference” section is the second call to action for donations. I believe this one can be more effective because it clarifies how far the political candidate has gotten and how much monetary support she has had. All while demonstrating that more support is needed to achieve the goal.

Events Section

The events section is the last section of the front page, and I intended to leave on a positive note and indicate to the user that we “would like to see you soon.”

I believe this section is successful because it has a short description of the next event, allowing the user to preview what types of events they could see by clicking the “See all events” button. I also think that the visuals in this section are successful in showing how energetic and inviting an event could be.

Research and Iteration

My target audience is under 35, single, registered democrats with humanities degrees or some college focused on humanities subjects

This was my original wireframe. I ended up adding more sections that I believe had important storytelling elements and more engaging calls to action.
Before and After


I believe that changing the alignment of the text “Change takes courage” increased readability, and adding “AOC for President” clarified the page's purpose. I also think that it was a good idea to remove the rectangle on the left with the text “paid for by Alexandria Ocasio-Cortez.” That information is repeated in the footer, and it was too difficult to read it here.

Before
After

I added the contribution/donation section later in the process and, though I was happy about how the content added to the storytelling of the page, I wasn’t sure about how it looked. After working on the alignment, the content looked more digestible and organized.

After
Before


In summary, I believe this project was successful because I took careful consideration of what my target audience would be looking for when visiting a political candidate’s site.