A personal project on politics: Swing Quote v.0

Last Monday I presented my final project for a 10-week part-time Front-End Web Development (FEWD) course I just completed through General Assembly in NYC. (Whoohoo!) Along with picking up a much stronger, practiced understanding of HTML, CSS, JavaScript and responsive web development, I wanted to dedicate this time towards creating something personally meaningful and different from the kind of web work I do professionally.

Fueled up by the current presidential election campaigning, I felt inspired to create something educational that challenges this space based on a problem consistently experienced during political conversations: automatically closing our minds to certain candidates or policies due to preconceived perceptions of that candidate or their party. From this problem, I’ve designed and developed a preliminary version of what I am calling Swing Quote.

Product Summary

  • PRODUCT: Political website titled “Swing Quote”
  • VISION: Help young Americans use self-discovery to better identify which 2016 presidential candidates’ views resonate with their own stances on various political issues, even if previously unimagined.
  • USER OUTCOMES: Desire to become more aware, informed, decisive and confident about who they should consider being open to voting for in the 2016 presidential election.
  • ACTION: Users should engage with candidates’ true stances on issues without the misguidance of political jargon or party-based preconceptions in order to help form their own realizations.

Design Principles

  • SIMPLICITY: Light-­touch, minimalist aesthetic; Straight-­forward actions
  • CHOICE: User-driven discovery
  • SHOCK: Immediate feedback exposing the unknown; Meaningful content planning focused on common misconceptions
  • EDUCATION: Inclusiveness of diverse views and issues; Provide access to additional information and context
  • CURRENCY: Include up-to-date information; Content planning primarily focused on current campaigns
  • EFFICIENCY: Eliminate extra steps or burdens; Utilize automated processes and data integration; Limit number of choices to choose from, and maintain consistent formats
  • FRIENDLINESS: Warm, welcoming language and tone; Communicate with colloquial language; Creative use of visuals

Inspiration & Competitive Landscape

I spent a little time checking out sites about presidential candidates, existing political quiz websites and apps, along with other interactive learning experiences outside of politics. I drew from strengths and weaknesses for features, visual style, content strategy, and interaction design that could set this experience apart in an advantageous way.

inspiration

(Oh, please don’t snoop around my other Pinterest boards…that’s embarrassing).

Let’s not talk about how awesome Presinder is for essentially already doing this idea but in a way smarter way by pulling their content from candidates’ Twitter accounts -_- (…This competitor was SO upsetting to come across since it was so close to my idea. However, it helped me focus my concept more on the deliberate use of content planning, added value of comparing results, emphasis of web exploration, and ability for users to contribute quotes they’d like to see included).

Feature Set

The initial feature set captured the core functionality I envisioned, noting usability needs that I felt were requirements along with additional enhancements that I was hoping to reach. Overall, given the timeframe and learning curve, I ended up skipping two features that were not essential to the core user experience, but integrating a fair amount of the reach enhancements to add a little delight to the primary features.

features

Wireframes

These are the initial wireframe designs that capture the page template layouts, content types, functionality, states, and UI components. These evolved during development…

wireframe-intro

INTRO: I ended up adding a global footer to help frame the page and serve as navigation to additional features that were added later. Also added two buttons to those features, but kept the quotes exploration as the primary CTA.

wireframe-prompt

PROMPT: A quote presented to the user prior to exposing the affiliated party/candidate. Users are prompted to agree or disagree.

wireframe-feedback

FEEDBACK: The second state of a quote is revealed after the user agrees or disagrees, exposing who said it, what party they’re from, access to the citation, ability to share, results of all respondents, and a button to continue to the next quote.

Content Planning

Here’s an excerpt of what the content planning looked like. Since I had this idea early on, I was able to spend a few months gathering quotes from different candidates. (It actually was a great way to force myself to stay informed of all candidates). The biggest challenge was finding short-but-substantial quotes. Most of the short soundbytes are not very unique to one candidate’s particular point-of-view or policies, and those are exactly the kinds of quotes that I believe mislead Americans; this site is about focusing on more substantial, informative quotes, which is why this tedious content planning exercise plays such a critical role.

contentplanning
Swing Quote v.0

Not only did I learn tons of coding and mobile-first responsive design approaches in this process, but I also learned how much time and delicacy good development takes. I will admit, this project was re-coded from scratch one week before the deadline, mainly thanks to figuring out smarter ways to control my layout with FlexBox and manage my data with objects and arrays.

SO, with the time I had, I can present the incomplete and buggy alpha of Swing Quote!

swingquote-home

Swing Quote v.0: Evaluation

While I did not accomplish nearly what I set out to design and development for this project, I am very happy to report that the concept has been validated thus far! Walking through the quiz demo with my classmates, the final presentation was full of shocking “gotchya!” moments that left my classmates stunned by the candidate reveals and following up with lots of the hypothesized behavior, like wanting to see the source of information (which can be toggled with the info icon button).

Similarly, I’ve had friends and co-workers use the site then say things like, “You know, I think I might be a Republican and didn’t know it,” or, “I don’t know if I want to vote for Ben Carson anymore,” etc. This is exactly the kind of impact I was hoping to accomplish: making a self-determined, surprising discovery strong enough to consider reexamining and further researching one’s choice of presidential candidates — and hopefully in a more open way. Perhaps it can also expose us to more common ground than we realize we have with one another, regardless of the party tag.

Swing Quote v.0: Next Steps & Priority Fixes

Receiving this kind of feedback and witnessing its impact is really psyching me up! I was starting to give up on this effort before, but now I think it might be worth taking it more seriously. I’ll just need to fix the bugs, finish out the experience design, implement more content, build the features that didn’t make this version, improve the visual design, and actually host this with a domain instead of from my github.

bug-mobile

YIKES.

There is SO much work that would need to be done. Here are the starters…

1) I’ve got to fix whatever the heck I broke that makes mobile load like this. Literally unusable. Thank goodness this was not a real project!

2) I also need an end to the experience. Once the array runs out of content to inject into the template, you just cycle through semi-populated templates. It probably should direct users to the submission form so that they feel invited to become part of growing this experience by being presented with the option to submit more quotes. This is something I’ll have to feel out more from people who test out this site, though. One person mentioned wanting a results algorithm that tells them who to vote for based on all their responses, but I’d be worried about accuracy and fairness, and concerned about violating the core design principles and self-exploratory purpose of this site :\

3) In the feedback state, there needs to be emphasis on whether the user agreed or disagreed with the quote. The shock of this reveal truly is the most impactful aspect of this experience, so this is where much more attention and play into emotions is needed. Hoping to do a little A/B testing on some ideas to see what makes the most impact without crossing the line of being too in-your-face…

swingquote-reveal

4) I need to build the Compare Results feature, probably using HighCharts, which I’ve been exposed to and researched before when working with developers in past work projects.

5) Prooooobably related to #2, but gotta fix this bug that makes long text overlap with other elements and overflow out of the container. I’ve diagnosed that it’s related to some FlexBox and vertically-centered-text changes I made way too last-minute, but I have not yet been able to debug it without changing the design. Box, I will make you fit the text.

bug-desktop

OOPS.

6) I need to get the share button working! I’ve tried two jQuery plugins so far — sharrre and share (very creative names here) — but didn’t have the time to customize either of them to my needs within the course span. Circulating this site and its content via social media is going to be imperative.

7) Must create real image assets and improve the visual design. This was fine for a prototype, but as you see, it needs more time dedicated to styling the site and creating proper, optimized images.

swingquote-candidates

This Candidates page was a late-added feature, so it just reuses the existing background images meant to be utilized for the quiz series :\

 

8) While the form has validation, it needs a) success feedback, b) visual bug fix to the dropdown menu, and c) somewhere that the data hooks up to!

swingquote-submit

I’d need help on all fronts if I’m really going to make this happen. Visual designers, developers, and political junkies: let me know if you’d be interested in collaborating!

Advertisements

2 thoughts on “A personal project on politics: Swing Quote v.0

  1. Pingback: Swing Quote v.0 – Beta tester enrollment (plus content updates)! | Liz Jasko

  2. Pingback: How learning to code made me a better Product Designer | Liz Jasko

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s