All posts in Design

Exploring Bebo – How I’d improve it

I’ve been playing around with bebo a lot the last few days. (You can add me here, if you actually know me.)  More specifically I’ve been playing with their developer platform, which as you may or may not know is a clone of Facebook’s.

So aside from having an impressively low number of friends on the site, there are a number of usability issues and quirks I wish they would fix.  So here they are:

  • Improve your navigation – finding apps, and things to do on the site is harder than it should be. Add a subnavigation menu or something! Or a sidebar.
  • Improve the forums for apps
  • Improve the documentation for developers, seriously all your revenue growth will come from this.
  • Rework your app directory, facebook’s app directory stinks, and yours is already terrible and its been open for a few days.
  • decide what your focus is going to be, are you all about the users, the relationships, or what? Once this decision has been made, rework your homepage and personal start page to reflect that.
  • merge with virb. just to get their design.

If I had more time I would’ve posted screenshots and more. If Bebo wants me to do some ideas, they can contact me via my bebo page :-)

Designing with grids, my first attempts.

So I’ve been playing around with grid based layouts a LOT lately. After seeing the blueprint css framework, I decided this was the perfect time to try designing with grids. For those of you who know me, I have been completely self taught as far as web design and interface design is concerned. Everything I know I learned from reading books or trial and error, so I don’t have the formal background most designers have regarding typography, style guides, etc. Anyway, back to the grids I saw on blueprint here, I decided to make my own grid template for laying out pages and wireframing them.
sample layout grid.
So to begin I went and created a pattern out of the background image in the grids sample above in photoshop. One thing to note with grids, they are supposed to be based on a font size as the defining unit for the sizes. Again, I’m not a graduate of any graphic design school, so my methodology might be weird. Here is how I start a design using grids (the wireframe at least).

Step 1: Create the canvas
First I usually create a document in photoshop 960px wide and 900px high (i’ve got a big screen, and usually end up making the page longer) and either a white or a transparent background. Here is a small example. Generally the grid layer I put over everything else, and make it translucent so i can see where everything is relative to the grid.
colored grid layout
Another technique I tend to do is color code the site, so I have an idea of the content, the auxiliary material, the navigation, branding, etc. If you group the colors, it should help you get a better feel for what type of stuff you are really including in your design. Is your design looking 60% ads? Then chances are you need to rethink your site.

So with these steps in mind, you can theoretically start figuring out your layout/structure. The use of grids, especially frameworked grid layouts like Blueprint or YUI Grids will help you in regards to formatting your text, maintaining legibility, and giving your site a solid flow.

Next step will be an actual design, and then transitioning that design into a real xhtml site.

Designing for contingency

After getting stuck in vegas because of the delays associated with these storms, I realized that USair could have alleviated this problem by just creating a mobile version of their flight status page.usair

I could have logged on with my blackberry and been less frustrated. Now I get home, and see the following screen on usair.com. This is a perfect example of contingency design, or defensive design as the boys at 37signals would call it.  This is what happens when the design team isn’t expecting delays at EVERY airport the company services.

I would probably have made the div scrollable or once the number exceeds 4 cities, make the user click through. as is, that list is unusable.

Central America: the next spot for online growth

So a distant relative of mine, Jorge Arango, in Panama (the country, not the party town in Florida) just posted info about their first usability/IA workshop in the area. UXCamp Panama was probably the first of its kind in all of central america, just don’t quote me on that.

Its great to see growth in the communities of web developers all over the world. Now if only we could get the UXCamp to come here to Miami too…

new business cards

For those of you interested in business cards and other print design, check out my new business cards on flickr.

Mashable reinvigorates itself

My good bud Pete Cashmore just relaunched his site Mashable.com. Bryan Veloso of Avalonstar did the redesign. Overall its a bangup job they pulled off in a mere 2 days! Pete’s also got a new subsite MashCodes up too, it has all you need for myspace layouts and the such.

Welcome to the 21st century SWA

Southwest Airlines FINALLY redesigned their site after years and years of it looking the same. The new site sports ajax (or javascript for you purists), clean design, and most importantly it lacks the stodgy 1995-esque design it had been sporting since probably 1995. I have a feeling that this will probably increase their checkouts/conversions by 1-2%. Mind you I’m guessing entirely, but I suspect those who werent comfortable with the airline’s budget looking websitebefore might be more inclined to entrust their faith in the site/company.This site raises 2 questions:

  1. how much do people associate your site’s design with your company’s image (southwest=cheap airline=cheap looking site?)
  2. Secondly does the adage that people judge a website by its appearance in less than a second apply to corporate sites for companies like southwest?

What do you think?

Building web-apps: reDesigning search (II)

Its been a while since my last post here, and for that I apologize. Been working on various design projects, and my own webapps i mentioned earlier. With that aside, one of the issues I’ve been pondering lately has been that of the search engine start page/main page. There are various degrees of this, you have your Google, your ask.com, your yahoo, all with different takes on what the default domain should show.With Seekum, I decided that we needed to reach a blend, a cross so to speak between the two. On one hand we want to retain the maximum speed we could, but on the other, I felt it would be neat to see that the search engine is a living organism. So with that in mind I decided to take a page from technorati which lists their top searches on the front page, and also play off the tag cloud phenomenon. My thinking was, that these two bunches of information would provide that little extra that maybe 10-20% of the users would appreciate (remember at this point our vast majority of users are techies who hear of us from blogs), but wouldn’t interfere with the rest of the users interactions.The fact that we’re doing this to intrigue this small percentage of people might surprise some of you, but when you think about it, it shouldn’t. If you follow Umair Hague, and more recently Bradley Horowitz’ piece on the content creation pyramid you’d understand that most content is produced by the minority, but enjoyed by the majority. The examples they reference are all what I would refer to as easily identifiable content, whereas with Seekum, it is more of an intangible content this same group is contributing to. It is this whole user defined search that I’m talking about, the simple actions of voting things up and down are in fact a participatory content that the group is contributing to. The other way to look at it is that the search results are the content, and the users are contributing to it and helping create/recreate it.seekum screenshotSo now that I’ve bored you with the content facet of the search model, I have to get back to the reason you are all here: the design aspect. If you take a look at one of the protoype screens for Seekum’s new results page, you’ll notice how we’ve decided to lay out the content. Right now it doesn’t look that spectacular, but I’m hoping that it is exactly that which gets people accustomed to it. Although there is alot of stuff going on in the search results (tagging, voting, and such), we are trying to make sure that it doesn’t interfere with the actual search results, what you came looking for in the first place. This might strike you as just some run of the mill html, but it takes alot of thought to structure everything in such a way that you get exactly what you are looking for, and not alot of what you aren’t.In case you were wondering, or read this far down, the new seekum design should be rolling out this week. So stay tuned :-)