Online News: USA Today Final Deliverable

Online News: Revised Wireframes & Dressing?

During this step, there were a couple of key revisions I decided to make. Firstly, I chose to allow the overall page to be customizable rather than having a community/custom view. I originally wanted to create a more personable experience for the user, which was my reasoning for including it. However, after some back and forth about whether it was really adding anything I decided to transform this "experience" space into something different. USA Today is a well respected newspaper, but is also known for breaking convention from time to time. I want to propose a way to sort news by how you feel or what you're wanting to get out of it. We've seen plenty of sites that can suggest music by our mood so why not also the articles we read?

Scenario #01
This first set of wireframes focuses on moving from the Homepage, showing a navigation feature to a Life & Style article.

Dressing Wireframes 

(I'll just suggest a new name each time till I find one that works. If wireframes are the skin, then maybe we skip the skin and clothe them)

Here is the aesthetic build out for the above wireframe scenario. There are a couple things that I'm not stoked about and things I need to consider after meeting with Marty. First, contrast and legibility in my body copy as well as my main icons. Secondly, I need to work out more thoroughly how users will know how actions work and what to click on through hover states, etc. Thirdly, I need more of a visual distinction between spaces such as from Homepage to Life & Style section. Lastly, I'm not not a fan of all the blue. One of the aspects of the original USA Today branding I enjoy is that each section is associated with a color. I would like to bring that back into this new space and may also help with distinguishing spaces.

Scenario #02
This scenario focuses on a new "Mood" feature, which enables you to sort news by mood or what you want your article to feel like, to Life & Style article, to an article feature.

Online News: Skinning Wireframes (Hmm...sounds questionable)

I'm not much of a fan of the phrase skinning wireframes, but it will suffice for now.

Although our wireframes are still in development during this phase, we choose one screen to build out with three different aesthetic directions. It was a slow starting process so I created a couple of key terms for each direction to help get the ball rolling. It's still a work in process so I'm pretty sure I missed the mark on some of terms I choose below.

Neutral & Simple 

Elegant & Nostalgic

Editable & Friendly (Eh...it's process)

Online News: Site Map + High Content Wireframes

SITEMAP:

SCENARIO 1:

SCENARIO 2:

Online News: High Content Wireframes

The image below is the default homepage that show cases all of the categories. The categories listed in the top half of the page are the most popular categories.

After clicking on one of the categories the homepage shifts over to reveal the article space, which is also organized by the most relevant news. You are also able to filter out content you aren't interested in seeing by unchecking the categories.

Once you select an article the instructions, and ingredients for the recipe is listed below. Users can watch the corresponding video for a more detailed experience.

In the community space users can comment, share their revisions on the recipe or view someone else's revisions.

Lastly, users can save the article to their archives if they would like to read it later or keep for future reference.

The last scenario is customizing your own personal space. Users can toggle views to see the community or customizable view where they are presented with a blank space. Users add categories by dragging and dropping them into the space. The category will automatically add all sub categories, but users are immediately prompted to select and deselect the desired sub categories. The category with the most interest will be hierarchically larger in the space below.

Online News: Thinking Prospective

This weekend I've been trying to think of ways to push the prospective experience aspect of this project further, but after some time, I realized I was asking the wrong questions. In the previous concept stage, I decided to combine two of my directions together so maybe now I need to take a moment to re-articulate my concept and allow the prospective experience to stem from the concept rather than trying to pull an idea from mid air.

Right now there are a couple of sites and apps that I feel are currently redefining how online news is being accessed and read: Flipboard, Facebook, Reddit, Spectra, Newsmap, and Wired Magazine.

FLIPBOARD + FACEBOOK
Flipboard is a social magazine application that pulls content from various established institutions into readable, coherent, and bite sized pieces of information. It even pulls from social media sites such as Facebook and visually translates them into preset magazine spreads that makes your social media a part of the news you consume as well. I feel like this inclusion of social media brings up an interesting question. Do we approach social media sites with the same mentality we do when we approach an established newspaper like USA Today? I think we do. We're just as concerned about the recent stories of our friends  and family as recent news in the world.

SPECTRA
Besides being visually stunning, there are elements of the Spectra Newsreader that I find very useful. For instance being presented with a blank space in which the user is allowed to select their interests and curate their news. Other small detail I enjoy is how they list out the amount of articles in each category and allow different arrangements to consume the news. I think it helps the issue of the web being overwhelmingly infinite and gives it a start to finish feeling. This space is a great individual space, it lacks community interaction.

NEWSMAP
Newsmap is an interpretation of the constantly changing landscape of news in a visual format. Because it's pulling from a variety of sources, it is a bit questionable in regards to credibility. Yet because it's pulling from a wide variety of sources it almost also seems credible because there is less biases.

REDDIT
Reddit is a social news website where users can submit content such as a link or a text "self" post while other users control the hierarchy of the site's pages by voting the submission's rank up or down. I think it's a great example of a holistic view of the inter-webs, user-generated content and participatory culture, but lacks in credibility.

WIRED Digital Magazine

I only bring up WIRED Magazine because I feel they do an amazing job at combining different types of content to create a richer experience compared to it's print counterpart.

I feel like there needs to be a balance between user-generated content and credible sources, community space and individual space, tailorable spaces and non-tailorable spaces, quick reads and long reads. Because we're working with an established newspaper, the credible aspect already exists so I guess it'd be a matter of playing it up or down. I think it's now about bringing in some of the concepts I explain above into this USA Today space.

Online News: Wireframe Concepts

This step of the project focuses on developing different concepts for our online news site. We initially began the project by essentially analyzing the pros and cons of the print and the web components of a newspaper. Now we're taking what we've learned from our analysis to find creative solutions to the problems and speculate new ideas to enhance the experience of reading online news.

WHERE AM I?
Most web pages lack a sense of direction or start to finish type of experience, which can sometimes be overwhelming by it's infiniteness. For this direction I wanted to focus on creating a clear navigation system that would allow the user to know exactly where he or she is in this digital world.

Direction 01

CATEGORIES + POPULARITY
While credibility is an important factor, it seems as if we are more interested in what the majority are interested in seeing. When we see that this article is the most viewed than we expect for it to be an interesting piece. It is also important that we are able to quickly see the content that we are interested in. So, for this direction I wanted to focus on being able to toggle between a community view and an individual view. Articles are hierarchically arranged based on popularity and are organized by categories or tags rather than pages.

Direction 02

USER CURATED CONTENT
My last concept focuses on allowing the user to select the content he or she is interested in immediately. When the user drags in a category, it immediately includes all sub categories for, but the user is prompted to remove the sub categories he or she wants. The boxes form hierarchically to which ever category the user is most interested in.

Direction 03

FIND + SHARE: Spectra Visual Newsreader

Check out this sweet newsreader by MSNBC! The Newsreader begins as a blank slate and articles begin to populate in the space when the user begins selecting his or her interests. Also, no log-in required!

Spectra Visual Newsreader

FIND + SHARE: GuideGrid

Here's a cool photoshop preset that allows you to quickly make grids in photoshop with your guides! A very helpful tool for interface design!

http://www.guideguide.me/

Reading Response: What I Learned About the Web in 2011

If you ignore the redundancy and irrelevant details, overall, the article brings up very good points in the scope of the project. Here are the general concepts I felt the article was getting at: audience, content,  context, flexibility, interaction, and experience.

INTERACTION
While I agree with Jeff Croft's statement on how Apps have helped redefine the web, I feel he may have jumped the gun a bit. The introduction of touchscreen based devices has allowed for a new language of interacting with content. More and more I see web sites that are inspired or even speak in the same language as iPhone and iPad interactivity. If this trend continues, we may no longer see a need for Apps.

EXPERIENCE
The web is moving beyond reproductions of physical pages. Many of the newspapers we examined in class have mostly just translated their magazines with splashes of new media.  Croft uses Wired Magazine as an example of this "evolution" in web design in regards to their magazine app. What makes Wired Magazine a great example is that they've thoughtfully layered and embedded the new media with the content therefore creating a richer experience from it's print counterpart. It seems most of the online newspapers consider the different types of media separately creating a disconnect in the experience.

FLEXIBILITY + CONTENT + CONTEXT + AUDIENCE
I decided to discuss these concepts together because they relate a bit more directly in my reasoning. Anyways, there's a lot of talk about responsive layouts in this article, but they kind of failed in explaining why. There are multiple reasons to create a responsive site that is flexible in more than one sense.

Firstly, the internet contains an enormous amount of content that's somewhat continuously growing and changing like a small child. I believe we're moving away from this idea of pages and into a more organic space of related content  (I'm not sure if this makes sense) so we should consider its shifting boundaries.

Secondly, which the article focuses more on is the flexibility for multiple platforms. More people access the internet from smart phones and other non-desktop devices. Content shouldn't be sacrificed due to the context of a different device. The interface should be flexible enough to retain the content and visual look and feel in a different space.

Lastly (more like firstly), your audience. According to Aarron Walter emotion shapes behavior and by better understanding  emotion we can gain better insight into the user's behavior. He believes this knowledge will help us in designing better user interfaces. As I mentioned previously, the web has moved passed just a translation of print content, it's alive and interactive. Essentially, we should be thinking about how we can create an interface that caters to multiple users each with their own wants and needs. Whether it is allowing the user to add their own content or simply allowing the user to choose what is important.


Article Source: What I Learned About the Web in 2011

Reading Response: Web Design is 95% Typography

I agree with Oliver Reichenstein, typography does plays a large role in web design. The internet is a pre-mature concept compared to how long typography has been around. Maybe we're still high on the sensationalism and stuck in the same gimmicky getups of early web design, because we had no idea what would become of the internet if we took a couple of steps. I think we've grown up so it's time to trade in those kiddie shoes for some loafers and get to the point. According to Reichenstein, web design is about information and communication so designers should firstly design with regards to the message just as typographers had in print design back in the days. I believe the importance of typographic hierarchy in web design will only prove to be more necessary as the amount of content continues to grow and complexity of information increases. As for the critics in Reichenstein's response to the reactions, I feel many of the negative opinions overlook the ultimate message Reichenstein was trying to get across, which is exactly that, communicating the message.

Article Sources: Web Design is 95% Typography, Reactions to 95% Typography