We set out to redesign an existing human focussed non-profit organization’s website in order to make much needed improvements. My team chose the League of Women Voters Austin Area because we were intrigued by the challenge and excited about their mission. Through user research, meetings with stakeholders, design, and testing we were able to deliver mobile and desktop prototypes that the League was excited to bring to life.
MY ROLEs
UX/UI Designer,
UX Researcher
Conducted exploratory user interviews, collaborated on research synthesis and persona creation, illustrated storyboard, sketched lo-fi wireframes, created mid-fi, wireframes, conducted user testing, designed style guide, collaborated to create hi-fi prototypes in Figma
Duration
4 weeks, April - May 2020
TEam
David Ciccocioppo, Lindsay Smith, Nick Pugliese,
Sunny Willams
Tools
Mirro, Whimsical, Figma, Illustrator, PhotoShop
Background
The League of Women Voters Austin Area, an inclusive and non-partisan political organization, encourages the informed and active participation of citizens in government and influences public policy through education and advocacy.
Though women make up a large percentage of voters, their voices in politics are underrepresented. The League of Women Voters Austin Area website provides a platform for women in the Austin community to disseminate non-partisan information that is beneficial to all voters. Therefore, we want to help redesign the site to be efficient and appealing in communicating this information in order to encourage more voters in the community to make informed decisions.
The Problem
The League of Women Voters Austin Area website needs to provide easier access to valuable unbiased facts about local political elections. We believe this will increase the dissemination of important information that ultimately leads to more educated voters.
The Solution
Research current needs, goals, and pain points of the League of Women Voters–Austin Area and visitors of their website to generate user insights. Use these insights to redesign their website to clarify the mission and purpose of the site, including education of voters, volunteer opportunities, and new member sign ups.
Empathize/Research
We wanted to assess the current League of Women Austin Area website and discover what pain points users have in accessing the important voting information the League provides.
We talked to several politically active women who vote to learn about how they research candidates and form their voting decisions. What we heard is that they are all very busy with work and personal responsibilities, and that they would like to be better informed about their voting choices, but they simply don't have the time. They end up only making time for high profile national and state races and rarely have time to research or even be aware of all the local and down ballot races and issues.
We also talked to stakeholders at the League of Women Voters Austin Area to hear their perspective and learn what would make our redesign a success for their organization. Over three interviews with members of the League, a 1:1 with the current president, and two group interviews with additional members, some of our main takeaways were:
- They have a strong desire for a more modern, streamlined website
- The League’s goals of “Registration, Education & Participation” could be used as a theme
- They want to attract a more diverse membership base
- The Voter’s Guide is the main traffic driver
- They want to organize the information on the website to be more thorough and easier to understand so they won’t have as many incoming emails
Definition Phase
With the tremendous amount of user insights we were able to compile, our affinity diagram identified consistent critiques of the site. Fixing the lack of a modern design aesthetic and confusing navigation were going to be our focus because we felt this would help attract and retain a broader range of users to the site.
Our Persona
Working mom, Alison Aldridge, needs to efficiently access unbiased information about local elections, because she doesn’t have much personal downtime to do research, but she wants to be responsible and educated in her voting decisions.
How might we improve the League of Woman Voters Austin Area website so that concerned citizens get the unbiased information they are looking for quickly so they can vote with confidence?
Ideation
In order to visualize Allison’s successful outcome in greater detail, we crafted a storyboard of her ideal experience.
Reimagining the Information Architecture
In order to simplify the navigation and call greater attention the features most needed by our users, we conducted a content inventory site audit, and a card sort, and reorganized all of the content on the site. Because the existing site was so dated and built on an old WordPress template, we felt the need to add items to the primary navigation creating more manageable chunks of content.
Task Flow
Here’s where things got a little weird... The League of Women Voters is probably most well known for their comprehensive Voter Guides which they historically printed and mailed to voters, handed out at polling places, or stuffed in newspapers. Obviously the problem is that these guides can be massive and not mobile friendly. For the Austin Area’s most recent election their Voters Guide was a massive 22 page pdf with zero white space, and included all candidates for all precincts which mades it hard for the reader to know exactly who was on the ballot.
The good news is the The League of Women Voters also operates a website called Vote411.org which is a much more user friendly digital experience. Voters simply need to enter their home address into a form to see exactly who and what will be on their ballot along with information to help them decide and vote.
Our primary task would be to get the user to the Vote411.org experience via a widget on the League of Women Voters website which would allow them to access the info they need without being directed to an entirely different site. We made this decision rather than recommend they reconfigure their pdf voters guide because as our stakeholders agreed—there was no reason to reinvent the wheel.
Prototype
Based on our research, and a redesigned sitemap we began sketching wireframes that focused on solving the following key pain points observed on the current site. Our redesign would need to include:
- Clear navigation
- A better sense of who the local league is (their identity)
- A look and feel that is more visually dynamic
- Better defined hierarchy
- More intuitive Voters Guide experience
Once we aligned on a direction for the home page and navigation we built mid fidelity wireframes for testing. Specifically we were looking for top level feedback on our redesigned navigation, hierarchy of the home page, and the voters guide experience among other tasks.
Testing
Here are some key findings from our mid-fidelity prototype testing.
- Some of the text and image sizes needed to be adjusted. In particular, titles were too large and the smallest body copy was too small to read on both desktop and mobile.
- The desktop prototype needed a home button rather than just the linked logo. Some users were unable to navigate to the home page. Mobile home page had some hierarchy issues with buttons.
- More explanation was needed for the vote411 widget. Users were confused at first and did not want to enter their address.
Following user testing we developed a UI style Guide. Our stakeholders were able to provide a pdf of the League of Women Voters National brand standards which gave us very clear direction on font choices, the color palette, and photography usage. They advised us to adhere to the brand standards as much as possible, but also mentioned that we shouldn’t feel entirely tied down by it. We chose to lean on the purples and golds of the palette rather than the red, white and blue aesthetic of the current site. We felt this use of color would appeal to a younger and more diverse audience.
We tested our hi-fidelity prototypes and iterated in the following areas:
- The voters guide widget needed to be legitimized by having the explanation copy above the widget rather than inside. Additionally, the “Explore Now” button confused users and many scrolled past it.
- Some users felt the information about the voters guide and Vote411 should be at the top of the home page rather than below the three pillar cards.
- Overall, the body copy font was just slightly too small, and some users commented that they would have a hard time reading it, especially on mobile.
Takeaways
One of the challenges we faced was the limitations on the direction we could go style-wise as the League already has a strict brand guide of their own. However, we feel our design gave the Austin Area chapter a differentiated personality while still meeting brand standards.
The most difficult part of this project was reigning ourselves in on the number of pages and depth to which we wanted to build the prototype. Had we more time, we would have liked to build out the about page in order to showcase the personality and mission of the League of Women Voters Austin Area as that was commented on frequently during initial user testing.
Additionally, due to the time constraints, we were unable to do more research after meeting with stakeholders. Had we more time, we would have liked to interview and test a wider range of users in addition to the current user base and those most likely to vote in order to develop multiple diverse user personas.