Right off the bat I appreciated that Jolie laid out the objective, time frame, and skills needed to complete the tutorial. I went in knowing exactly what to expect. In today’s busy world, I think giving people the information they need up front to make a decision about whether or not something is right for them is a wise decision. It reflects an understanding and respect for the demands on people’s time. Also, for someone like me who is new to web design, it’s helpful to know what I’m getting myself into before getting started. I often find the tutorials end up being much more complicated and time consuming than I expect.

I found Jolie’s tutorial to be simple yet very effective. I liked that she didn’t overstate. She provided the necessary information and instruction to complete the tutorial effectively and nothing more. She stayed focused and concise. I liked that there were five distinct steps with screenshots. I thought the structure was really well thought out. You could stop after any of the steps and come back at a later time to finish. It was well organized and never felt overwhelming.

The option to watch a video or follow written instructions or both was a great idea too. Some people are visual learners; some people need everything written out. I personally followed the written instructions and then watched the video. Each could stand alone or serve to complement the other.

My only criticism is that you have to click on the player and go out to the Vimeo page where the video lives to watch it. It took me a few minutes to figure out how to get the video to play. I’m sure this a minor technical issue that was overlooked and not intentional. Also, a little bit more personality in the video would have made it more lively. Perhaps even an extra tip could have been included in the video to add extra value.

In all, a great tutorial that I would highly recommend. Nice work, Jolie!

Please go through the tutorial using issuu. You can also download a PDF: Wireframe Tutorial. The text and images needed for the tutorial are below. Feel free to leave your thoughts and suggestions as a comment. Happy wireframing!

Text:

The Washington Literacy Council (WLC), founded in 1963, is one of the oldest adult literacy programs in the District. We serve adults who have the most limited reading skills, fewest job resources and greatest employment needs in the District of Columbia.

Update: Something that gives people a quick idea of what’s going on at the organization. Perhaps on a monthly or even quarterly basis. This will make the website appear more dynamic and make it clear that it’s an important mode of communication.

News

July 1, 2011

This year’s Congressional Baseball Game drew record numbers. WLC raised $$$.

August 1, 2011

Summer event.

September 1, 2011

Our second annual graduation ceremony was a huge success again. Check out photos from the event.

October 1, 2011

Name:

I found the Washington Literacy Council in October 2004 after years as an adult struggling with my reading and spelling. I can say this program is the one I have found to be most effective for me.

I managed to land a government job but I knew my reading and spelling skills needed a lot of help. The WLC program uses an excellent method by Barbara Wilson. After trying about five other methods and programs I found this one the most helpful. The staff at the Washington Literacy Council is very experienced and helpful. They found me a tutor who is very patient and works with me on a weekly basis.

WLC Partners

Kramerbooks & Afterwords

National Capital Bank

Morton’s Steakhouse

Copyright 2011 Washington Literacy Center

1918 18th St., NW, Suite B2, Washington, DC 20009
Phone: 202-387-9029 | Fax: 202-387-0271

Images:

I’ve never been a huge fan of video games. It’s not that I don’t love to play them; it’s just that I’m not very good at them. I guess I didn’t gain the necessary dexterity and coordination because my parents never allowed me to have a gaming system as a kid. There are, however, two exceptions to my lackluster feelings about video games: Mario Kart and Wii Bowling. Since many of us in the cohort don’t own a Wii or an Xbox, and it’s always more fun to play with people than by yourself (in my opinion), we had a little video game get together where we happened to play my favorite games.

Mario Kart is a go-kart style racing game that offers players numerous levels of choice. First you have to pick what character(s) you want to play as, what kart he/she will drive, and finally, what course to drive. Peach Beach, Moo Moo Meadows, and DK Mountain were just a few of the courses we chose to play as a group. Before you’ve even hit the gas you’ve made a series of selections that will impact your success in the game as well as the story you create. I think one of the main factors that makes video games fun—at least for me—is being familiar with the game. If you’re constantly falling off a cliff or getting lapped, the game just gets frustrating. What I like about Mario Kart is that each course is a mini world with its own unique elements—that once you learn, you know how to use to your advantage, or, in my case, how not to get yourself killed.These choices and knowledge allow each player to experience the game in a highly personal way. It really comes down to strategy. Drawing on it and to what degree determines how complex your story becomes.

While we played four-person Mario Kart, I noticed that we were also creating a narrative as a group. The courses we chose to play, who won and who came in last, who was vicious with red shells, etc. How we interacted as players in the game resulted in real-time outcomes that influenced every interaction that followed. It was a dynamic process that built upon itself. Remove one action or alter one decision and everything would have played out differently. The way each person played changed the game for everyone else. We were creating a shared story, again related to strategy—who had it and who didn’t. Win or lose we all had a good time.

I walked into the National Portrait Gallery thinking that I would find interactivity around every corner. My world is so often besieged with interactivity that I failed to remember that not every experience necessitates interactive components. Moving from room to room around the museum, I noticed that pieces in most exhibits were only loosely connected; pieces didn’t build upon each other to establish a narrative. A theme perhaps, but not a story. Interactivity wasn’t needed to create a framework. The fact that a work had been selected for an exhibit was the context. Art, after all, is an experience in and of itself, without timelines, video, or touchscreens to explain significance. Quickly gathering that I wasn’t going to find what I had envisioned, I started to look for other ways that interactivity was present, and eventually found myself in the Lincoln Gallery of Modern and Contemporary Art.

Located on the east side of the third floor (a section of the museum I’d never visited), the interactivity of the Lincoln Gallery was not the result of added interactive features, but simply the nature of the art and the space that it inhabited. All of the pieces were either three-dimensional—meaning you could walk around the work and view it from all sides—or if hanging on the wall, was two-dimensional and could be viewed from a seating area. The gallery itself was large and airy, allowing people to spread out and move at their own pace. The artwork was not arranged in any particular order. All of these characteristics encouraged the viewer to experience the gallery and each work in their own way. While not what I was initially expecting, I realized that this was a form of interaction; encouraging personalization and the creation of individual meaning. I think that is what interactivity is all about: allowing the viewer to customize their experience. Choice affords a degree of control and depth not attainable in a static presentation.

An additional layer of interactivity was facilitated by the furniture in the gallery. Curved modern couches filled the main space, inviting an alternate viewing experience or the option to comfortably converse. The entire length of the gallery was visible, giving a different perspective on the works within it. Small colorful stools and minimal leather benches placed at random throughout the space changed the height at which pieces could be viewed and provided an opportunity to linger. Despite a lack of familiar interactive elements—such as multimedia—interactivity was present in the overall concept and design of the gallery. The ability to take in the artwork from different angles, heights, and vantage points promoted a sense of engagement not found in many other parts of the Portrait Gallery.

When assigned this redesign project, I knew I wanted to tackle the homepage of The Oregonian, the leading newspaper where I grew up (Portland, Ore.). I have long thought that the site could use an overhaul for a number of reasons. Upon visiting www.oregonlive.com/oregonian, there were three things that I noticed right away. The first was the overwhelming amount of content. Text was tightly bundled everywhere on the page, much of it unnecessary or related directly to the print version of the paper (this is the digital version, please differentiate). The second was the lack of interactive elements. No opportunity to connect through social media channels was present above the “fold.” The third was the lack of visual components. There was only one photo visible without scrolling and no video. Multimedia was completely buried, and infrequent overall. End equation: Too much of one+ too little of two = unbalanced.

From my experience, users visit local news websites for one of two reasons. First, to find content they already know exists. A certain column, a particular section, etc., likely something they used to follow or read consistently in the print version. Second, to peruse a wide range of content because of brand loyalty. These users enjoy the familiarity (which could equate to writing style, ease of navigation, etc.) of the publication and visit out of habit. Without simple, straightforward navigation, neither of these constituencies is getting the experience they are seeking.

When completing my redesign I attempted to address each of these—in my opinio—problems. At first I found it difficult to leave out many of the elements originally present. I felt like I was stripping the homepage of many of the items that were essential because why else would they be on the page to begin with. I came up with a less cluttered, but still overly content-heavy page that simply rearranged already existing elements. I even kept the three-column format: talk about not thinking outside the box!

After I slept on it, I realized that I hadn’t really addressed any of the problems that I mention above. I was trying to work within the bounds of someone else’s idea and in doing so limiting any original creation. Knowing that I didn’t want to start completely from scratch, I went back and re-evaluated everything on the homepage, before deciding how I would go forward. How would the user experience suffer if I didn’t include a particular element? What did I need to add to enhance the user experience? Essentially, I was trying to find what I thought was the right balance between design and content. I wanted the end product to have value and be competitive in the online news market, yet usable and relatively easy to navigate. If people can’t find their way around, it doesn’t matter how much or how good your content is. Here is my final redesign in comparison to the existing Oregonian homepage:

Before: The Oregonian Homepage Sept. 30

After: My Redesign

Immediate Takeaways

I stripped out a lot of content, both horizontally—reducing the layout to a two-column format—and vertically—by chopping about 400 pixels off the length of the page. I kept the 980-pixel width and stuck with the same color scheme. The header is slightly smaller and without an embedded ad. I felt that branding was important, so I used the iconic Cloister Black font O next to The Oregonian name. It is repeated next to story sections in the right column. I don’t want people to think that the site is a carbon copy of the paper, but I also don’t want them to forget that they are looking at content created by The Oregonian. I grabbed some of the sidebar items and used them in my design (Photo/Video of the Day and Oregon News Updates). I think they are functional and compel users to interact with the site (why change something that works as it is?). I added a “Connect with The Oregonian” sidebar and included links to all interactive channels and content. Housing it all in one place makes it easy to find and use. Lastly, I removed all but one mention of OregonLive.com. It is a partner site to The Oregonian; they are not one in the same. This is something that is terribly unclear currently (it’s only expressly stated in the “About Us” section). I removed any ambiguity by including a single link toward the bottom of the page with text that states “our partner site.”

Now, I’ll explain a little bit more about why each problem was a problem—from my personal perspective—and how I “fixed” it.

Too Much Content

Every time I visit The Oregonian’s homepage, I’m immediately overwhelmed by the amount of content on the page. A long bulleted list of links from “Inside The Oregonian” on the left and links leading to all different parts of the paper’s “Service Center” on the right (plus a vertical banner ad) sandwich yet another list of links to stories in the middle.

The eye has no idea where to go first. No one wants to scan endless navigation or scroll down through nine sections, plus glance over 12 sidebars to find a story of piece of information. Too much content results in users clicking away. By packing pretty much everything on the homepage, The Oregonian is hurting rather than helping itself.

I think one of the main underlying issues is that the digital version of The Oregonian is trying to include far too much of what put in its print version. I can’t speak for others definitively, but I don’t visit an online news site to see what was in today’s paper. I tend to think of the digital arm of any paper as an entity with distinct readership goals that are very different from those of the print product.

Tying the website to the paper makes what is online feel like an afterthought instead of a complement. If readers wanted to look at the physical paper, in particular the front page, I think they would seek out a print copy. The website simply can’t fulfill the experience of reading the paper and so doesn’t need to present itself (looks or content) like the print version. It can function entirely separately and still offer a substantial value.

Long story short, I stripped out a lot of content. I only have four story sections instead of nine. The rest of the sections are accessible through the navigation bar under the header. Three sidebars in the left column and three at the bottom anchor what I feel is a manageable amount of content, while still allowing users to find a good deal of what is on the existing page, plus a little extra I thought was missing. I think it is important to note, and this is only my opinion, that a fair portion of the content on The Oregonian’s homepage is extraneous and nothing is lost by not having it, at least on the most forward-facing page. Anything that could go, did go.

Lack of Interactivity

What about Facebook and other interactive channels?

Interactivity is one of the key components of a strong website, news or otherwise. A page without interactive elements—multimedia (photos and video, professionally-created or user-generated), social media, and user comments/forums—is really not all the different from words on newsprint. The ability to connect with or engage with content allows the reader to have some control over how they consume news and information. It offers a level of involvement not possible with print. As such, news sites should utilize these tools, not only by including them, but making them highly visible.

I added a “Connect with The Oregonian” sidebar above the fold, as I mentioned, and placed direct links to Twitter feeds and other pages on the site dedicated to interactive features. The links are grouped and emphasized by a visual icon. By having a space specifically for Twitter, Facebook, blogs, and other interactive channels, users are encouraged to explore additional avenues of participation beyond simply reading. It also exemplifies the idea that The Oregonian wants to foster engagement and harness the power of the medium.

Where is the Multimedia?

Like interactivity, multimedia is an integral part of any online site. It is the visual window to the outside world, giving a sense of physical time and place to a story. Photos, and, increasingly video, ground news and information; they are the new narrative. Stories become tangible and as a result more meaningful and impactful through multimedia. It plays an important role in storytelling in an age where what you show is as weighty as what you say. Users look for quality photos and video as alternatives to text, or sometimes as an accompaniment. Whatever the function (supporting or center stage), multimedia needs to be high quality and very visible.

Multimedia is clearly not a priority given that there is only one photo above the fold. The amount of text totally swallows the lone visual; the eye eventually lands on the photo after having looked everywhere else on the page. Video is not visible at all without scrolling. Multimedia needs to be accessible if it’s going to be an element on the page. Why spend the time and money to create multimedia pieces if they don’t have prominent placement? To bring photo and video more to the fore, I moved the pre-existing “Photo and Video of the Day” element to the top of the left column and I added multiple photos higher up on the page. It is more aesthetically pleasing and incorporates a broader range of content right up front. The user experience is enhanced and diversified.

Wrapping Up

In the end, my ultimate goal was to create balance in my redesign. I wanted each aspect—content, interactivity, and multimedia—to have the capacity to stand alone, but also when taken together paint a more engaging and compelling picture. The whole is only as strong as its parts. If parts are missing or parts are weak, the user is being underserved. I hope that my redesign equalizes the current “too much of one+ too little of two = unbalanced” equation so that each element is able to pull its weight and contribute equally to a rich, informative user experience.