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.

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, Prototyping, Visual Design, Branding, Web Design

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.
.   .   .
Voter Communication Preview
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.
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 7 users, I learned what worked — the branding was simple, cohesive, and modern. The report could be clearer displayed or highlighted on the page. To solve this, I added a banner that would point to the report 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.
.   .   .
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.
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.
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.

Explore More Projects

Back to Top