Case Study 10: Start.io

The next review I will do is of the site start.io (originally pHome.us).

Start.io is a basic bookmarking site.  You can import and add bookmarks, pick out a URL, and see all your bookmarks on one site, so you can access them from wherever, sort of like delicious, but more basic and prettier.

As an aside, throughout this project of reviewing website, I’ve realized my favorite websites are actually tools that let me organize content that is already on the web.  I guess the new wave of web design is creating interfaces to manage your own and everyone else’s web content. And this site is about just that.

If you aren’t logged in, the homepage navigation has Login, Register, Help, and About. The homepage is all about advertising the site.  There’s a button telling me to make a startpage. There are also some screenshots of startpages, and a counter telling me how many people are using the site. There is only one navigation system.  The typographical hierarchy is created solely with text size, but the difference is large enough to be effective.  Also, the site pretty bare bones so there isn’t much body text to begin with.  You see the most in the Help and About pages.  The navigation does not disappear.  The site does not have a deep architecture.  Headlines were bold or just larger than body text.  I found the navigation’s labels very clear. 

When one logs in, you are taken directly to your own personal startpage.  There is a tiny  this banner at the top right with a drop down menu (see pics) : Links, Settings, Help, and Logout.  Links is how you edit your bookmarks.  This might be renamed Your Links, only Links usually makes me think of links provided by the website to other places.

  

The pages’ layouts stay the same for each section, the content just changes.  The color palette is completely neutral greys, except for one blue button that I saw. The imagery is mostly screenshots, except for the blog, which has pictures of release parties and the creators, etc.  There are no symbols used.  I think the minimalist route is the best way to  go.  The startpages are customizable, but the scarcity of the intro pages makes them feel useable, neutral, and efficient.  

The site is providing a service, and I can’t see any possible revenue model or way they are making money.  It doesn’t allow you search anything, but it’s pretty easy to find anything.  The most useful feature of the site is the ability to edit the code of your startpage.  This way, you can make custom themes, and embed anything you want to your homepage, including feeds.   One improvement would be access to the About page even when logged in.  When logged in the link in the nav to About disappears.

Case Study 9: NoDoubt.com

In preparation for their current US tour, pop rock band No Doubt has redesigned their official website.

There are two navigation systems on the home page.  The primary navigation is the top of the page, and can be found again on the bottom of the page in tiny text.  The groups are as follows: Home, News, Tour, Band, Video, Discography, Photos, Links, Fans, Community, Store.  The bottom navigation also includes “No Doubt Direct”.  The groups generally make sense.  Fans was a little confusing because you don’t really see that on band websites and I was confused as to what it was.  It turns out it’s an actual listing of fans (based on profiles created on the website).  Community might be renamed Forum or Messageboard.  I had no idea what No Doubt Direct meant at the bottom of the page.  It turns out it links to a video blog.   I think the label Video Blog or Vlog would be more appropriate (and it saves space!).  There is an obvious hierarchy to the two nav systems.  The top one is big, bold, and in the “header” font.  The bottom one is tiny and all the way at the bottom.  The navigation doesn’t disappear, except for the Store and Community, which are separate pages.  Both nav systems have rollover states.  The link remains in rollover state once you are in that section, indicating where you are in the site.  The site doesn’t go very deep so there is no breadcrumb. It would be hard to get lost.  You can always get home by clicking the homepage (unless you leave to the store or forum).  There is no need for a site map because the site isn’t so deep.  The typography is clear.  Big bold Impact for headers, Arial for body text.  It might be improved but it goes well with the band’s current image (which employs a lot of black and white, graphic, ska-esque, London-esque imagery). A lot of the section headers also have a gray background.  The only color used is red and a little bit of yellow.  The grid stays consistent.  The sections on each page change a lot but the headers make it really clear how the page is divided.  It’s all an attempt to organize the information and incorporate a lot of the new features (fan profiles and more fan interaction).  

The focal point of the pages is the large image at the top.  The banner takes up almost half of the horizontal space, which isn’t economical but I think they are going for graphic impact (hence the font choice).  It’s a sort of iconic black and white image, with NO DOUBT in large bold Impact lettering at the top.  There isn’t much imagery in any section besides Photos, especially because there aren’t many promotional photos from this current band image yet.  I saw the picture used at the top repeated in the band section, only smaller (which was sort of lame.)  I’d like to see more imagery.  Overall, the site is sort of basic as it is now.  I’d like to see the theme be taken further and cleaned up a bit.  I think it could be a really interesting image for the band but it looks sort of bland now.  The objective of the site seems to be both information (discography, bios, tour info, news) and for the fan community (which is a new step.)  Fans are featured on the home page, there is a video of the band asking fans to submit cover versions of a song to be used as background footage for the concerts, etc.  There is no search function, which is a problem.  The most useful aspect is the incorporation of recent information from all sections on the home page, so you can make a quick check without having to go too deep.

Case Study 8: SlickDeals.net

A friend recently recommended using a website called Slick Deals (slickdeals.net) to enter sweepstakes (she apparently won a $3000 TV within a month) so I’ve been checking it out and now I’ll review it.  The site’s users scour the internet for deals on anything (coupons, free samples, sweepstakes, sales, etc) and submit them.

The website has a couple spots for navigation, but the primary one is, again, a horizontal bar at the top, below the title.  The title and logo are in the upper right, and look professional and well-done.  However, to the right of this goodness is a banner ad.  As Gavin would say, BOOOO!  It really really takes away from the look of the entire website (because it remains their the entire time). Incorporated into the navigation is a search box and login box.  

The navigation has Home, Coupons, Forums, Blog, and Tools.  Home has a listing of Latest Frontpage Deals in the left-hand column.  It also has a right-hand column with lots of doodads, and this gets crowded looking.  There is a box explaining what Frontpage Deals are (the site’s management picks the “best” deals).  Under this are a couple ads, then “hot topics” which are popular posts in the forums.

The bottom of the page is interesting (picture 1).  There is a grey box enclosing the bottom, that looks like the bottom of the page. It has copyright info, the logo, and a tiny version of the primary navigation, with added privacy policies, etc.  However, under this there is another bottom of the page.  Here is a very well-designed little information section with links to twitter, Facebook, a Facebook app, help, submission guidelines, and a very nice little graphic.  However, all this nice information is buried on the bottom of the page.  I had no idea Slick Deals was so in with the 21st century.  Most people probably don’t.  I’d say this information should take the front seat, at the top of the right-hand column.Also, there should be less deals on the frontpage so we don’t have to scroll all the way down to see the bottom graphics.

Back to the navigation.  When you enter other sections of the site, another horizontal navbar appears under the first one.  Also, as you rollover each section name, a dropdown menu appears.  The items in this menu and the secondary navbar are the same for Coupons and different for Forums.  For blog, there is a navbar but no dropdown.  For Tools there is a dropdown but no secondary navbar.  This should all be straightened out and made consistent.

The real action of the site takes place on the forum (picture 2), which is embedded in the site.  This is where people post deals.  This functions like your standard messageboard.  One nice feature is the tagging system, which uses symbols to label deals. For instance, in the freebies section which offers free samples, posts can be labeled “apparel”, “food”, etc. In Sweepstakes, posts are labeled “1 Entry” or “Daily”.  There are also icons indicating “Hot Posts” and a rating system with 0-5 Thumbs Up.

Because there is so much information, the typography can get a little messy.  I don’t know how to avoid this other than reducing the amount of information given initially on the home page and make people dig a little more before being bombarded with text.  At least then it’s the user’s choice.  The grid stays consistent and the only focal point is the information.  People are scanning the site for things they want to own, so it’s really like an information yardsale, lots of junk, but some really good finds.  So there is no way to avoid the clutter in this regard.  Well, maybe one way they did this is to have almost no imagery.  Besides the icons, there are very few photos.  The colors are a little much.  I can count 10 colors on the homepage.  This should be reduced.  These colors are used in myspace style boxes that act as backgrounds for headers.  The layout is definitely boxy.  The features of the site I find most useful are the labeling system in the forums.  One thing that annoyed me about the forums is that the posts can be bumped.  When you go to the Sweepstakes forums, you want to see the chronological list of new sweepstakes and avoid the ones you’ve already looked at or entered.  After a while of entering, it can be confusing as to which you’ve already entered.  So when posts get bumped (ie someone posts in the thread and sends it back to the top of the list) it destroys the chronology.  

Slickdeals is THE website for finding sweepstakes (which apparently has a huge following and subculture around it) and I think it does a great job.  It just needs a little reorganization and simplification to attract users.

Case Study 7: Bon Iver

For my next review, I will be looking at the official website for the band Bon Iver (boniver.org).

There is one navigation system on the home page.  The groupings are standard for a recording artist.  They include: News, Tour, Downloads, Message Board, Discography, Blog, and Contact.  I sometimes wonder if sites like this could combine the blog and the news sections.  I understand the reasoning in keeping them separate, but I feel like more people would read the blog if it was the first thing one sees on the homepage.  It also makes it feel like the entire site is the artist’s.  WHen the blog is separate, it feels like the official site is made by the marketing team of the band, and the blog is the only authentic section.  Because there is only one navigation system, there is no hierarchy.  The look of the navigation items does not change after you click on them.  Instead, the section name appears directly beneath the navigation as a header.  I feel like the site could save space by just making the navigation system indicate what page you’re on, only because they’re so close anyway.  The site has only two levels, the home page, and then all the other pages. 

Because the content is fairly limited, there isn’t a need for a breadcrumb or anything to indicate where you are, besides the page title.  You can get to the home page at any time by clicking news.  One issue I noticed is that the banner with the band’s name does not link back to the home page, and the label NEWS in the navigation doesn’t necessarily indicate that that was the page you started on.  The only indication of that is that NEWS is the first item located in the navigation bar.  The site is very shallow and there is no need for a site map.  The site is also flat.  I do think this is good thing.  One problem I noticed is that the message board and blog are outsourced, that is, hosted on other sites.  I think the site would be much more cohesive if these features were embedded on the page.  For one thing, once you are on those pages you lose the navigation system.  The links open in new windows, so you aren’t completely lost.  However, you also lose any branding you were going for with the website.  The looks of the blog and messageboard and completely different.  

The typography is clear, but I don’t know if Times New Roman is the best choice.  Also, the band’s name in the top banner is handwritten and scanned in, but the image is very pixelated, which really brings down the look of the site.  The only real difference between headers and body text is boldness, which works, but isn’t necessarily the best choice.  The grid remains the same (left column has tour dates, and the content changes in the right column).  The focal point is the generic banner, which is a distorted image of what looks to be stepping stones.  The imagery doesn’t really reflect anything about the band.  It’s very boring.  In the background there is a floral etching, but again, this doesn’t really say anything about the band.  There aren’t even any pictures of the band on the website, which I think is a huge downfall.  I know I have come to a band’s website before solely looking for a picture of the band.  There are no icons, photos, or symbols (only the banner and the background).  This is one huge area for improvement. The color is black on light blue, which looks nice, but a little bland.  I’d add one more color to the palette. The colors were chosen to reflect the nature of the band’s music (lo-fi, pretty, soft, folky) but it isn’t the most attractive palette. 

Case Study 6: FourHourWorkWeek.com

The next site to evaluate is that of Tim Ferriss, author and blogger.  He has a tiny personal site called timferriss.com, but I’m evaluating the website for his book The Four Hour Workweek (fourhourworkweek.com).   This site is trying to sell both the book and Tim Ferriss.  The first thing I notice is the list of media outlet logos at the top of the site, labeled In The News.  I would think these logos would be clickable, to stories about the book.  They aren’t though; they’re just images.  Oh well.  Directly beneath the huge banner “The Four Hour Workweek” is the primary navigation.  Listed is: Home, Author, Book, Resources, Blog/Culture, Media, and Contact.  These titles are relevant to the information found inside.  Then there is a large image promoting the book, with quotes, sign-up for the newletter, and links to reviews.

Below this image are links with pictures.  The first links again to the blog.  The second is labeled “Plan Your Retirement Now” but actually leads to a Trip Planner.  It’s a flash application that lets you pick destinations and calculate the cost.  Then there is a link that says “Calculate the Cost of your Dream Lifestyle” which links to a blog post that details this process.  The last link says “Outsource Your Life” and is another blog post.  So we might as well get into the blog.  In essence, the home page is really just a splash for the blog.  The blog has tons of articles and is pretty frequently updated.  It has it’s own navigation system: Home, About, The Book, Resources, Gear, Forum, Contact.  The problem is that the identity (colors, graphics, etc) are very different from the home page of the book. (see comparison below.)

Going back to the primary navigation on the home page, one issue I noticed is that half of the links in that go to the blog, either to entries or regular pages that are embedded in the blog layout.  The other half of the pages maintain the Four Hour Workweek homepage look.  BEcause some of the navigation takes you into the blog, there are some times when you can’t get back to the homepage.  I do think this is a big time problem.  The site isn’t very deep, but for example, under the navigation menu item, Author, you see Bio and Speaking.  The bio is on the blog (it’s actually just the About section of the blog).  But if you then wanted to check out Speaking, you have to hit back to get to the FHWW homepage where the AUTHOR menu is.  In general the architecture is flat, except when you are taken to the blog.  The typography is all over the place, but you can get a general sense of what’s more important with weight and size of the headings.  I would improve it by just reducing the variation.

The grid stays consistent (unless you go to the blog, again).   The focal point of each page seems to be a graphic that accompanies each page title.  It’s a series of Photoshopped “polaroids” with generic stock images in them that are loosely related to the content (see image below).  I would recommend to get rid of those ASAP.  I think the imagery of the site could be reworked in a lot of ways.  The motif of the site is palm trees, which is featured on the book’s cover.  However, in website form. it looks like a cheesy pop-up ad telling me I’ve won a free vacation.  There’s also a horrible Outer Glow on the book’s title.  I would try to emulate the book’s graphics more closely, which are simple but attractive.  The color palette is white, blue, and green (palm trees and blue skies in the top banner).  I think I would cut the blue or use it very sparingly.  There is no blue on the book cover, just black text on the green, and it looks clean and professional.

The site is trying to sell the book.  I think the page could use a makeover though.  Tim has a post about how important titles are.  He regrets that he named his book “The 4-Hour Workweek” because he now realizes that it sounds like a gimmick.  Unfortunately he can’t change the title of his book.  However, his website also looks gimmicky, and he CAN change that.  If you’re website looks like a pop-up ad, it’s time for a redesign.

Case 5: Penn Abroad

I am now evaluating the Penn Abroad website, which I've been using in preparation for my semester in London.  The first glaring mistake in judgment is the title, which is in Times New Roman with excessive letter spacing. The banner has a few pictures of different places around the world, and then three key sections to the site in what may or may not be the primary navigation. (see picture).

 There is also the atrociously spaced Penn side navigation, which is more detailed, which makes me think this might be the primary navigation. 

 When you first arrive on the page, it asks you if you have a Penn Key.  This is supposedly the User Identification Wizard.  Sadly, this system is anything but magical.  First of all, there is a login button on the top right (in size 10 font in the top left corner), which bypasses this login system.  The system tries to figure out who you are and basically if you DON’T have a key, it tells you how to get one.  The thing is, 99% of the people using the site have a Penn Key.  The site should just have a Penn Key logon right on the first page.  If you don’t have a Penn Key, then you can enter the system to get a logon.  

Upon signing in, I’m taking to my Applicant Home Page.  Here I can see a link to my current application my semester in London this fall.  I also see “My Messages’ which is basically all the emails I have recieved from Penn Abroad since I signed up.  There is also a spot where I can sign someone up to be CCed on all my abroad emails.  I can also edit my address on this page (I’m not sure why I can edit this aspect of my profile, but not anything else, from the home page).  

The application page is fairly clear and has a checklist of everything I need to hand in.  The navigation on the side has links to many articles about going abroad, detailing in long prose the process.  I feel like this information could be formatted into a roadmap/ flowchart type of thing to make it more digestable.  No one is going to sit through reading all of this information.  Some of the pages have links to more information, which comes up in pop-ups.  I don’t understand why they’d have tons and tons of information in the original form, and then have some of come up in pop-ups.  The pop-up seem unnecessary.   It doesn’t help that the information is presented in a very plain boring way as far as colors, typography, and style goes.  Penn Blue and Red is the only color we get.  The hierarchy of type is established with the standard Penn CSS format.  The grid is consistent, but variety may have helped make the site more interesting.  I understand that the site is trying to present a LOT of information but no one is going to absorb the information if it isn’t presented in a pleasing way.  There are no icons and no imagery other than the pictures in the abbner, which change from page to page.

There is a working search function powered by Google.  The most useful feature is the application page, especially the checklist.

Case Study 4: Tumblr

Tumblr.com is a new type of blogging site.  The blog is like a scrapbook.  You can grab text, quotes, videos, pictures, and songs and post them to the blog in a variety of ways.  It can function as your standard text blog, but it’s not set up primarily for that.  As a registered user, you see your Dashboard, which is a very basic posting system.  You pick the type of post you want to make and the relevant interface comes up.  Because this is extremely basic (in a good way) I will focus on the site as a new user/visitor.

On the home page, in GIANT lettering, Tumblr announces itself as the Easiest way to blog, and offers input fields to register right there.  I love this feature, especially because the registration form is so simple: email, password, blog URL.  Below this enticing registration banner, there is a Popular Stuff from the Tumblr Network section.  The posts on Tumblr all have a “Reblog” button in the top right corner.  This reposts the same posting to your Tumblr instantly, so things become viral quickly on the site.   This Popular section shows what has been reblogged the most.

There is a small top navigation: Sign Up, Log In, and Explore.  Explore is a drop down, with menu items such as Radar, Directory, Trends, Map, and Themes.  Some of these titles are more obvious than others.  Also at the top next to this navigation is a search box. 

The Radar section doesn’t become any clearer once you’re inside.  It seems to be similar to the popular, or perhaps it’s a random section.  It’s basically a giant quilt of Tumblr posts.

  I suppose it’s an interesting way to browse the site.  The Directory is broken up into sections such as Staff Picks and Music.  The thing that annoyed me about this page is that there isn’t actually a full directory obviously available on that page.  There are categories you can browse, but no full list.  Trends is also an interesting way to browse or learn about the site.

  It lets you put in KEYWORD vs KEYWORD and then creates a chart that graphs their usage on Tumblr over the last few days.  The default comparison was Canon vs Nikon.  Apparently Nikon was really popular to talk about near the end of April.  Map was really fun.  It displays a giant google map and then moves all over the world as people add posts to Tumblr.  When it gets to where the post is coming from, it displays it in a little speech bubble.  I thought this was a really fun way to see what’s going on with the site.  The Themes section displays popular, new, and featured custom themes for Tumblrs, that are downloadable.

The navigation for the site is overall extremely basic.  The site is completely geared towards function.  Tumblr is really an online tool than a presentation of information.  Each Tumblr itself is completely flat, ie a chain of postings.  You can’t organize into folders or anything too fancy, which I like.  The imagery of the site is very Fisher-Price/cartoony/bubbly, but not obnoxious.  It makes it feel very easy to use and highlights the content of the postings.  The type is very clear and obvious in hierarchy. I feel that Tumblr is constantly seeking to make itself as user-friendly as possible, and isn’t trying to sell anything.

Case Study 3: Valet.com

Valet is a men’s fashion site that provides articles on trends and products.  The navigation is two-part.  The primary navigation is the horizontal menu at the top of the page, which remains there as you peruse the site.  There is also a site map at the bottom of the page.  The home page is set up to have different featured articles and headings, such as Ask Valet, Essential Trends, Most Popular On Valet, etc.  This format is mimiced in each specialized section found in the top navigation.  In essence, the navigation bar at the top acts like a filter.  The page remains the same, but the content in each box becomes more specialized.  The home-page button (an icon of a house) is always there, but I didn’t notice it at first.  

Once in the articles, the site gets a little confusing.  The articles can be very very short, and it’s not clearly indicated if there is more to the article.  Also, many articles are actually links to Valet’s online Handbook, which is formatted slightly differently than the rest of the site and has it’s own identity/branding/logo.  This is unfortunate because it ends up looking like a website within a website.  The architecture is not very deep.  The amount of linkage makes the site look massive, but a lot of things are just linked in multiple places on one page.  The amount of linkage and large fonts with little variety combine to make the site cluttered.  Padding and leading would do wonders for this site.

There are some interesting things to note about this site.  First, the breadcrumb is in the title of the page, ie at the top of the browser window.  I don’t know if this is the most visible spot for a breadcrumb, but it could be just that I don’t usually look there for a breadcrumb, or at all.  However, if I got used to it being there, I’d say it’s a good way to save space on the actual page.  It works just as effectively.  

I mentioned that the pages are short and you aren’t sure if there is more.  This is in part due to the way the articles are presented, which is atypical for sites of a similar genre.  The pages look like day-to-day rip off calenders.  The date is very big on the upper left.  There is usually a large image as the focal point.  And then there is a short blurb of text underneath, which sometimes links to relevant sections of The Handbook.  The articles seem to be about the imagery, but they aren’t.  They are trying to provide useful tips or trend alerts.  The pictures are pretty, but their size and position make them seem more important than they are.  The colors on the page are minimal because the images command the eye.

Another interesting aspect to this site is the fact that they almost never have text within an image.  This means that all the text they use is highlightable actual HTML text.  In many cases this is overlapping the images, and it looks nice.  However, because of the complexity of the formatting, the text is sometimes misaligned, cut-off, or just in the wrong spot.  For this reason, I would get rid of this feature.  Also, it would allow them to use a font more interesting than Georgia (although it’s working pretty well for them at the moment.)  

Case Study 2: Slate.com

Slate

The objective of Slate.com is to provide daily news on politics, science, and culture.

The number of navigation systems is unclear.  The website is a collection of articles.  The basic navigation system is a drop-down menu system divided into categories of news, such as "Arts", "Business & Tech" and "Science".  The two categories on the end of the menu are "Podcasts & Videos" and "Blogs".  The menus contain lists of current stories in that topic.  It is unclear how the stories that appear in the menu are chosen.  Below the list of stories is a link to see all stories in that category.  Below and clearly divided from those is a link to another story, which is labeled "SPONSORED CONTENT".  The leading on that section of the drop down menu is crowded.  Each story is also labeled with the column they belong to and the author.  This makes for a very busy drop-down menu. 

The most eye-catching navigation feature of the homepage is the slideshow of featured stories containing interesting photographs and typography.  Slate apparently picks three stories each day and creates an image for each, to put into this slideshow.  To the right of the slideshow is a list of other stories. 

To the right of this section, there is some sort of media section, with different tabs along the top.  The tabs are "Today in Pictures", "Cartoons", "Doonesbury", and "Today's Video".  At least, this is what I THINK they are labeled.  A search box is overlaying this feature in Safari, obscuring the tab titles. 

Below the slideshow is yet another list of stories and smaller pictures, organized in a sliding horizontal list.

Below this are TWO MORE navigation systems.  One is a column that organizes the information in different ways, such as by columnist or "briefing", whatever that means.  The other is a list of today's stories, which can be changed by a tab at the top to display blog posts.

Down a little more you find another way to get to stories, via a list of Top Viewed and Top Emailed stories.

I could continue in detail, but I think it will suffice to say that there are four more ways to get to stories.  It's hard to say which of these is the most prominent.  Visually, the top menu seems like the stable, official method of navigation.  But it's hard to say what stories I am seeing and not seeing by taking that route.  Many of these navigation systems disappear when a story is clicked on.  The top drop-down stays, the media viewer stays, and the sponsored links stay.  

Once you get to a page, there is a breadcrumb at the top of the article that attempts to let you know where you are.  However, the breadcrumb "Home>The Oscars>Let's Talk about the Oscars" doesn't really show a hierarchy.  It seems like there are endless categories on the second-level of the site, and it's anyone's guess where a story might be located.  At least you can always get to the home page via the giant SLATE logotype at the top.  

The site seems to have the information to warrant a huge architecture, but it seems like there isn't really an architecture.  There are so many categories and different ways of finding the same story, it seems like a huge flat pile of information you have to rummage through.  The site map confirms this.  It is a list of hundreds of unhelpful categories such as "Television", "TV Club", and "TV Week".   Other sections had interesting, clever, but completely non-descriptive names.   If you are doing anything but browsing, the only reliable method of finding what you want is the search box, hiding on top of the media viewer.  The search results were very nicely displayed and labeled, and it seemed to do a thorough job.  

The typography is simple and seems to work, but the quantity of information on every page and the busy typography of the surrounding multitudinous ads really hindered its ability to organize the information.   The first thing I notice on any page is the huge bolded headline. The grid stays fairly consistent, but that the grid it self seems out of proportion.  The information extends down and down and down the page to the point that some information feels buried.  

The imagery was usually appealing and added to the articles, but the advertisement imagery was distracting.  The only real color was the maroon used at the top of the page.  Other (what seemed like sister -) sites were assigned colors in sections that linked to their stories.  

The biggest improvement Slate.com could use is a consolidation of categories.  There should be clearly named categories and sub-categories for stories to be filed into.  They should stray from clever and go for clear.  If they really want readers to associate stories with specific writers or columns, they should organize it by ONE of those methods.  Or provide the option to choose which method of organization is preferred.  I would also recommend trying to find a way to support their site that doesn't use intrusive ugly advertisements.

Case Study 1: www.whitehouse.gov

the White House website

The objective of the White House website is to keep people updated about the activities of the executive branch of the United States government and provide a basic history of former administrations, the White House itself, and the government in general.

There are two main systems of navigation. The first is a drop-down menu system across the top of the website. This interface acts like an awning to the website and remains present no matter what page you navigate to. The site map, the second navigation system listed at the bottom of the page, also stays put. The drop-down menus are more prominent because of their position and flashier graphics. This is a very logical place for navigation and it works well. The menus are titled by category and each drop down menu lists subcategories. Clicking on the category name brings you to a page with the same title, a short descriptive blurb, and a list of the subcategories. This could be called the scenic route. That is, using the list of subcategories in the drop-down menu bypasses the category pages. Similarly, clicking on a subcategory name brings you to the information and a list of the other subcategories within that category. You can always get back the home page by clicking the White House logo at the top of the navigation menu, or by clicking an American flag within the menus, or by clicking the title of the website, “the WHITE HOUSE”, in the top left corner. Breadcrumb menus can be found at the top of each page, identifying where you are in the site’s architecture. There is also a “You are here:” breadcrumb at the bottom of each page. I found the architecture of the navigation system to be very impressive and the most useful part of the website.

One clarifying feature was left out of the site’s design. The links do not change appearance after they’ve been viewed. I’m not sure it’s necessary, given that the subjects are so well divided and confusion about what has already been viewed would not be a problem. I also believe this could be an aesthetic choice. The designer(s) may not have wanted purple (or other colored) “I’ve been clicked” links messing up the look of their site. I suppose they could have had them grey out or something, but I don’t see it as an issue.

The site is fairly large in scope, but not in depth. That is, generally, the site only goes two levels deep, with the exception of the White House 101 page, which has links that display different information within the same page, the blog, which links to individual posts, and some other briefing pages, which contain frequently updated lists of links to proclamations and executive orders. The user is completely removed by the site by clicking the "Pool Report” link in the “the Briefing Room” category. This page is empty and drops the entire navigation system, except for the logo link back to the home page.
However, it is obvious that the designers chose to include a lot of information on the subcategory pages to keep the navigation shallow and easy. The site is generally flat, but as mentioned before, some articles and blog posts are only accessible within the subcategory pages. The site is searchable via a search box but I found the results to be shoddy. You can find the main pages easily but searching for content contained within the pages didn’t seem to work well or clearly.
The structure of the site is very clear and the hierarchy of titling draws the eye in a logical path. The first thing I notice is the title of the page. The imagery is appealing but not overwhelming, and very relevant to the information surrounding it. The presidential color scheme is very fitting, consisting of blues, white, and bronze.

The typography is very readable, consistent, and aesthetically pleasing. It would be hard to improve it. Some of the text that is formatted into blog formats looks a little crowded. Titles are generally bolded and/or all-caps and in a formal serif font, Georgia, while the body text is in Lucida Grande.

I found this site to be very well-design. The layout is crisp, appealing, and functional. The architecture is simple and serves its purpose. It's hard to find much wrong with this site except for the shaky search function.

Number One

Whoa!

1. This
2. is
3. a sample.

COLORFUL.