Hero_Image_IssueVoter_website copy.jpg
 
Project details: client, sector, my role, methods and tools, duration and deliverables
 

Project Overview

I was tasked with redesigning the web and mobile landing page for IssueVoter, a nonpartisan platform that empowers American voters to have a direct voice in democracy.

IssueVoter keeps users informed by sending nonpartisan summaries of upcoming bills based on their selected interests. With a single click, users can express their support or opposition, sending their stance directly to their representatives.

The Problem

IssueVoter’s existing landing page was not effectively converting visitors into users. After analyzing the site, I identified three key areas for improvement: clarifying their mission, strengthening their messaging, and creating a greater sense of urgency to drive sign-ups and donations.

 

Existing Landing Page

 
 

My Process

My design process
 

Market Research

Successful landing pages are designed with a deep understanding of their target users’ goals. They prioritize essential information above the fold, structure content to create a sense of urgency around CTAs, and establish trust through consistency, readability, and credibility.

To gain insights into effective strategies, I analyzed similar organizations, including the American Red CrossCenter for Election ScienceCountableFiscalNoteGovTrack.us and Rock the Vote. The American Red Cross, in particular, excels at creating urgency and prompting user engagement.

To synthesize my competitive analysis, I used the SWOT framework to evaluate IssueVoter’s strengths, weaknesses, opportunities, and threats, helping to identify key areas for improvement.

 
 
 

Personas

Through my research, I discovered that IssueVoter's target audience consists of educated professionals who either lack the time to stay informed on key issues or feel overwhelmed by the legislative process. Based on these insights, I developed two proto-personas to better align the design with their specific needs and goals.

 
 

Visual Design

When conceptualizing the landing page redesign, I focused on highlighting the key elements already identified to improve conversion rates: convenience, trustworthiness, nonpartisanship, and urgency.

 

Style guide

I selected highly readable fonts and leveraged the existing professional, patriotic color palette to evoke trustworthiness. Icons were strategically used to clearly highlight the key issues that IssueVoter tracks for its members.

 

Ideate Through Sketching

I started with a "Yes, And" exercise, quickly jotting down all ideas that came to mind. This allowed me to gather a variety of potential solutions.

 

User Tests

IssueVoter’s current landing page does well in attracting users, featuring an "I care about [blank]" statement with rapidly scrolling political issues like gun control and the environment. I aimed to enhance this attention-grabbing feature. To refine it, I surveyed 12 target users to identify the issues they cared about most. Based on the results, I highlighted the top 5 issues at the top of the landing page, ensuring they resonated with the largest segment of users.

 
Screen Shot 2020-09-14 at 5.36.34 PM.png
 
 

Initial Prototypes

Evolution of fidelity

Evolution of fidelity

Final Prototype

I created web and mobile versions of the updated landing pages. Below are the annotated, finalized versions.

(Left) web, (right) mobile

(Left) web, (right) mobile

 

Lessons Learned

In the few seconds you have to capture attention, content must be prioritized. If it doesn’t directly support the call to action, it doesn’t belong on the landing page.

Simplicity is key. Users won’t invest time in lengthy explanations. Successful landing pages convey information concisely, using icons and imagery to complement and enhance text.

 

Next Steps

I’m excited to have contributed to such a meaningful cause. It was a privilege to collaborate with IssueVoter in redesigning their landing page to better attract new users and increase donations. These recommendations will now be handed off to their development team for implementation.

 
 

MedRx

UX Reseracher, UX Designer, Interaction Designer