The Roach has a friend, who in many ways is the complete opposite of him - not in terms of mass anymore, though. The Roach is patently anti-social, while Russo likes to have a drink (or 7) with friends whenever he can. The Roach works for a big, old and what some of his other friends consider to be a "safe" company, while Russo works for a young, energetic startup called Urban Ladder. The Roach was wearing a standard black T-shirt required of all true disciples of the Dark Side when he met Russo last, who was wearing a pristine white shirt, probably manufactured by the last startup he worked with. Right. I think that should be enough differences to justify my opening statement.

Anyway. Urban Ladder - interesting concept - selling some pretty neat furniture and accessories online at very compelling prices. I happened to meet some of the other faces behind the scenes when I last met Russo in my black T-shirt, and got into a conversation about how they could perhaps improve their site. I just shot out a few things off the top of my head back then. But sitting at home alone on a Saturday, I thought, "Hey, let's use what I know in a more scientific way, and apply what I learned from the recent certification course I attended, and help these guys out. After all, they seem like a nice bunch, and who knows? Maybe I'll get paid for doing this kind of stuff, someday…"

That, and "This is going to be a really long article." Well? Let's get straight to the design! Actually, no. Let's first figure out what users want.

0. Understanding the Context and Users

Step 1 is understanding the context of everything - what are the business goals, who the target users are, any constraints one needs to be aware of, the kind of brand that needs to be projected, stuff like that. With Urban Ladder, as a startup, I guess their goal is to get established as one of the places people think of when they think of buying affordable and un-ornate furniture, online. They want to project a brand that says "don't worry, we have high quality stuff at great prices, and buying from us is going to be really convenient for you", and their target audience is people in Bangalore, Mumbai and Delhi/NCR (aka the Wild North).

Step 2 is trying to understand who the actual users of their site are, what they're trying to do, when and where they'd usually be doing this activity, and how they usually do it. This who-what-where-when-how business is called the user's Mental Model, and that's what we need to figure out if we really want to put the U in UX.

Well, in Urban Ladder's case, I'd say their typical users will be young, salaried professionals, around 28-40, married, 65% female, fairly comfortable with using the internet, who probably buy a lot of other stuff online but probably haven't ever bought big/bulky things like furniture off a site so far. Now this is all just assumptions the Roach is making, but they're assumptions based on trying to imagine what kind of people would end up on the site, so there's a touch of intuition involved. The Roach's antennae help with this. You wouldn't understand.

These people would generally want to browse around, look at the entire collection, and probably make several visits to the site before they actually buy anything. They are probably always going to be visiting it in a relaxed, lazy Sunday sort of mindset, where several other things will probably distract them in the middle of their visit. At least initially, the bulk of the users are probably going to buy something that's small and looks interesting, that they may not really "need" - like an accessory, before they start coming to the site for some of the bigger stuff like Dining tables - at which point they're also more likely to recommend the site to friends who may have just got married and are setting up a new home.

Again, all of this is coming from me imagining things, but they help form important things like User Profiles, Task Profiles, and Personas that help identify who the average site user is and think from their perspective.

Step 3 is doing some research, like interviews and surveys, with the kind of people we imagined would be coming to Urban Ladder. This would help refine what we know about who the users really are and their conceptual model. Of course, I am not going to do that, sitting here on a Saturday night - though I could if I was like most humans, out mingling with others on a Saturday night - though humans generally don't ask questions about how they buy furniture or how they make online purchases when out on a Saturday night.

Step 4 would be to take what insights we got from the Imaginary Saturday Night Data Gathering to come up with some initial design. For this we do things like Scenario and Task Analysis - to help design user interactions, and coming up with an Information Architecture - to help design how the content on the site should be arranged.

So now that we have a fair idea of who the users are and their conceptual model, let's get down to some concrete stuff - let's look at the design of the current Urban Ladder site, and see what we can improve to make it fit better to what these typical users would be looking for.

The way to analyze the site is to look at it from the perspectives of Navigation, Presentation, Content, and Interaction.

1. Navigation

Looking for Ladders?

Let's start with Navigation. The site features a persistent navigation at the top with a second level of navigation revealed on mouse-over. People buying furniture offline, and on several other established sites, are more used to looking at furniture categorized by which room it is for, rather than what item it is - walk through any furniture store and you will find things are usually arranged as rooms. However, because Urban Ladder does not have a range for all rooms (yet!), I can understand their decision to go with their Navigation structure - just that it may not fit what users are usually looking for, adding to their Intellectual load. The mouse-over second level navigation comes in handy here to help users get a scent of what exactly one can find within each section, and the furniture icons are a nice touch, though having a section for "Sofas" and "Seating" separately may lead to a little confusion in user's minds - again, nothing severe, but it adds to the Intellectual load on the user, which could perhaps be minimized by clubbing these two sections together. Since users will be in a browsing kind of mode, the use of persistent navigation is a good choice, allowing users to switch between sections as they please.

Urban Ladder does provide a search, but the choice of the arrow instead of the usual search icon is strange. Users usually rely on the search only if they can't find something through browsing, or know exactly what they're looking for - it will probably be a rarely used feature given the context in which typical users will probably be using the site. But because it is of the similar shape and shade, located in proximity, and in a common area as the primary navigation, according to Gestalt principles, it is probably going to be distracting for users.

Once you navigate into any of the sections, although we have breadcrumbs to tell us where we are, the primary navigation could have been used to highlight which section the user is in, fulfilling one of the 4 key goals of a good navigation system.

This is how I'd have designed the navigation…

You are Here.

You're welcome.

2. Presentation

Coming to Presentation, again using Gestalt principles, and looking at the home page holistically, the page looks like it's made of 4 vertical layers - the footer with its links, the "Join our community" thing, "Customer Stories", and the rest of the page, including the header and the Facebook Like Box. This big block looks like a single piece, although I don't think that was the intention, because of the common area they all occupy - the unbroken white background.

The first impression is very important.

The rotating highlight images draw attention, because of the fact that they are large images, and changing, but they also tend to break the 3-column grid with images just below. This is especially evident in the case of the highlight image captured in the above screenshot, where the distinction between where the image ends and the 3 columns start is blurred by the unbroken connecting white area. This tends to not provide users with a neat set of alignment points to focus on, causing a slightly cluttered look.

The "Great Furniture. Made Easy." Block - a key branding message, definitely should attract attention because of the use of a bright, saturated and contrasting color, but the effect is diluted because of its placement amongst other large images at first glance, and it looks like it is part of, or related to, the shoe rack image alone. Users will also get distracting from this key branding point by the images changing in the carousel above it, which have similar right-aligned orange blocks with text in them.

The shadow around the "Customer Stories" and the large saturated heading make it stand out clearly as a separate section. The "Join our community" section, being a bright saturated orange, appears to float above the background, and is wider than the rest of the content block making it draw a lot of attention - a great thing to help get people to sign up and grow Urban Ladder's reach.

The wood texture on the sides tends to draws attention away from the content, probably makes load time longer, and conveys little in terms of content. But more importantly, it makes the left highlights harder to spot at first because of the low contrast. These are really things the site should be making really loud and clear, instead of relegating them to the user's peripheral vision!

So, how would the Roach redecorate the home page?

Letting people know the important stuff in the first impression is very important.

I'd shift the key marketing/branding stuff onto the page, right below the rotating highlight images. It will get plenty of attention here, while also providing a nice way to separate the highlight images from other product images below. Note how I use it to reinforce the 3 column layout that was earlier not as clear (though in this image it's still not perfectly aligned since it's a quick mock-up, but imagine the 3 product images below would perfectly line up with the 3 columns created in the section above). The solid horizontal lines also clearly break the entire page into logical chunks that helps users quickly scan and focus on each.

There are a few more subtle changes as well. Note how the highlight images carousel now has a set of blobs that indicate which image is currently being viewed, and more importantly, how many there are. This simple reworking of the carousel controls allows users to easily switch between the various images without having to move their mouse across the page. Using Gestalt principles, it groups together the controls because of their proximity, and reduces the motor and memory load on the users. There's another key Gestalt principle I've used - redoing the icons used to communicate the shipping, warranty, payment options and security to look similar and consistent with the theme and colors of the rest of the site. The number of colors used on the page has been reduced to just the 3 used in the logo - with colors, less is more, and sticking to just shades of colors in the logo helps reinforce the branding.

3. Content

That's a nice desk…

When it comes to Content, the Urban Ladder site is quite crisp, but I found the product detail pages all contain the same messages for Warranty, Returns Policy, Surety of Quality, and Care instructions that pushes down the crucial "Related Products" section. It also makes the pages look dense, though the clear headings would help users quickly scan the content and skip text they've probably already read on another product detail page. It's still increasing the amount of information a user is hit with when they visit the page, and probably interferes with their mental model of browsing through a furniture store - you look at all the options on display in a furniture store, and probably want to read these details only when you've already decided on what you want.

An effective way to solve this, while also keeping in mind that Urban Ladder probably also wants to assure buyers at every step that they have quality products, is to still have the headings visible to provide users with enough scent of Urban Ladder's quality and customer-friendliness, and rearrange this static content to appear in tabs or an accordion. This would also free up space for more product information, integration of some social features, or any other contextual information, such as a list of recently viewed products - something that would be very useful to our typical users who we visualized as browsing around on a Sunday afternoon, probably while watching TV and/or being surrounded by other distractions.

That's a nice desk… Oh Wait! That other one is exactly what I was looking for!

Some of the text in the "Features and Specifications" could also probably be dropped - like the 3rd bullet point, and the Assembly instructions could perhaps come under another heading of its own - this will also highlight the fact that assembly is required, which is not immediately obvious until a user reads through the content - don't want to end up surprising a customer when the delivery truck arrives with a box that looks a lot smaller than the table they ordered! But otherwise, the site is pretty good, giving a lot of detail and pictures to help users make a decision from the comfort of their homes, far from the maddening crowds that infest malls on Sundays.

4. Interaction

Finally, we come to Interaction. I haven't yet ordered anything from Urban Ladder, and that's where a true test of the interaction would come into play. One thing I have noticed is that there are places, such as the navigation, where visual feedback to selections could be improved, such as highlighting the second level navigation option I am currently selecting.

A deeper integration with social features, allowing users to review, rate, recommend, and share products would be something that would help user experience, and drive sales, and simple conveniences like being able to save shipping addresses, or specify delivery times - very important for busy working couples who form the bulk of what I think would be the typical users - would be great, and I'm sure the team at Urban Ladder have a bunch of great ideas themselves, just waiting to be implemented.

Well, I warned you this would be a long post, and would like to congratulate you if you got this far, and myself, if I kept you interested till here. It is a little technical, but that's because design is quite a scientific process, backed by tonnes of research, and not just about making pretty pictures. Not many in the industry understand this yet, but things are changing, slowly…

Hope Russo and team find this stuff useful, and set me up with some sweet furniture. *wink wink*