Case Study: Swing Quote

Description: A political quiz experience to 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.

Platform: Web

Year: September – November 2015

My Role: Product Design (strategy, UX, content, visual) & Development

What I loved most: Completely owning the product vision from end-to-end, and evolving it based on frequent user testing activities.

The Challenge

This project originated as my final project for a 10-week part-time Front-End Web Development (FEWD) course through General Assembly in NYC. Along with the purpose of 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 2016 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.

The Process

Product Summary

First, I wanted to articulate what it is that I’m designing, and why. This direction was primarily formed based on observing social media conversations around political campaigns and debates, and having open discussions about early concepts with family and friends. The key breakthrough was realizing how the level of confidence, assertion, defense, and reconsideration drastically changed based on the candidate names or parties associated with the subject matter. So, I began an informal product spec.

  • 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.

Inspiration & Competitive Landscape

Next, I examined sites and apps about presidential candidates, existing political quiz websites and apps, along with other interactive learning experiences outside of politics. Along with learning from user reviews, I drew from my own heuristic evaluation of strengths and weaknesses for features, visual style, content strategy, and interaction design that could set this experience apart in an advantageous way.

inspiration

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. As upsetting as it was to see such a close idea, it helped me distinctively focus my concept more on:

  1. The deliberate use of content planning
  2. Added value of comparing results
  3. Emphasis of web exploration
  4. Ability for users to contribute quotes they’d like to see included

Design Principles

Both the ethnographic research of political discussions and the heuristic analysis of competitor sites helped strengthen the product vision with a set of design principles to adhere by when specifying features and designing.

  • 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

Feature Set

Coming out of the user research, competitor analysis and design principles, I began to develop a feature set. I’d note user needs and reach enhancements along the way to capture UX requirements, opportunities, ideas. The feature set evolved hand-in-hand as I began wireframing, and is still evolving today as I collect feedback from the live prototype.

features

Interaction Design

Early Concept Sketches

I went through a few iterations of early concept sketches when talking through this idea with family, friends and classmates. Some of the biggest realizations and pieces of feedback that came out from these were:

  • Need for an intro / context of what this is
  • Need to reduce the number of quotes to select from
  • Most interest in the “surprise reveal” factor
  • Possible bias in comparing candidate quotes directly
  • Desire to request certain quotes to be featured
  • Questions about the volume and recency of content
WireframeSketches

Given that I was just learning JavaScript, working out the design through sketching helped save a lot of headaches!

Wireframes V1

Once a core set of screens, features and components was established, I generated some cleaner wireframes to represent the page templates and play with the responsive design. These all evolved during development and beyond.

wireframe-intro

INTRO: In addition to provide a home page introduction, later in development I added a global footer to help frame the page and serve as navigation to additional features that were added later.

wireframe-prompt

PROMPT: A quote presented to the user prior to exposing the affiliated party/candidate. Users are prompted to agree or disagree. The “Issue Topic” label was kept from an early concept sketch because it helped accelerate the mental processing of page content. However, the early concept sketches started with four options to choose from at once, and you can see that this was eventually reduced to only one quote at-a-time. This helped reinforce the design principles by simplifying the experience and enforcing the notion of meditating on one idea before choosing an honest, reflective response.

wireframe-feedback

FEEDBACK: The second state of a quote is revealed after the user agrees or disagrees. It dramatically exposes the candidate 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 prompt. These were all features that came out as valuable in discovery; prototyping them would be an opportunity to further prioritize and shape them.

Content Plan

Here’s an excerpt of what the content planning looked like. 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

V.0 Prototype

NOTE: This alpha prototype still has some major bugs to fix — especially on mobile!

I am neither a developer nor a visual designer. You’ll have to bear with the bugs, the couple of dummy buttons, and the mockup style. But this is the prototype I completed in HTML, CSS & JS to test out the concept and the overall UX design.

SwingQuote-home_nov15

I hypothesize that the style and hierarchy of the CTAs on the home page are going to change. Fortunately, I’m finding that the introductory message is right on target, though!

swingquote-reveal

The visual design is kept simple to help the user focus & reflect on the prompts, and to help dramatize the “surprise reveal” aspect of discovering who said the quote.

swingquote-update-candidates

A candidates page was added because some of my peers who first user tested the experience were not familiar with many of the candidates they were discovering in the quiz and wanted to learn more. “Gosh, how many Republican candidates are there?!” sums up a lot of that feedback 😛

Validation

Given that this is an independent side project, I’m slowly but surely conducting some usability testing before investing more time in further design and development.

Analytics

I’ve integrated Hotjar — one of my favorite UX/analytics tools — to start observing the natural usage behavior on the website. I’m also using the tool to recruit participants for future studies.

heatmap

This heat map helps me monitor the hover paths and click actions of the Home screen, along with the average fold reached across devices, to help evaluate the efficacy of the CTAs.

Hallway Testing

My friends, family, co-workers, and random people I meet have been lovely guinea pigs. The target audience for this idea gives me a wide pool of potential user testers. I’ve uncovered some big issues and awesome opportunities by observing people use this site.

UX Workshops

Related to the hallway testing and idea-sharing I did with early concept sketches, I’ve participated in UX workshops like one with The Design Gym to expose the idea to different perspectives and push the design direction in unplanned ways.

designgym2

Some awesome ideas came out of this workshop as specific feature requests. More importantly, an insightful pattern uncovered was the need to focus on an end take-away for the experience. I’ve got some exciting ideas brewing!

The Outcome

This personal project is still in-progress. As you can imagine, the feature set is not only growing, but shifting, as I receive more feedback. As more information comes in and ideas are generated, I’m gearing up to dedicate more time in 2016 to further developing this site.

Concept: Validated!

While tons of discoveries and new improvements have come out of this, I am very pleased to report that the overall product vision is well-received and causing the desired impact.

Walking through the prototype with my dev class, 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.

Next Steps

  • Fix bugs!
  • Summarize user insights
  • Update & prioritize feature set
  • Revisit UX design
  • Improve visual design
  • Build out additional functionality and key enhancements

Learn more about my process and other case studies.