top of page
All In to Vote
Challenge
I was eager to take on this design challenge by creating an eye-catching animated post on social media that motivated newly eligible voters and reminded them to make voting a priority.
Research
Civic Nation
To better understand the overall movement for encouraging young voter participation, I referenced the audience and ideas of Civic Nation's "ALL IN Campus Democracy Challenge". Aiming to improve civic learning for young adults and motivate students to be always politically engaged
Pre Voting Process
Before even voting, many might be unaware of the potential need to keep their voting registration up to date. Between elections, moving to another state, or even within the same state would require you to re-register without being notified.
Audience Disconnect
Being part of this audience that grew up in an online world, it can be difficult for companies to relate or not feel out of touch when using the internet. When done well, companies that engage or are aware of social media trends can often better reach this audience.
Design Approach
Ensuring to stop scrolling users with bold, expressive, and concise reminders. In addition to referencing relatable trends found on social media environments.
Design Directions
Direction 01
Based on a social media trend that photographs various places with a foreground subject held in the same spot each time. Reinforcing the same message no matter where you are in the country. Mimicking abstract forms of State shapes in a collage form.
Direction 02
Combining online voter registration with the physical process of casting your ballot. Encouraging individuals to commit to the entire voting process or to check if they are registered to vote. Using subtle roughness and shadow to create a physical paper-like depth in 2D.
Process
1st Pass Animation
Not seeing the mouse click the email felt like a missing beat before the rest of the animation.
The scale of the small notification icon was too small to see on a phone or social media context.
The type animation felt a bit too stretchy at the full frame rate of 24fps.
2nd Pass Animation
Extra time was given for the mouse to click, as well as adding subtle anticipation and arc to the movement.
As suggested, the notification icon was scaled up, as well as adding bouncing animation as if you had just received a notification. Also bringing more attention to it.
The type was able to be animated on 2s with the text distortion slightly more subtle.
Paper Animation
A shape layer was animated frame by frame on 2s to create specific key poses. The linear path animation is then connected to a slider via expressions. Allowing me to ease the animation without having to change every keyframe. Creating an unfolding paper effect.
Text Distortion
After the paper animation was working well, the text animation is precomped. Then deformed with the use of the Mesh Warp effect. The mesh is keyframe-able and is then parented to the same slider that controls the animation of the paper.
Kenetic Type Dev
The stretching text is animated in similar fashion to the paper with path animation to a slider control. To add some additional overlap, a time displacement effect was used. This distortion is based on the gradient shown below. White = Regular timing, Black = most overlapped.
Final Animation
Mockup
bottom of page