Design Samples

Well, I just got the bad news that Zoto will be closing its doors in about a month. It's a real shame but the money just isn't there to support a full time staff. We were really close to exiting a few months ago but the stars did not align properly (stupid stars). So now it's time to hang up our hats. It's been a great experience and I've learned so much during my 2+ years working at Zoto as their designer. It's a little heartbreaking but hopefully another door will open now that this one is closing. And if, behind that open door, is a room full of money OR a nice new job then I will be a happy camper. I need need a new gig ASAP. I guess it's a good thing I've been working on my new site which I will try to have up and running this weekend at www.colorspretty.com.

My contact info:
http://www.linkedin.com/in/karabarrett
email me at kara[at]colorspretty.com

In the meantime, here a some interface design samples from my portfolio.

Which Is Hotter?

So which is hotter? Jensen Ackles or the new 'manly man' wood panel background I created for this album? Sorry, Jensen. My custom background is totally hot. You lose.

Check it out at : http://www.zoto.com/winchester/albums/

My First Zoto Flash Album

Check it out at : http://www.zoto.com/kbarrett/albums/10930/

Woohoo! We just launched our Zoto flash albums this morning. Things look good. We're just testing and searching for pesky bugs. Of course I've had some complaints from the guys around the office that I haven't included enough 'manly man' backgrounds (sheesh) so I'll be whipping some up today.

Hmm...now where did I put that guide to 'manly man' design?

Zoto Launching Customizable Flash Albums

We are about to launch flash albums for our Zoto users this week. As the designer I approached the planning and design process with the goal in mind that I wanted to give the users a lot of control over the look and feel of their albums, something that I have found to be lacking in my experience with other photo hosting sites. I also wanted to incorporate a lot of room for design versatility. Our users range from soccer moms to pro photogs. By offering layout, typeface, background, and color options our Zoto users will be able to mix and match to create their perfect album.

We're doing some final rounds of testing at the office today and waiting for some final changes/notes from our CEO (don't those client/boss types always throw a few last minute wrenches into things?) but we are pretty happy with the end product so far. Here's a sneak peek at our rockin new albums and some of the great customization options our users can enjoy.

What makes our new flash albums so great?

Layout control.

• I created 6 basic layouts. A variety of simple and tasteful layouts let the user choose how they want to display their photos.

Custom Backgrounds, Typefaces, and Colors.

• Users can dress up their layout by picking from custom backgrounds (themes) or solid colors.
• They can choose from several distinctive typefaces that range from traditional to fun and scripty.
• Users can control font size, font color, link color, hover color, and photo border colors.

Elastic goodness.

• All of the albums are created to resize to your browser window so whether you are viewing an album on your laptop or on a large screen it will display at the largest size possible.

Be on the lookout for our new albums to launch by the end of the week.

Technorati Tags : zoto, zoto.com, photo sharing, web 2.0, jensen ackles is an uber hottie

Nice Things People Are Saying About The New Zoto.com Website

While it's true that at Zoto we don't usually go around tooting our own horns, we are always gratified to read the positive things people write about the newly redesigned version of our website (this is especially true when you consider the fact that we haven't been advertising or seeking any press for months). Here are some nice snippets I've come across lately.

Stewart Butterfield (Co-founder of Flickr.com)

"Zoto's recent redesign with all ajax photo pages was really cool and well done - quite zippy and something that created a great experience for photo uploaders and viewers."

From :
http://www.flickr.com/groups

Killer Startups

"Unlike other photo sharing services, Zoto zeros in on powerful application-like features so that you can organize, store, and share each and every one of your photos online. Zoto features the latest technology to deliver you fast results."

Read more at :
http://www.killerstartups.com

Webdev 2.0

"Zoto is the best way to share and organize your photos. Zoto's site works like a desktop photo sharing application, letting you quickly share your favorite photos with friends and family, and making sure they are all securely stored."

From:
http://www.webdevtwopointzero.com

BG's Blog

"I’m really impressed with Zoto Photo Sharing. It does just about everything that I want it to do, and a lot more besides. I’ve had accounts with Flickr, Zooomr, Photobox and some others, but they don’t match Zoto when it comes to flexibility.

Features that I’m particularly impressed with are:

• Options for setting the order of pics (by date/time taken, date/time uploaded, title, an exif parameter etc.);
• Options for setting the number and size of thumbnails for each album;
• The facility to group pics into multiple albums, and to group albums into multiple sets;
• Options for setting display colours and template colours (Background, text, link, link hover, border etc.), these can be set independently for each album;
• The bulk uploader;
• The options for setting permissions;
• Bulk editing for things like dates, tags, text, privacy, moving pics between albums etc.;
• The overall ease of use."
  

Read more at:
http://beardedgit.wordpress.com/

Funkmaster Fish's Big Bad Blog

"Zoto offers a wide variety of features to its members such as drag-n-droppable homepages, sortable liquidized light-boxes, highly customizable albums, 50% larger image detail photos, extremely fast photo tagging, powerful photo searching, unlimited storage, and no advertisements."

Read more at :
http://gottadropablog.blogspot.com

Mashable

"Zoto, the photo-sharing service, will launch version 3.0 tomorrow...The new stuff includes a new logo, a pretty new interface and plenty of slick ajaxy features - in fact, the whole site has been rebuilt from scratch with some big improvements."

Lo-fi Librarian

"Very pretty and customisable photo hosting, options to upgrade to a paid account, widgets available and zoto uploader can be used to upload bulk lots of pics."

From:
http://www.lo-fi-librarian.co.uk/?p=624

The new Zoto has been a labor of love that has been in progress for the past year and 1/2 and everyone on the team has put in so much time and hard work. It's nice to be acknowledged. So thanks, guys.

Take a 2 week test drive of Zoto at:
http://www.zoto.com


Technorati Tags : zoto, zoto.com, photo sharing, web 2.0

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]

My Blog Gets Its 15 minutes

Wow. My little blog nearly exploded from all of the traffic from my Flickr post. I mean, holy freakin cow.

I think my CEO is planning to do some sort of follow-up on his blog (http://www.geekceo.com) later this week.

We did finally conclude that:

1. Flickr does not alter your original photo
2. Flickr does enhance the other sizes and openly admits it (not to mention it's way more sinister than I thought).
3. Zoto 3.0 will be auto-enhancing photos when we launch in March but we will also have an option to to disable this feature.

I think best part of the hoopla was reading all of the comments. I was really blown away by the amount of response. So thanks for all of your comments. Even the anonymous ones (you silly weenies). I also realize, in hindsight, that calling someone a numnut in response to a negative reddit comment is, ahem, possibly a tad unprofessional. And as for that guy who asked me if I passed the turing test, ha-freakin-ha.

Oh, and the photo from my flickr post is not soup. It's my italian chicken chili. The recipe is here.

Ok. Time to go back to blogging about patterns and stuff.

Flickr's Dirty Little Secret

The secret is...you suck at taking photos.

And flickr knows it. That's why when you upload a photo to flickr it undergoes a cosmetic lift via a sharpening filter (and perhaps a saturation filter as well). See below.



This is a capture of the exact same photo. On the top is a thumbnail of my photo rendered on Zoto (3.0 beta) . It's blurry and the detail is lost. On the bottom is the same photo thumbnail rendered on Flickr. Notice how sharp the detail and color appear. Unlike Flickr, Zoto is rendering an 'accurate' thumbnail of my photo.

The result? On Flickr I am fabulous, wonderful taker of photos. On Zoto, I am just a loser who can't get a photo in focus.

Does this subtle cosmetic lift, on a subliminal level, factor into a user's decision making process when it comes to choosing a photo hosting service? The advantage to the mainstream user is obvious, but if I was a pro photographer, wouldn't I resent someone taking liberty with my photos? We've had a bit of a debate on this issue in our office (at Zoto). I'm for passing a filter on photos to make them look better. I think it improves the user's experience. On some level, even if they aren't aware of it, they are enjoying their photos more because of this little white lie. Some of our "purists" in the office disagree. In the end the best solution may be to make this an option in the upload settings that users can control for themselves. And user control is what it's all about, right?

New word: flickrality
Definition: The version of reality where you rock at taking photos.

Technorati tags: [flickr]