Design. Frist Round.

This is the first round of designs that have come out of this. There were ideas brought up in the last crit that this started to have the same air as Polititeens, which i don't want. It has the same conceptual path as polititeens and KCTV and other projects, but I still want this project to stand on its own. SO I'm moving away from this to make it its own.

Here is the first screen of a new direction that is pulling from an aesthetic of voting ballots and political elections. The aesthetic needs to be pushed a bit more, however. Right now it's mainly in the buttons that utilize the circles with a heavy stroke and a checkmark and an X inside of them.

Here is a link to a growing collection of visual inspiration to help me with this aesthetic direction.


Mid-semester Critique.

Mid Semester Presentation: Stance

Lots of work to do. New direction, better direction, more concise direction. Thanks for meeting with me Cady, you helped so damn much. I'm a bit behind right now, but I much more content with this direction.


Wireframes + Reliability Graphs.

Below is the small presentation given in class on friday, March 2nd. It goes over the latest infograph style and how it works. It then transitions into my three(ish) scenarios.
Degree Project. Wireframes + Reliability Graphs.

First, My Infographs
            So my search for the perfect infograph style continues as I work on my wireframes for my scenarios. The infographs have gone through many reimaginings since last friday, and have settled on a more direct approach visually.

This is the gradient I've been using for the infographs. Liberals are left-wing, conservatives are right-wing, so it makes sense to have the spectrum to go from liberal to conservative. The bars within this gradient are where the color is pulled for the infographs. There are 10 bars on each side, and one perfectly in the middle. This visualizes the article, journalist, or website's political stance.

I started out with the infographs on top, and it was then translated into the the one on bottom. The idea behind the one on the bottom is that the shape is trying to reach the outer perfect hexagon shape. Reaching that means you have 100% reliability. I enjoyed the curved infograph better, but I was having issues rendering it correctly, so I resorted to the angular one.

Above is a set of these infographs showing the range of possibilities within this system. The closer it got to the outer edge, the darker it got, the closer to the center, the lighter it got. There are a lot of factors shown within this infograph which makes it harder than a simple quick read. Plus, the angular shape wasn't that pleasing to the eye. So, I went back my initial infograph ideas to reevaluate what I had and to rethink the way this functioned.

So I went back to this idea that I ended with in the first round. They are visually reductive in comparison to the hexagon, but they hold just as much information within them as the hexagon infograph. Let's focus on the purple bar infograph. The idea is that the top bar is the visual mean of the set of bars below it. The faded bar in the middle is just the set of bars at the bottom overlaid onto each other. This style(the orange square functions this same way) is about size of the bar representing reliability. The thinness of the height if the bar, with its long, variegating width, makes it hard to place within any sort of context, which is why I made the square to try and fix this. I noticed the overlay on these two infographs which correlated a bit with the hexagon's idea of the darker/lighter color. They inspired this.

With this infograph style, the size and shape of the square will always stay the same, it's only the shade of the square that changes. The square on the right is the reliability rating of whatever it corresponds to. When you hover your mouse over the square, or tap your finger on it, the square on the left would appear in its place. The square on the left is what the one on the right is made of. The shade of the square on the right is the calculated mean of the bars on the left. This allows for a quick read of the shade of the square. The richer and fuller the color, the more reliable, therefor, the lighter and more washed out the color, the less reliable.

The top imade is a set of these overview infographs going from most reliable in the upper left-hand corner, to the least reliable in the lower right-hand corner. These squares correspond directly with the image below it and show what the overview squares are formed from. All of this allows for a quick initial read, and then a deeper dive into the content of the square.

The Scenarios
            I will leave the scenarios to exist in the presentation above. All of my scenarios run together to form one full use case, trying to cover the main parts of the website. It starts within the reliability website, here you get see activity happening within the website.The user clicks on "Graphs" and searches for immigration to find the most reliable article. It takes him to the article on the website. The user opens up the reliability plugin to rate and review the article. The user then opens up the article rating in the website to see a more in-depth look at the rating. They look at the sources, the website's rating, and then the reviews by the users. From here the user finds another user who posted a review that they like. The user goes to the other user's profile, looks over their profile and information, and ends up following them.


Finally, Visuals!

So, finally, this blog is has some visuals within it! (Yes, you're welcome Kidwell) This has been a long time coming, lots of research and thinking and understanding of this system. The three images below are my initial visualizations of all of the factors that go into giving an article, journalist, or website its rating. I like to think of these as visuals instead of infographs because they're very unclear and have ended up being used to show the factors that go into a rating, but not actually any content.
Articles, journalists, and websites are graded on the same criteria, the only thing that changes is what it is influenced by. With the article, it's rating is influenced by the journalist who wrote it and the website it was published on. The journalist has a stronger pull on the article's rating than the website becuase it is literally the journalist's written voice.
So it would make sense that the journalist's rate is affected by the articles they've written and the website(s) they write for. The article ratings has less of a pull on the journalist's than the website. The journalist may write hundreds of articles in a year, and as time progresses and they accumulate more articles, the better understanding of their writing reliability. As for the website, the journalist is a human embodiment of the website, so how the website is viewed is partially how the journalist is viewed.

As for the website, the content(articles) it is rated on is created by the journalist, so they both have direct influence over the rating of the website. Because the journalists are embodiments of the website, they really determine the overall rating of the website. It doesn't matter what the website set out to be/do, what matters is what it actually is doing.

How to Visualize this Clearly and Accurately
This was my first stab at showing this idea, a circular bar graph. All of the attributes that go into giving a piece its rating is on the same graph to help show they're interconnected. Sourrounding the main graph is the political stance of the piece, to better help show where it stands in relation to the reader.
With the first try, i realized that it didn't give an easy way to show a quick understanding of the rating the piece had. This was my next attempt to try and address this issue, something that has an easier first read that still allows for a deep dive into the content. The ideal shape in these graphs is either a perfect hexagon(left), or a perfect circle(right) The color is red because with this example the piece has a conservative slant to it. I liked this idea, but it was getting a bit confusing. This system is complex, and showing that complexity is key, but not confusingly. Confusing does not equal clear and accurate, if it's confusing, it could end up misrepresenting the content. 
Thsi graph above and the one below, are trying to help show reliability through color as well. The one above is just a jumble of color, but the one below is working on the idea of the less white, and the more color it has, the more reliable it is. That way, it's not jsut size, but also color to help get the initial idea across.
The graph above was just another style of the same circular grid. The two smaller blue ones were testing out what the shape would like without any defining factors, trying to find a shape that could easily convey "amount" of reliability.
Then I tried something different with this bar graph above. The bottom set of lines are all of the contributing factors to the rating of the piece. The middle shape is all of them overlaid to help find the mean of the ratings. The top bar is the mean of the bottom six bars combined. So with the individual ratings of 8, 12, 7, 2, 5,  and 9, the mean was found to be 7.2. This, if put with what the max size the bar could be, quickly shows its reliability. Possibly, when you hover over the bar, it could break apart to look like the middle bar to show where the mean was created from. The bottom set of bars would then allow for a deeper dive into the content. The two below this are just other shapes I considered, squares and circles. The bar graph works better in my mind because the height of the shape is always the same, it's only the width that changes. This allows for a quicker understanding. With the two below, comparing two squares with the same proportional sides, or circles that all look the same, rely on size only, and not shape.  This makes the initial reading slower, slower = not as good.
Colors of These Infographs?

Researching political colors, I found that historically, blue goes with conservative more than liberal. This stems back to the conservative party in the UK using blue. But the United States has very recently decided on red for conservative, blue for liberal. The Democrats recently revealed an all blue logo, and then the Republicans came out with an all red logo soon after.
            But does the red and blue have to be exactly red and blue? Can it be a blue/green and a red/orange? I don't know yet, I'm still playing around and doing research. But one thing I know is that people are not just blue or just red, they are very much purple. So one thing I want to have with this system is the ability to be somewhere in between red and blue, some form of purple.
            The color was chosen to help situate where the article/journalist/website is coming from, it gives a quicker understanding of the context this is in. For example, if there is a strong bias to the article and the shape has a red hue to it, it will be bias in favor of conservative.
Sooooo.... From Here?

Pick a direction for my infographs, both style, shape, and color. And start wireframing the app + plugin. This infograph system is at the very core of this idea, so this needs to be figured out ASAP.


How Does This System Work, You Ask?

The quick answer: A gradient. (of what? i'll get to that in a few words)
The real answer: I'm still working on it.

The Idea(s)
            From Polititeens, Taylor and I realized that nobody is straight blue or red, everyone is a shade of purple. With that project, we went with the straight red/blue, but with this, I want to be as accurate as possible. That's where the gradient comes into play, both conceptually and visually.
            The gradient, however, will be a multi-directional gradient affected by multiple factors. The ability to visualize where people stand in this platform is key to the success of the platform. Creating an icon/color/shape system to denote where people stand is the direction I'm heading in, but I'm still defining which factors are in the gradient. The main one that I know for sure will be in it is the liberal/conservative gradient, to give everyone a basis of where they are coming from. The other part of the gradient may have to do with the community involvement.
            To show what/who is reliable through the help of other people, you need to know who is reliable among the other people. Those who are seasoned veterans of the system(those using it correctly, constructively, and to it's fullest extent) will have a stronger pull within the community than someone who just started or someone who doesn't use it as constructively.
            But we can't forget that the most basic function of this community is to stay informed. That's why I want to create visualizations of everything within this community. Visualizations of people's stances, how the system works(why the users/articles/journalists/websites get the "rating" that it does), journalist + media outlet's stances, and anything else that needs clarification. I want to visualize this because this system is complex*. But these visualizations would be based and formed from written content/ratings/reviews that users can still access to help them dive deeper.

*visualization usually helps clarify information


This is What the Hell I'm Doing.

Degree Project Progress Presentation

Above is the progress presentation I gave on 2/6, amassing all of the work that I've done in relation to picking out my specific topic for my degree project. The path that I've chosen is down the idea of reliability in political news.
"With record amounts of content being pushed out, there needs to be a way to sort through all of the crap to find the gems. Because anyone can publish content, the general masses have no idea where or who the content is coming from, and this needs to change."
 With this project, and after giving this presentation, i realized that I'm walking a fine line about what I do and do not want to do. I'm not wanting to show that one article, journalist, or media outlet is King above all of the rest, or show which articles are 100% true. I'm wanting to help point out which sources are doing their research and talking about topics knowledgeably, and not just ranting about their opinions.

From here, I'm working on how this system would function and work for the next two weeks. Below is my timeline for this project.



What the Hell Should This Project Actually Do?

"Trust Through Verification"

List of specifics that this app could do
(bold = most important ideas, italic = good ideas, regular = lesser, but still good ideas)

Show validity of information
Rate journalists, their writing, + their reliability/validity
Rate website's reliability/validity
Break the information bubble
Analyze data across websites
Show trends in information/topics (and address other info not being addressed)
Compare/Analyze websites together
Aggregate of a topic across multiple sources
Bring attention to other sides of the same topic
A tailorable experience

Suggest users articles and topics that they might be interested in
Make sense of the hundreds of news websites out there
Visualize information
Gain a well-rounded knowledge of topics

Make reading articles easier/better
Show related articles/supplemental information
Share thoughts on an article better
Add personal thoughts when sharing an article
See trends of what people are sharing
Bring more to the reading experience but not overwhelming
See what people are talking about on specific articles


In looking at everything that is out in the digital world, I realized, damn there's a lot of stuff that's already filling up the space. I did a lot of brainstorming (and a lot of running in circles) to figure out what specifically I wanted to do within the mass already out there. I met with good ol' Marty(in addition to you, Kidwell) to talk things through and get me back on track. I noticed while going through all of these ideas that validity and reliability came up multiple times and it made something Carolyn said when I had coffee with her pop into my mind.

She said that professional writers were frustrated with personal blog publishing platforms like Blogspot, Wordpress, Tumblr, etc, because it made writing harder for them. There are so many people out there publishing their thoughts and ideas and believe they're right, but there's a very big chance that they're not. Carolyn also mentioned that the day before Joe Paterno died, some random person at a news company tweeted that Paterno had died, when in fact he was still alive. The person who wrote the tweet wasn't anyone well-known in the journalist community, but because they tweeted the statement, Twitter exploded. But why? Why would Twitter explode over one comment one person makes who doesn't even necessarily look like they have the authority to make? Doesn't this example beg for a validity/reliability "meter", if you will? All of the people blogging about goings-on throughout the world can be just as unreliable, so shouldn't they have a validity/reliability "meter", too?

The digital world doesn't need yet another aggregator/RSS feed of news being published, or another damn sharing platform. More than ever, the internet needs help figuring out what specific content amid the hoards of other content is true and valid, and which journalists and media outlets are reliable and honest. So, I want to create an iPad app that helps users assess just that, the validity and reliability of journalists and media outlets. This would compare writers/media outlets/articles with one another and rate them on a list of qualifiers that help figure out their validity, with the added addition of users adding their own ratings and comments on them. All in search of the most reliable content in world overrun with uncited, unreliable, amateur journalists and media outlets.

shortlink: http://ianarthur.info/yd5x1f