Voter Communication
PROJECT SUMMARY
USC Annenberg School of Journalism's Center of Communication Leadership and Policy requires a website to host their new report fighting against misinformation and simplifying when, where, and how to vote.
The Voter Communications Task Force is led by former Governors Brian Sandoval (R-NV) and Jack Markell (D-DE), is generously funded by Google through the USC Election Cybersecurity Project.
The Voter Communications Task Force is led by former Governors Brian Sandoval (R-NV) and Jack Markell (D-DE), is generously funded by Google through the USC Election Cybersecurity Project.
Another goal is to integrate the team's mission and values, and synthesize it into a cohesive brand identity that remains non-partisan, accessible, and welcoming.
Web Design | Desktop and Mobile Responsive | WordPress & Elementor | 2021
My Role
My process began with research, competitive analysis and ideation with wireframe sketches, and ended with creating a high-fidelity prototype. I also built the website through WordPress using Elementor Pro. I took leadership with creating the branding + look & feel.
Role: Web Designer
Timeline: 4-6 months (Aug 2020) — (second phase, in 2021)
People: Me, Alyssa Patterson (Project Manager), Susan Goelz (Manager)
Platform: Desktop and Mobile
Skills: Competitive Analysis, Feature Prioritization, Visual Design, Branding, Web Design
The Challenge
In 2020, the COVID-19 pandemic was changing when, where, and how we vote.
More than 500,000 mail ballots were rejected in the primaries, and people are concerned on how to make their votes count.
A record number of registered American voters will have the right to cast their vote from home in November 2020.
But 58% of voters under 35 do not understand what they need to vote by mail.
The Objectives
USC Annenberg needs a website built to host their report that answers questions about how, when, and where to vote.
The website needs to be able to host a lot of information and to digitize their report in certain sections such as their Resources, and Appendix.
They want the brand to remain neutral, modern, yet simple so audiences who are not experienced in technology can navigate it easily.
The website needs to be able to host a lot of information and to digitize their report in certain sections such as their Resources, and Appendix.
They want the brand to remain neutral, modern, yet simple so audiences who are not experienced in technology can navigate it easily.
The Solution
USC Annenberg needed a non-partisan and representative website for their report that can be added onto easily with new information that comes up. I used Elementor Pro and its modular building process to add onto the site as content writers sent me posts, resources, and the report while iterating different features.
Researching different designs, I went with a welcoming, neutral, and modern look while sticking to brand colors of USC Annenberg. As our target audience was on the older side, we had to account for those who are not as technologically savvy or experienced as well, so buttons and call to actions had to be very clear.
Researching different designs, I went with a welcoming, neutral, and modern look while sticking to brand colors of USC Annenberg. As our target audience was on the older side, we had to account for those who are not as technologically savvy or experienced as well, so buttons and call to actions had to be very clear.
. . .
Voter Communication Preview
Clear and simple call to action on both the hero section and navigation bar, with a modern and welcoming visual brand.
Placing resources front and center with a direct link to social media toolkit — assets that people can download and use to share when, where and how to vote.
Interactive geographic USA map where you can see important deadlines and links to when you can vote in every state.
Hosts the USC Annenberg voter communication report clearly and allows for both reading on the site directly or a downloadable PDF.
Key Features
- Hosts USC Annenberg's report & team with the ability to add more resources as they come up
- Responsive and available on mobile
- Clear call to action and a welcoming, modern brand
Competitive Analysis
I examined multiple websites on WordPress and explored different options and features that could be created through Elementor Pro. I learned about what makes a website excel in storytelling with Obama's chapters, and looked up different ways to showcase the report while also creating a spotlight for the Task Force members.
Wireframes & Prototyping
First, I sketched out multiple options for the landing page — then narrowed down with my Project Manager which would make the most sense in terms of storytelling and prioritizing content. I decided that the header should have a call to action, then it would follow with what this site is about and why it is important so our audience has context as to what this website is for.
Next, we have the interactive US Map where users can hover over their state and see the important deadlines for the upcoming election.
Next, we have the interactive US Map where users can hover over their state and see the important deadlines for the upcoming election.
Research and Testing
Being the only designer on the team, most of my research came from asking fellow friends and co-workers to test and navigate through the website. With about 4 users, I learned the branding elicited a positive response. The social media toolkit could be clearer displayed or highlighted on the page. To solve this, I added a banner that would point to it on the home page as well.
I noticed most users would just scroll and not really click much as I watched them navigate through the site. I reported back to my manager and we decided to lay out most of the important things on the first page so it was accessible.
I noticed most users would just scroll and not really click much as I watched them navigate through the site. I reported back to my manager and we decided to lay out most of the important things on the first page so it was accessible.
. . .
Iterations and Additions
After creating the front page, I also worked on all the other pages such as, where the social media toolbox would be and where it would lead to once the users click the banner on the front page. I had to make it stand out from all the other pages and make it accessible at the same time. I also created a clear call to action to download the PDF, but also embedded the file so people who did not want to download the PDF can still view and read through the report. Finally, I also added a three section tab bar that declares the importance of this report, so users know why this website is crucial in hosting something like this.
After this, the next large page in priority was the Resources page. I created this page with the challenge of making sure a lot of information was able to be navigated through simply and intuitively.
The writers in our team had a lot of information in the Appendix and wanted this to be displayed on the website. So I decided on these cards that separated each appendix on its own page, since each section had so much information.
Following this, I created pages for each one that suited the information with it. Many were listed in alphabetical order, so I created a line of letters that anchors the user to the correct section and a back to the top button so they can easily navigate to the desired section without the hassle of scrolling back and forth.
Following this, I created pages for each one that suited the information with it. Many were listed in alphabetical order, so I created a line of letters that anchors the user to the correct section and a back to the top button so they can easily navigate to the desired section without the hassle of scrolling back and forth.
Reflection & Learnings
I learned to focus in on making sure the information architecture and the page structure of the website was clear and can be easily navigated. I also learned that different elements are better suited for different types of information which reminded me of how data visualization works to better enhance how a story can be visually represented.
I learned to be adaptive to making changes on the website on the spot, and that the design process is definitely not a linear one. It requires fluidity and moving through iterating, to drafting, back to iterating, and cranking out high fi designs when time calls for it.
I learned to be adaptive to making changes on the website on the spot, and that the design process is definitely not a linear one. It requires fluidity and moving through iterating, to drafting, back to iterating, and cranking out high fi designs when time calls for it.
Next Steps
I really enjoyed taking the lead on this project and being given the freedom to brand the visual identity and head the creative direction. I loved that I was trusted to do the design work on my own and was given guidance as well as I iterated and made changes.
I think as usual, there could never be enough user testing, and it would have been great to do more research or watch others navigate through the website or in completing a task.
I think as usual, there could never be enough user testing, and it would have been great to do more research or watch others navigate through the website or in completing a task.
