ProjectClient: Monica Lewin, Digital Entrepreneur
Website design for www.stopcorygardner.com, a political site designed to empower and educate young people to take action. ProblemWhen learning about local politics, the market is saturated with information. Young people, our target audience and primary users, are driven to take action but overwhelmed with the amount of content. They need a clearer way to identify information tailored to their needs with accessible options for social media influencing and resources to take action.
SolutionUsers need synthesized information within data visualization that prompts a call to action. Users need to be able to self-discover information through curated links, voting registration options, and share content on social media sites. These features would improve web optimization, increasing traction to the site, generating revenue for swag and donations.
|
Research
Research focused on: user interviews, comparative analysis, quantitative and qualitative analysis, journey mapping, personas, iterations, and A/B testing.
My roleI worked as the UX/UI designer, researcher and writer participating in all aspects of the design process: strategy, research, synthesis, copy writing, ideation, design and testing. |
ToolsPaper, Sketch, InVision, Photoshop, Illustrator, Canva, and Promo |
User Interviews: What young people need to understand local politics
Insights: - Minimal text to read - Visuals of people that look like them - Strong infographics - Break down of facts - Provide tool kits for social media sharing |
"I need something that has visuals of people that are like me and hear their points." - interviewee
"Give me an image of how it’s impacting my community for my parents and myself to understand." - interviewee "I want to share what I learned on social media." - interviewee |
User Research: What are the top concerns of our users?
Do young people care about politics?Yes they do. Surveys in 2018 and 2019 indicate: - 40% increase in political involvement in 2018 - 63% said yes to voting in 2018 - 91% said yes to voting in 2020 - 100% surveyed in 2019 gave reasons why they WERE voting that included valuable for the country and a strong motivation to be politically active after the Parkland School shooting. |
What do young people in Colorado care about?
|
User Personas: Julia and Leo
Julia, a junior in college
“Infographics help me quickly understand information, especially when there is a ton to search through!” GOALS: - wants her family to become active with local politics therefore needs a way to explain to them why it is important - find a source that provides quick, easy to understand information on politics - wants a candidate that addresses educational costs, healthcare accessibility and climate change PAIN POINTS: - political websites have large amounts of text to read and can be very confusing - does not like being greeted with a donation request on candidate websites - visuals include people that are not in her demographic, making her feel unwelcome |
Leo, a freshmen in college
“I want to hear viewpoints from other young people and be able to share mine.” GOALS: - hear what other young people are saying about politics - wants to use his social media to be a political influencer - needs a candidate that cares about healthcare, tuition, gun control, and safety PAIN POINTS: - concerned how Trump's policies directly impact his family - political websites contain large blocks of text and he is "not sure where to start researching" - very busy with school, making it challenging to find the time to make social media kits |
Synthesizing the researchBased on user interviews, I focused my research on the top three concerns for young people:
- Education - Cost of living & healthcare - Disapproval of Trump From here I began looking for information to synthesize into infographics for quick, easy learning based on the requests from Leo and Julia. |
Focus on top concerns from usersEducation: Gardner does not mention teachers or the importance of teachers anywhere on his website. Finding this unusual, I explored further and learned that CG voted for the nomination of Betsy Devos, the Secretary of Education who is highly opposed by teachers. Colorado teachers contacted him repeatedly to not vote in favor as his vote was vital for her nomination. Researching further, her family had given him $46,800 in campaign contributions.
Cost of living and healthcare: Gardner has voted repeatedly to repeal the Affordable Care Act, which provides healthcare for 8.5 million Americans, and defund Planned Parenthood. Disapproval of Trump: he has been voting along with Trump 90% of the time, but his average has declined since being up for re-election. |
Sketching: Infographics Iteration
Education Focus
Working with resources from other political campaigns, their research indicated users have negative reactions to money exchanged within politics. I focused my typography on the amount of funds Gardner has received from Betsy Devos. |
Version 1: sketch
|
Version 2: Mid-fidelity
|
Final Version: High Fidelity
|
Disapproval with Trump
Knowing that 73% of users would not vote for a senator that favors withTrump, I focused strongly on this infographic. I used Gardner's average of 90% voting in line with Trump, and kept this as the focus for the visual. From usability tests, this caused concerns with several users. |
Version 1: sketch
|
Version 2: Mid-fidelity
|
Final Version: High Fidelity
|
Healthcare Focus
Leo and Julia's pain points were that they didn't understand how politics impacted their families. This infographic was based on this pain point, and I used 8.5 million Americans as the typography focus because it brings a heavy weight to how many people are enrolled in the Affordable Care Act. |
Version 1: sketch
|
Version 2: sketch
|
Final Version: High Fidelity
|
Synthesizing Site Map & User FlowsOrganizing all of the data, I sketched out the initial flow of the site, prioritizing sections within the navigation.
Navigation design ideas: - What you need to know - Why should you care - Notify me - How to register to vote - Spread the word (be an influencer) - Wanna learn more? Explore on your own. - CO issues that young people care about |
Informational Design Iteration
I began sketching the site as a story, where users would be pulled inward by 'What you need to know.' I combined the navigation design elements of Why Should you Care and What you need to know into one, as it addressed similar issues. As the user scrolls further downward, they would see a section on What You Can Do as the user would feel prompted by this point to take action. Within this section would include registering to vote, social media tool kits and sharing stories.
Iterations: Client check-in
Feedback:
1. Client preferred infographics to scrolling horizontal instead of vertically. We agreed to do A/B testing. 2. Voter registration was added to action items. 3. My initial sketches included three videos about the impact Cory Gardner has on the community. She wanted only one as it could overwhelm the user. 4. She wanted to include links to research within the copy. Based on research found in BuzzFeed and Skim, two popular news sources, providing links for further exploration proved successful. We took this same strategy. |
Tool Kit Creation
Due to 100% of users using social media to learn about politics, I created tool kits for them to use and increase traction to the website.
Mid-Fidelity A/B Testing Insights
I conducted A/B tests on 8-10 users to see which one provided clear information prompting users to take action.
"I'm feeling empowered as I flow through this but feel like it's a lot of copy to read. Can we break it up?" - user feedback
Users preferred to scroll through the infographics but copy was overwhelming. I broke it up into different paragraphs. "I like how I can scroll through this but I'm not as motivated." - user feedback Users preferred to scroll vertically rather than horizontally. "I love the visuals along the side but need to get things done. How can I get to the action part?" - user feedback Added an additional CTA button that jumps to the section on what they can do. |
High Fidelity Wireframes and Interactive Prototypes
Due to 90% of users completing tasks successfully using Version B, I created high fidelity wireframes. Doing another iteration based on user pain points, I included images of young people from a variety of demographics and comments written from other users. Within the footer, I placed the purpose of the site and two CTA buttons to vote and download social media kits.
I completed a final round of usability testing looking for completion of two user flows: 1. Find information to register to vote and share on social media. 2. Find specific information that informs the user about Cory Gardner's actions, that empowers the user to take action. Users were able to complete the tasks with no assistance or questions. |
Continue on Daily UI Challenges.