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.