Make Electionday.org a thoughtfully branded, responsive website that helps it stand out as a trusted source of information on paid time off to vote for companies and individuals alike.
Create and organize content based on clear audiences and create branding that serves those audiences.
A fully responsive website with new branding that showcased Electionday.org’s purpose, targeted audiences and included room for newly developed content. Prototype available here.
UX/UI Design, Branding, Content
Vote.org
100 million+ voting-eligible people in the United States did not vote in the 2016 election and 35% of nonvoters say that scheduling conflicts with work or school kept them from getting to the polls. Less than half of states require some form of paid time off for voting, and in the absence of federal and state leadership on this issue, it is up to individual companies to step up and provide paid time off so people can get to the polls.
For this project, I worked with the Director of Partnerships at Vote.org on a redesign of their Electionday.org initiative website. Electionday.org is an initiative of Vote.org and was conceived to serve two main purposes: one, to be a space where CEOs and other company leadership could go to learn why and how to provide paid time off for voting for their employees; and two, to see which other companies were already doing this.
The website for Electionday.org currently exists online but does not provide the functionality that Vote.org would like.
Leading up to the 2020 Presidential election, I was excited to work on something so applicable, but that would also be important post-election.
After the initial conversation with the client to establish the project guidelines, I conducted a more in-depth content analysis with her to discuss the overall vision for the site. My goals for the project came out of these conversations. I would create a responsive website (desktop, tablet and mobile) for Electionday.org that covers the following core features:
We set up communications channels and established a weekly meeting time where I could present my work from that week and get approval from the client.
I focused the initial research for this project on a landscape analysis. I chose not to do user interviews at this stage because of the narrow focus of the project and the fact that I was not creating the concept or the content for this site. The client was more interested in information architecture and visual design, so I put more effort into user testing later in the project timeline.
I researched ten organizations, with additional research related to SEO of the various sites, and information on racial inequities in voting times. I looked at the homepage and navigation content, user journey/experience to find resources, user interface and design patterns, tone of voice, colors and logo.
Compiling all the information, I came up with the following insights and “how might we” statements to guide the design:
The most impactful design used a mix of color and photography to invoke a feeling of energy into the campaign, impress upon the user the importance of the issue.
Sites that have to do with voting tend to use red, white and blue color schemes but not exclusively.
How might we use iconography and imagery to elevate the Electionday.org message?
How might we use the psychology of color and typography to convey the importance of this campaign?
Successful designs used both statistics and persuasive copy to motivate action.
The homepage can be used both as a way to sell the initiative and to provide info to direct users where to go.
Sites directed at mobilizing companies highlighted other companies involved very prominently.
How might we update the copy on Electionday.org to better motivate action?
How might we reorganize the landing page to provide a succinct and useful overview of the initiative?
How might we better highlight company partnerships and successes to create engagement?
I sketched and digitized the first iteration of the sitemap based on my conversations with the client and the landscape analysis.
I added the “For employers” and “For individuals” pages to address the problem of a split audience. With this change, the structure of the site would clearly address each audience and direct them to the appropriate pages on the site.
I presented my research findings and sitemap to the client and one of the developers from Vote.org in our first of four weekly meetings. I wanted to meet with the developer early in the process in order to build a site that is functional and usable to the client and understand what is possible for them. I wanted to get buy-in from the engineering team and establish rapport so I could do the best possible job for them and make sure I was aligned with their goals for the site.
After this meeting, the client already used one of my suggestions to update the existing website: adding that Electionday.org was an initiative of Vote.org to the landing page so users would know who was behind the initiative.
I sketched out three versions of the landing page to take a look at different versions of hierarchy and content. This helped to flesh out the sitemap and make sure I had all the content I needed before beginning wireframes.
One of the challenging aspects of this project was that Vote.org was not going to build this site until after the 2020 presidential election. They were extremely busy with other projects up until the election and would not have time to work on this design update until then. In addition, they had plans to create toolkits and better materials for the site but again, were not going to work on them until after the election. So, we decided that I would build a more robust version of the site with this new design, even if the pieces on their end weren’t fully developed yet. It would be easier to take out the sections of the site that weren’t ready yet, rather than add them into the design later.
I created the desktop version of my wireframes with this in mind. I created an interactive prototype in Figma to show the client how the functionality would work. I showed it to her in our weekly meeting and got sign-off that I had the right structure so far and could begin testing the wireframe prototype with users.
Full wireframe desktop prototype available here.
I tested the wireframes with five users to see whether my redesigned Electionday.org site was organized in a usable and coherent way, with easily navigable content in expected places.
I used Zoom with screen share to conduct remote usability testing (due to the COVID-19 pandemic). I organized my results using an affinity map to assess patterns and next steps.
Overall, testers felt the site was clear, user-friendly and easy to navigate and the text felt motivating to them. Some favorite sections were the display of logos, the “what companies can do” section, and the stories—these clearly communicated the goals of the site and were impactful and motivating.
There was room for improvement on the clarity of the initiative, especially in the top of the landing page, or hero section. In addition, the main call to action (CTA) button of “Join us” was confusing and users did not know what to expect when they clicked it. I made sure to address these two issues in the final designs. I also tested two versions of the “Add company” form and found that the one-page version was more successful, but it required section headings for easier use.
I also created responsive versions of important screens for the wireframes to get sign off on how the responsive features would work on different sections of the site.
I had the client conduct a branding exercise to get a sense of what she envisioned for the brand of the site. With this information, I created three style tiles that showcased different brand directions that I could present to the client.
The client decided on option number two for the branding direction. I explained how the design was paying homage to voting rights movements of the past, incorporating the powerful typographic elements from the Civil Rights Movement protest signs and the stark black and white from the suffragettes. We discussed how the yellow color set Electionday.org apart from the landscape, given that most voting-related websites tend to be red, white and blue. And because Vote.org, and therefore Electionday.org, is a nonpartisan effort, yellow is a way to be upbeat and dynamic without falling into the same pattern of using purple to connote nonpartisanship like many others.
I conducted a second round of usability testing with five users via Zoom to test the new design and the updates to the site structure and navigation. I specifically tested two versions of the landing page with a pop-up modal vs. an embedded feature where users could select their state to find out the paid time off to vote policy in their own state.
In general, the users felt positively about the design:
There was still a bit of clarification needed on the audience and CTA, so I updated the landing page to include two calls to action instead of one in the top hero section. I added one button “For employers” and one “For individuals”. This will allow users of the site to see quickly and clearly the information that is specifically directed at them. This was one of the main goals of the design of the website from the beginning.
Along with these changes, I also decided to convert my design into an atomic design system that would be easier for the Vote.org developers to use when they build the site. Because the content is not yet finalized, it will make it easier for them to create and modify sections of the site to fit their future needs. This took a lot of time but it was a great learning experience on the importance of designing with components. I’ll be more equipped to use atomic design in the future—and use it earlier in the process to save myself the time of converting everything after the designs are finalized.
I also created responsive versions of key pages so the developer will know how to adapt the design for different size devices going forward.
The full desktop prototype is available here.
The next steps for this project are to continue to work with the client and the developers at Vote.org to build this into a live site. It is up to Vote.org to choose which sections they feel they need when they put it up, and they’ll have the more robust designs that I created to use in the future when they build out those tools.
Overall, this was such a great project for me. I am passionate about voting rights and was excited about the opportunity to work with a client on a project that felt so meaningful. Voter suppression is a very real and deeply unjust issue in this country and the work continues to fight for everyone to be able to have their voices heard.
Getting to design not only the website but also the branding from scratch was a large task but very fulfilling. I’m looking forward to similar projects in the future!
