Extreme Makeover: Web Edition

I'm talking tonight at StartPad at 6PM. The topic is the Sampa redesign, which was an "extreme makeover" -- a complete redesign of the entire user experience. I'll be talking about the whole process, from end to end, including what decisions we made, why we made them, and how users have benefited from them. Plus, you'll be able to ask questions (be nice!).

There is still some space available.

Sign up here: http://www.startpad.org/wiki/startpad-countdown-7-extreme-makeover-web-edition

Extreme Makeover, Web Edition

Regular readers of this blog have heard about the Sampa redesign. First, I wrote about the array of confusing options in the original Sampa UI and that the solution to the confusion was, essentially, to start over. Next, I wrote about making the case for the redesign and what it took to sell the design and make it happen. Last, I promised to write about the new design itself. But, as often happens, I never got around to that third post. I've been busy, and not just at work -- see thisTangent for a few of the other reasons.

And now ... sorry, but this isn't the third blog post either.

I still plan to write that blog post, but I've got something better for you. On June 24th, I'm going to give a talk at StartPad about the whole process. I'll touch on those first two topics, but I plan to spend most of the time on the actual redesign -- what decisions we made, why we made them, and how users have benefited from them. Plus, you'll be able to ask questions (be nice!).

You can get more info and to sign up on the StartPad site.

One Size Doesn't Fit All

The photography industry is just like the software industry... Recently, a woman came up to me to ask me some questions about her camera. She noticed the Nikon D300 I was using and figured I must know something. She had just bought a Nikon D40 kit with two lenses. She was on vacation and had it shipped to her hotel, so it had literally come out of the box hours earlier. She wanted to know ...

• Why didn't it show her anything on the LCD on the back when she was taking pictures? She was trying to hold it out in front of her to take pictures.
• How did you zoom? She'd looked all over for the zoom buttons and couldn't find them. It didn't make sense to her that she would be zooming by rotating the barrel of the lens.
• When would she use the other lens that came in the kit? And, where was it? Back at her hotel, of course.

There were other things too. The kit had come with a camera bag, which was back at the hotel with the extra lens. A lot of good they were going to do her there. I gave her a bunch of tips she wasn't asking for, and, just as I was suggesting that maybe she should buy a UV filter to protect her lens, she wiped the front of the lens with her sweater. Aargh! I hinted to her that maybe she had bought the wrong camera. Maybe I was too polite.

The D40 is a great camera for its price. It's a great starter DSLR. But not for her. She didn't understand it, none of the advantages of a DSLR mattered to her, and she'd spent twice as much money on it as she would have spent if she'd bought the right camera -- like a Nikon P80 or the Canon S5, or maybe even the Canon SD850 that I got for my kids. They're all great cameras. If you read the reviews of the first two on Amazon, many of the reviewers criticize them for being what they are. They, like the D40 owner, miss an important point: the manufacturers make different models because they have different customers.

Restating the obvious, you should buy the camera that's right for you.

If you're shopping for a camera and don't know what to buy, start by making a list of the criteria that matter to you (e.g., size and weight, zoom, resolution, viewfinder, live view LCD, flip-around LCD, interchangeable lenses, controls and menus, price). Put these in order of importance. Then, rank each of the cameras that you are thinking about by each of these criteria and see which one comes out on top. You may well find that two similar cameras from different manufacturers rank at the top. Then, it's a matter of feel. Try them out. Kick the tires. See which you like better. You can't go wrong with any of the major manufacturers.

There is no "best" product.

The same thing is true in the software industry. Consumers frequently have the perception that a given product or web service is the "best" or that they think that in order to be the "best," a product has to meet everybody's needs. Marketers tend to perpetuate this myth. But it is a myth. A major difference in the software industry is that many companies only offer a single product in a given category (or only one product, period). To get a different product, you have to go to another company.

In the case of Sampa, we have a web service that allows people to easily build private, personal web sites to connect with their friends and families. It's not a floor wax or dessert topping!

If you want to socialize with strangers, go to Facebook or one of the many social networking sites. If you want to send messages to your friends every 10 minutes, go to Twitter. If you want to share all your photos and commune with thousands of other photographers, go to Flickr. If you're a business wanting a web presence to sell things online, go to Ebay, Amazon, or a multitude of other companies. There's no shame in sending a customer to another place where they'll be happier. But, if you want to build that private web site for your friends and family, go to Sampa, because that isn't what Facebook, Twitter, Flickr, etc., do.

There is no "best" product for everyone. If you're a customer, figure out what you actually want to do and pick the product that fits.

If you're a developer, find your customers and meet their needs. If you try to satisfy everyone, you'll satisfy no one.

Making the Redesign Case

Previously, I wrote about the old version of Sampa and how I came to the conclusion that it was necessary to create a completely new UI. But I still had to make the case for such a radical redesign and I didn't have the time (or the money) to run usability tests or create a variety of designs that I could compare. But, I did have a few things going for me:

• There was quite a bit of data about what people had used and not used in the old Sampa. Marcelo's built quite a stats engine. Of course, the data has to be taken with a grain of salt, but if something was particularly hard to do and users went through the pain anyway, I could pretty much assume it was valuable. I knew we needed to prune the interface and focus on the key features for our customers.
• There was a decent understanding of the target market -- probably as good an understanding as you can expect without the benefit of hindsight (it's always easier then!).
• There had been a lot of research about competitors and potential competitors and even some non-competitors. This enabled me to make a much shorter pass through them than would have otherwise been possible.
  
• Someone else had created a partial, rough proposal for the UI that went in the direction of making it look more like a standard Windows or Mac application. My inclination was to move in the opposite direction and seeing a fleshed-out version of the system as an app helped solidify my opinion.
• Finally, I knew I didn't have to create the final art itself. I was going to be able to work at the conceptual level and there were graphic designers who would make it look beautiful. This saved me a lot of time.
  

I quickly set out some primary goals for the new user experience. As much as possible, we would:

• ... accommodate easy exploration and provide users with the ability to tinker.
• ... give users both instant gratification and the ability to procrastinate.
• ... give users a warm feeling and a feeling of ownership.
  
• ... provide for both incremental construction and re-entrancy.
  

I also concluded:

• All editing and site management would be in context, but not in place. At all times, site owners would see the site pretty much like their visitors would see it.
  
• We would provide instant (one-click) access to the top things that users wanted to do.
• We would organize the UI around the way users think of their site.
  

This was all fine and good, but, in order to do the next step, I had to go out on a limb. Basically, I had to design (almost) the whole experience in order to show what it could be. If I couldn't do that, how could I convince anybody that it was viable? Even though I didn't have to create the final art, it had to look good enough to make the points and not be distracting. So, I did what any reasonable person would do -- I went home, closed the door to my home office, and spent a solid week drawing and redrawing until I was happy.

And the result? Not only was the redesign given a go, but the design was solid enough that we were able to proceed with implementation and final graphical design in parallel. Coming up, I'll talk more about the new design itself.

Here are two unmodified mockups from the set that I drew in those first two weeks, along with similar screen snapshots of the current live UI, plus one bonus image of the new UI.

A Few Hundred Options

They say a picture is worth a thousand words, so let's start there:

Unfortunately, this is just a part of the picture. There's more, lots more. Beyond what you see here, there are another 40 or so items that are available. Altogether, you can get to a few hundred possible options in two mouse clicks or less. You’ll commonly see a statistic like that touted to indicate that an interface is good.

But, it's not a good thing -- it's overwhelming. As a user, I don't know why I'm here. The things that are shown are all over the map -- ranging from configuration to content editing to status information that's not actionable -- and there is little to help the user get oriented, figure out how the system works, or accomplish the tasks that they want to get done. Although the options are organized into sections, the sections aren't parallel, which makes them less useful. The result is that it's a Winchester Mystery House of an interface.

I could analyze this interface to death, pick apart every piece of it and tell you every single little nitpicking thing that's wrong with it.

But I'm not going to.

So why am I showing this random interface to you? Well, in November, this interface became my problem. It's the old interface of Sampa, a web site creation service, and I joined Sampa to tackle it. So what did we do with the interface?

We tossed it.

And that's the real reason that I'm not going to nitpick the old interface. It's history. I wouldn't have joined Sampa if there hadn't been a clear commitment to make big changes, whatever they were. Paul and Marcelo (CEO and CTO, respectively) signed up. At the beginning, I'm not sure they really knew just how big those changes might be.

Even before I started, I had reached the conclusion that the interface was unfixable, but Paul and Marcelo hadn't. Just today, Paul reminded me that he had thought that I could just fix the old interface. This meant I really had to make the case for a new interface.

To cut to the end of the story, we launched a completely new Sampa today.

If you're lucky enough to be presented with a problem like this, I highly recommend looking at the big picture. You can't take an unplanned explosion and overlay it with a solid foundation. In the long run, you'll regret all the time you spend on bandaids. It's a big commitment (and you might have to make the case), but you need to build a new foundation and provide yourself room to grow. Next, I’ll write more about how I made the case and, after that, I'll discuss Sampa's new UI foundation.

I just wish I could solve the clutter in my garage as easily.

Update: Follow-up article: Making the Redesign Case
Press release about launch: PDF