Sox, Director of User Experience at vimeo has kindly accepted to answer a few questions to better understand his work.
He tells us how to plan a new project, how to have a good start in this business, and what happens behind the curtains at Vimeo. Plus, he has some good advice about wireframes that you can’t miss if you read Wireframes and Concept.

DB: First of all, welcome Sox and thanks for your time. Let’s get straight to the questions.
what’s your background? are you self-thought or did you attend specific studies?

Sox: I am completely self-taught. I did not study related fields in school. I bought few books but everything i’ve learned came from simply watching and doing. I am big fan of reverse-engineering. Seek out what it is you want to do, understand how it’s done, now try doing it yourself. there will always be people who are better than you at what you want to do. watch and learn from them.

DB: when did you start working?

Sox: I’ve started fairly early. In 1995 i got my first job out of school as a web designer for a small garage interactive agency in connecticut. Over the years i’ve worked at streaming Media Corporation, Priceline, Fotolog, and Vimeo. I have also worked as a consultant at few different places in between.

DB: could you explain to us what your job is and what it consist of?

Sox: I am the director of user experience at Vimeo. My daily responsibilities consist of overseeing and engineering the overall presentation and experience at vimeo.com. I perform product development ideation, user experience and design auditing as well as some design and coding work as needed. The main objective of my position is to keep vimeo as simple to understand as possible, as easy to use as possible, and as fun to experience as possible.

DB: How do you usually start a project? And do you have a method you usually follow throughout?

Sox: it all depends on the nature of the project. If it’s an enhancement task then the work starts from gathering as much user feedback as possible and making the necessary improvements that align with our overall objectives. For a brand new project, the entire cycle from ideation to delivery requires much more time and effort. Typically it starts from identifying an area of our service where we could add as much value as possible to our offerings without compromising our overall objectives (simple, easy and fun). We bring in all the stakeholders to discuss the project and come to a decision whether to move forward or not. Once the project gets a green light, then the hard work begins. Our working process at vimeo isn’t all that different from other product development cycles. We prototype, design, develop and then wash it through several iterations until it’s ready for polish and testing before it rolls out to the users. Perhaps the real unique part of vimeo process is just how agile and iterative the product development cycle can be.

DB: For someone who is just starting what are the most important advice you would give him?

Sox: learn by doing. Question why before how. Find your own reasons.

DB: What can you tell us about wireframes? do you use’em a lot? can you share some advice or technique with us?

Sox: I sketch a lot. For me it’s helpful because i cannot not think visually. They also help me examine the requirements and identify the limitations of work that needs to be peformed. Always keep the margins free. If you are not bumping against questions that need answers or problems that need solutions during the prototyping phase then you’re either extremely lucky or you’re not doing it right. Keep those questions and answers in the margins as you work. They’re far more important than anything you’ve already drawn.

DB: What does inspires you in your work? and there’s someone on the online world who had a big influence on you?

Sox: solving problems is immediately gratifying and addictive. I see most web sites as a sculpture. You have a vision of what it should ultimately look like. everyday you are adding or taking away a little bit of clay, shaping it a step closer to the ideal image you have in your mind. Then one day you look at your sculpture from a different angle and realize new questions, new problems and new possibilities.

There are many people whose work had inspired me over the years. Off the top of my head i would mention Jesse Garrett, Dan Cederholm, Douglas Bowman, Jeffrey Zeldman, and the folks over at Stamen Design.

DB: What is it like to work at Vimeo, what’s happening behind the courtains?

Sox: it’s fast paced and fluid. We have a very flat structure to our organization and everyone is working on their daily tasks or thinking about what they will be working on next. No one gets micromanaged and we trust and depend on each other to get stuff done. Everyone is tapped into an internal IRC system where we keep an eye on the health of various sub systems of our site and exchange ideas.

DB:There’s a difference in your job between working on a small site and a big one?

Sox: i’ve been on the both sides of the fence and i must admit i much prefer working in a small to medium sized group. In a larger organization, i’ve typically experienced more hierarchy and more stakeholders with varying or conflicting interests that stymied good projects from moving forward with energy, focus and speed they deserve.

DB: What you feel was the most challenging thing about Vimeo from your point of view?

Sox: in the beginning it was all about correctly assessing the vibes of the service and its community. I need to understand it and feel it resonate in my bones before i can start contributing. Taking this first step the right way is always important to me and it requires time. More recently, i’ve been spending more time focusing on the scalability of my ideas and how it would impact the general performance of the site (the most important part of any user experience work).

DB: What are the tools you couldn’t live without?

Sox: honestly I don’t think it matters all that much. I would probably say a good pen and some blank papers. The applications i use heavily on daily basis are Textmate and Firebug. We also rely on several internal admin tools to check, monitor and debug our work.

Your 5 favorite sites online?

Sox: you mean other than cycling related sites? Let’s see… google, gmail, google reader, tumblr and flickr.

If you want to take a look at some of Sox’s design and wireframes he has a stunning portfolio on Flickr. It’s also a good chance to check how Vimeo was created.

When planning a website the first important steps involve just a pen and a paper. It’s crucial to understand what we are creating and its nature. To list the purpose, the expected content and draw its structure will be our first concern.

What Kind of Site Do I Need?

This should be our first focus but we will probably have an answer only at the end of this article.
I mean that the nature of our site will vary in relation to the ammount of content, of our ability and knowledge of the instruments, and the characteristics we require.

For instance:

you may want a place to present your business and usually a static website is enough;
you may want to keep clients or friends updated with your activities and a good solution would be a blog or even twitter if you’re concise;
you may want to create a social network as you have seen many having success in the latest years and in that case you’ll need something powerful while also getting your hands dirty with php to deal with dynamic contents;
you may want a place to list some works you have done in your own field and you probably want to go for a portfolio.

As you see there are many possibilities which may vary even by your skills: Are you a css ninja or do you prefer to pick a free template for your blog? Are you practical with php or do you prefer to use a CMS to make your life easier?
All choices to consider before you start, but you can clear your mind following the next steps.

List Your Content

It’s really as simple as that: take a paper and write down what you want on your website.
Let’s say you are a photographer and you want your personal site. You know you will put a lot of pictures, maybe a gallery to collect them and different categories, each with its page; definetely you want to give your contact info and if you are willing to share maybe also a few words about you: what you do and anything you feel like saying.

Ok you have listed all these things on your paper but now you can decide how to organize them.
Split them into pages. For our exemple we already have enough content to create an home page, several pages of pictures divided by category, a contact page and an “about” page. Well, it is also true that nowadays are getting popular one-page sites for portfolios, so if you are fancy enough.. But for the sake of the article let’s consider our first scenario.
Good, now we have at least 4 pages. Let’s see what they really look like.

Draw Wireframes

Wireframes are small mockups of a page with a schematic represantation of its elements.
In a practical way I mean you need to draw your pages and what they look like. Start drawing a section for the header on top of the page and one at the bottom for the footer.
You can decide where to put the navigation: you want it in the header or maybe in a sidebar?
Choose where to place your text, your headings and in this case your pictures.

I usually start with something really schematic and as soon as I make up my mind about what I want I go into details and I draw all the little things as I imagine them. Take a look at these exemples of wireframes from many designers: some are quite near to the final version of the site and others are just the sketches of first ideas.Wireframe #1 on flickr
Wireframe #2 on flickr
Wireframe #3 on flickr
Wireframe #4 on flickr
This is also the moment to build the fundaments for your information architecture by creating a small flowchart of how your pages will be connected among them and with which hierarchy.
This will help you create your navigation which is key for the usability and the information architecture of your site. Two aspects to take good care of through out the whole process of your work.

Update:I copletely forgot to add the presentation that Nick Finck, Donna Spencer and Micheal Angeles performed at the SXSW interactive 2009. Slides + audio, you couldn’t have a better help. Remember to show some love to the authors on their blogs and twitter.

That’s pretty much it for the moment.
You can draw your wireframes by hand (like I love to do even with horrible results) or there are several programs to do that professionally, generally used by designer who need to present a project to a client.
Next steps should be to write down your content and create your graphical interface. We’ll have time to talk about these topics later on. (psst, subscribe to know when)

If you have questions or you want to discuss different scenario and purpose to apply this technique we can share our ideas in the comments.
Check the related links I listed below to get to my resources or similar stuff I found around if you want to know more about the subject.
If you liked the article and you think someone else could be interested share it.