ivotify

 

OVERVIEW // ROLE

A responsive web app that simplifies politics for disengaged citizens so that they can vote informed and learn about upcoming elections through an interactive data visualization experience.

ivotify.com

I contributed in all facets of the design of the product and am currently the sole designer of our team.

 - User Research
 - Wireframes & User Flows
 - Information Architecture & Language
 - Rapid Prototyping (Paper/Marvel/Pixate/Principle)
 - Visual & Interaction Design
 - User Testing

 
IMG_1155.JPG

PROBLEM // GOAL

THE PROBLEM

The low voter turnout in the United States compared to other developed countries in the world, especially in the millennial age group, indicates that there are social and cultural barriers that lead them to be jaded voters that are disengaged and make excuses to not participate.

The real underlying problem is that voters don't feel that the media is trustworthy or in their best interest to objectively inform them of which candidate they align closest with on issues they care about most.

OUR GOAL

Create a responsive web app with a delightful experience through curated content, fun interactions, and a beautiful interface that counters the widespread stigmas that politics is boring and confusing.

We wanted our content to be clear and simple, yet informative and most importantly objective to engage even the least politically versed.

 
IMG_1335.JPG

CONSTRAINTS

As a very early stage startup, our resources are rather limited to a tight budget and a core team of 3 members (product manager, developer, and designer).

Alex Dinari (our developer, left) and I are at REACH NeXT a pitching event in Downtown LA holding it down at our demo booth.

 

USERS

TARGET USERS

Millennials that are politically disengaged are our target users as their track record for voting has been declining compared than other age groups (41.2% in the 2012 election).

The main problem disengaged millennials shared with us in our interviews was that politics could never seem purely objective and trustworthy. This is not problematic to just the millennial population, but to many Americans in general.

USER BEHAVIOR AND LIFESTYLE

Looking at the technology that is in the hands of millennials on a daily basis, ivotify is meeting them at their convenience in accessing the election information quickly and concisely so that they can stay informed without investing valuable time in their busy schedules.

Some routines and behaviors we're hoping to change and solve are for our users to not feel enticed or obligated to click and read through editorialized articles that pop up on their news/twitter feed. Headlines often are written with bias and mislead users to believe they will receive factual content. Instead, users can know that ivotify exists for them when looking to be informed about the most relevant political issues and where each candidate stands on them.

 

DESIGN PROCESS // DISCOVERY

Early on our team decided that we should validate some assumptions about our users.

  1. Users wanted to know which candidates actually shared the same political views as them.
  2. Users are frustrated with current offerings of political information from mainstream media, particularly the presidential campaign process.
  3. Users often feel not informed enough about candidates and political issues and claim that as their reason to not vote.

By validating these assumptions we were able to see #2 was the most problematic for users to guide our prioritization of our build. We began with a simple candidate matching quiz to gauge public interest through running some Facebook ads.

After validating this assumption, we moved onto ideating solutions of how users will consume political information in a less serious and more playful experience. Traditionally, users read through political information on articles from news sources with language only friendly to those that are familiar to the political realm.

LEARNINGS:

Through our research and empathy mapping, we decided that a visual experience was the unique difference that would bring value to our users.

Infographics were part of our inspiration of how to design information to be a pleasing experience, yet we could go a step further by implementing user data to make it dynamic and interactive.

 

DESIGN PROCESS // CONCEPTING: SKETCHES & WIREFRAMES

Above are some examples of sketches to ideate the user flow which became a paper prototype for some guerilla testing.

I wanted to get feedback navigation between candidate and issue pages without requiring users to go through the hamburger menu, but still making it available.

I also felt that a side swipe between issues and candidates would be delightful for browsing purposes and not needing to go back and select a new issue or candidate to view.

The clickable prototype can be found here: https://marvelapp.com/ca8h11

LEARNINGS:

User testing proved to us that the jumping navigation from issue to candidate page was too unconventional and rather confusing for users. We scraped that idea and decided to stick with a bottom menu navigation, which was much more of a familiar experience as seen on most native mobile apps. It was a worthy shot,  maybe it can come back in a future iteration once users are familiar with the heavy interactive experience we're trying to roll out.

This particular interaction needed more affordances for users to know that this navigation feature is available. Much of the feedback we received in the guerilla testing was that users expect to access content when tapping the circles rather than navigating to a different page.

 

DESIGN PROCESS // CONCEPTING: UI & INTERACTION DESIGN

Since we were designing mobile first, our goal was to maximize the touch and drag interaction mobile has over desktop. As our icons were in circular form, I thought that it'd be fun and playful for the user to drag these circles around to trigger content to animate.

From the user tests, many responded positively that it was something they hadn't expected, especially from a political app. This was validation that this is the type of experience we were going for. Removing the feeling of "work" when learning about political issues and presidential candidates was one goals we wanted users to have when using our app. Interaction over consumption was the driving goal.

In this initial visual design, I collaborated with another designer Alexandra Stapleton.  

 

DESIGN PROCESS // ITERATION

MOVING FORWARD

Accessing simple and clear content was a main user goal that we wanted everyone to experience early on and so I designed a simple feed of quotes from different candidates on each issue. This allowed us to test our language and content with users. We also wanted to get feedback on the layout and navigation experience between issue and candidate pages.

Building out our candidate match quiz and data visualization platform had to be pushed off for later since building those out would take much longer.

The feedback we got after launching our first version to friends and family was that the content on the site was still rather overwhelming. 

The problem of condensing political information to be simple and concise is much harder than it sounds. We ran into several instances where we had to keep refining our content draft after draft and this took a good amount of time.

REVISIONS

In the desktop mockup above we implemented issue outlines on the left navigation bar for a lighter experience to address the overwhelming feeling. The user can then click MORE to read the full summary if they wish to dive deeper.  

For the candidate quotes we implemented an accordion experience that expands each candidate and individual quotes themselves. This was to give users the choice to select what they want to view, without forcing them to see everything all at once.

 

DESIGN PROCESS // ITERATION

NEXT STEPS

Our first MVP was just a 10 question quiz that gave users a somewhat accurate candidate match that we advertised on facebook. After 1 month we had about 6000 people take our quiz with a 8% average click through rate. We knew that this was a key value to our users so we're on our way to build this in our next iteration. 

We had much difficulty designing the quiz to be more accurate than our first MVP quiz and we wanted users to interact with our content first as we refined our quiz logic.

It was a difficult wait of holding off on building out our quiz, but we wanted to make sure it was designed correctly. It's exciting to know that it's right around the corner.

The GIF shows a user flow of answering a question and then getting their top candidate match results.

 

DESIGN PROCESS // ITERATION

MONETIZATION MATTERS

Since our app is free to users, our business model is based on a 3 tier subscription model that will offer anonymous aggregated data from our platform.  Campaign managers and other research teams want significant and accurate data of people's opinions and sentiments.

ivotify's monetization model is designed to compete with other polling groups' data collection, but leveraging the web and mobile market over the antiquated model of traditional cold calling.

INTERACTIVE DATA ANALYSIS

This mock of our dashboard is designed to provide customers access to our visual data analysis of user inputs. The dashboard was designed with the intention to be as interactive and immersive as possible so that campaign managers or research teams can strategize their next moves based upon live data results.

On this screen the Demographics menu (left) allows the researcher to filter and customize the specific demographic group they're polling. This will directly affect both the Live Update and Position Analysis panels to reveal the data based on the specified demographic group.

The Live Update panel allows the researcher to see geographic distributions on National, State, and District levels with the current candidate matches for those users. This provides insight leading up to election day of which candidates are likely to receive those votes in those areas.

The Position Analysis panel is a visual breakdown of each issue and the users' responses from the quiz. Depending upon the demographic and geographic criteria, the graphs will adjust to show that specific user group's beliefs on each issue.

Using Gun Control as an example, some users would support stricter gun laws across the nation, while others would like to maintain freedom from government regulation over ownership of guns.

 

LEARNINGS

Continuous feedback from users has been the most helpful lesson in this experience. There's so many instances where I would get sucked into thinking through my design decisions, but by just asking others of their thoughts would help me get thru mental roadblocks much quicker.

Since our user personas are still generally broad (politically engaged & disengaged millennials) there could be still a significant variable that we haven't defined which would lead to more specific user experiences that need to be designed for.

Designing for responsive web was much more challenging that I had imagined. There are a lot of details to consider about spacing and sizing of text when going between mobile, tablet, and desktop. Communicating closely with Alex our developer was key as we worked side by side on polishing the front-end.

FOR THE FUTURE

Overall, this being my first and major product I was designing for, I am happy with where the product is at currently. I've learned a lot about how to work within the lean ux and agile methodologies that I hope to implement to my other projects. The focus on building what's most valuable for the user first requires me to listen to user feedback deeply and often.