Zoto (The Before & After)

Zoto is an online photo hosting and sharing web application. I work for Zoto as their designer and in the next day or so my redesign of the entire site will go online. I'd thought I'd share some thoughts and insights over the redesign process and give you a peek at the new interface.

The Back Story

In October of 2005 I sat in a conference room across the table from Zoto founder and CEO, Kord Campbell, during what I can only describe as the longest job interview...ever. (Seriously, the man is a talker)

Aside from trying to figure out if I was a Sooner fan and whether or not I would be able to work with a male-only team of programmers who use the kind of language that would make sailors blush, Kord wanted to discuss my thoughts on the Zoto interface. He shared his unhappiness with the 2.0 interface, his frustrations, and his vision of where he wanted to take the company. The floundering startup needed to be revived. One of the biggest of Campbell's initiatives to turn things around was a complete redesign/rebranding effort.

We were either both on the same page that day or I was the only one who applied for the job because a few weeks later I started work at Zoto. I didn't own a digital camera so I went to the store on my lunch break and I bought one. And although I had never heard of web 2.0, ajax, or a little company called Flickr, that was all about to change.

Today

It's been over a year since that meeting and in a day or so the new version of Zoto is going to launch.

Redesigning Zoto has been huge undertaking. Designing a web application isn't even in the same ballpark as designing a normal website. There's so much more to it. UI design requires thoughtful analysis of why things don't work, how they can be improved, determining what is important to the user, anticipating how the user will react, and developing smart interfaces that help the user complete their tasks. It's also a juggling act between content, navigation, structure, functionality, and aesthetics that requires inventiveness, patience, and the occasional ritual sacrifice of chickens.

The Approach

The first step I took was examining the Zoto 2.0 interface and pinpointing what wasn't working.

Assessment

My initial (straight from the gut) reaction to the previous version of Zoto was that it lacked 'personality'. It felt homogenized. It wasn't that it was bad. It was worse than bad. It was forgettable. The UI was a disaster. It was clunky and difficult to use. Content was poorly organized. The navigation was a confused mess and the logo was a joke. To put it simply, it didn't do a good job of letting people organize, view, and share their photos.

Zoto Home Page (Before)


Zoto Home Page (After)



User Feedback & Competitive Analysis

Another important part of the process was to gather feedback and take a look at our competitors in the market.

Users are a great source of feedback. We put together a user list of features requests and complaints. We also found some nice people to be our guinea pigs in a usability study.

We did some competitive analysis (mostly I did that part). You may not believe you need to do competitive analysis but it's savvy. At least one person on your team should be keeping up with what 'the other guy is doing' because sometimes 'that other guy' does something right. You can learn a lot from your competitors, especially the ones that are succeeding in the industry. I signed up and tried every photo sharing service I could find (The good, the bad, and the ugly). I took pictures (mostly of my dog and my iPod). I uploaded photos. I organized them. I shared them with others. In essence, I became the user.

Clarify The Message

Who are we? What is our offering? What are we trying to communicate? Establish it and state it before you begin to design. Make sure your design is effectively communicating the right message.

The Zoto homepage redesign is good example of this on a micro level. The design needed to communicate both the tangible and intangibles of our product. It also needed to direct the user to take action (sign up). The goal for the page was to have users land on the page, know immediately that we were about 'photos', what we offered, and how much it would cost. Keeping the message in mind I was able to create a simple design that accomplished this effectively.

Goals

Throughout the process I tried to maintain design goals and revisit them as needed. Having these goals helped keep the design process on track. These are useful points to keep in mind for the design of any web application.

1. Keep it simple. What is the focus? For me, the focus was Zoto (a photo hosting and sharing site). The photos were the story. It was important to design an interface that did not distract from the photos.

2. Keep it clean. Remove any excess clutter or unnecessary elements. Remove obstacles that prevent the user from completing their tasks. Organize content into logical areas.

3. Keep the user in mind. Forget what the designer, the programmer, and the CEO want. Do what's right for the user. It may help to remember the following:

If programmers had their way, the web would just be a bunch of pages filled with big blue hyperlinks and boobs.

If CEOs had their way, the web would be full of nothing but banner ads and Google ads and blog entries espousing the greatness of CEOs everywhere.

And if designers had their way, the only pages allowed to exist on the web would be the aesthetically pleasing ones and sites for funky sneakers. (There would also be strong internet laws prohibiting the use of flash intros under penalty of death.)

4. Make it pretty. Don't discount the 'joy' factor when approaching usability. Virtual spaces aren't so different from real spaces. Some draw you in, keep you there, and make you want to revisit them. Others turn you off and send you packing, never to return. Discount the joy factor and you'll be that much closer to failing.

Remember: Consumer/user big warm fuzzy over your product or service = $cha-ching.

5. Accept that it's not perfect. It's going to have bugs, quirks, and if your CEO is anything like mine, it's also going to have the WRONG shade of pink for the hyperlinks. Compromises will be made. Let go. Release it. Re-evaluate it. Fine tune and adjust it. Add to it. Just because it's out the door doesn't mean that it's done. But if you never get it out the door no one is ever going to see it or use it. Don't over analyze. The worst thing that can happen to a design is for an indecisive decision maker to tweak it to death.

Now...A Peek At The Interface

Viewing: The Zoto lightbox offers a variety of photo toggle options so that users can control their viewing experience. Filtering options, a calendar, and a tag cloud view are available to help users easily find what they want and explore.



Organizing: The organizer seamlessly shifts the user back and forth from a viewing mode and an editing mode (without ever taking them away from the page). Users can quickly tag, email photos, edit dates, add and edit titles and descriptions for multiple photos with a few clicks of the mouse.



Sharing: Users can create albums, customize the look of their albums and organize multiple albums into 'sets' (categories).



User Controlled Content: Users can control and customize the content displayed on their home page via 'widgets' that can be added, removed, and dragged to new positions.




What's next?

Well, unless someone calls to offer me a job and agrees to pay me BUCKETS of money (yes, please) it looks like I will be hanging out at Zoto for a little while longer. The interface still needs tweaking and we have plans to move forward by introducing groups, an expanded community section, slideshows, custom badges for blogs and MySpace pages, geotagging, and new album designs.

But mostly, I think it's time for a vacation.

Zoto.com (will be the official url when the site launches)




Technorati Tag:[zoto]