Archive for July 2013

We want to put on our headphones, dive into Omnigraffle, and crank out wireframes. We design in a corner, without involving anyone else. But that’s not really design — it’s self indulgence for imposing your perspective on a product.

Well crafted interaction design comes out of understanding the environment through the eyes of our users: their wants, their needs, their pain points. It goes beyond the “what” so we can understand the “why.” Our craft requires us to study people and their motivations at a level that most will never understand. That requires us to learn, whether we are on the clock or not.

Here’s how you can become a better designer in less than an hour a day. You don’t have to do this everyday, but the more you do it, the more you’ll learn.

You’re running a startup. You ask the developers who the next hire should be.

“We need a unicorn.”

“What’s that?”

“You know, someone who can code, design graphics, design user experience, write copy, and do all the HTML and CSS for us. They’re cheap and easy to find. They should be able to take out the trash. Oh, and wash our cars wearing a bikini.”

And unicorns can fly.

The unicorn designer is the most in demand and rarest of product team members — someone with excellent interaction design skills, visual design skills, and coding ability. Unobtanium.

Unicorn designers exist, but they’re expensive, overworked, and generally can’t cover all the bases as well as advertised.

Unicorn designers exist, but they’re expensive, overworked, and generally can’t cover all the bases as well as advertised. The better ones have over 10 years of experience and the consulting rate to show it. If you get a good one, you’re going to be paying a lot.

Your job is to properly select resources and avoid needing a unicorn. If you have to hire someone to cover that many skill sets, you have failed at building the right team. Working with a great interaction designer is the most important decision you can make for the success of your startup. Design-led organizations succeed.

If you’re looking for a unicorn, many designers will pass because the request will show a lack of knowledge about building a team.

Here’s a few suggestions to avoid the “we need a unicorn” conversation.

I would hire an interaction designer that can build almost production-ready prototypes in HTML and CSS. They can build something that gets you to version one, and integrate outsourced elements if need be. They should also train the developers how to do front end development so they won’t have to later.

The other valuable and common combination is interaction plus visual design, because they can be utilized for producing marketing materials. If this is the skillset hired, the developers have to pick up the HTML and CSS.

Implement the “need three, pick two” rule for the rest of your team

Avoid stay-at-home defensemen: people that can perform only one role.

The reason most developers avoid doing front-end development is because it is time consuming and tedious. Developers are a precious commodity, but coddled developers lead to failed startups. If you’re working on a smaller team, its up to everyone to pull their weight. It’s part of the job.

Avoid stay-at-home defensemen: people that can perform only one role. If they are straight javascript developers, for example, they would be the first candidate for that second skill since they are already working on the front end.

If you have a team of at least two developers, one of them should be able to develop in HTML, CSS and jQuery. If they are missing those skills, or think it’s “someone else’s job,” seriously consider which one is worth replacing and find another one that fits your needs.

Also, consider other team members and their contribution: If you have hired a product manager than only wants to develop features, but doesn’t wireframe, write copy, do marketing or have other skills, they might be a liability. The same goes for the visual designer that is someone’s cousin: If all they know is Photoshop and can’t do HTML, they shouldn’t be a full time resource.

The most common reason why unicorns are needed is because initial team staffing wasn’t done right. It’s up to you to correct it.

Outsource certain tasks

The best thing about the web is that there are a tremendous number of resources to help you find part-time people.

The best thing about the web is that there are a tremendous number of resources to help you find part-time people. Will it be restaurant quality? No, but it will get you to an MVP.

Places where it is ideal to outsource (and where you can do it cheap!) are logo and visual design. Come up with rough layouts, and at the very least you can put it on 99 Designs for a few hundred dollars. The drag on that is there will be more overhead on your part to review submissions.

Front end developers can also be found through online resources like freelancer.com. They’ll take a photoshop file, slice and dice it, and give the final code to your main development team. There will still be integration time, but this may be a solution to this problem.

You can also bring in consultants to review your interaction design if you are doing it yourself. They’ll cost more via a day rate than you would pay them hourly, but in the long run the advice they give you may make or break your product.

Use templates and frameworks

Every startup that I’ve seen spend a lot of money on visual design early on ended up wasting most of it.

Your first design is not going to be the design you go with long term. You’re going to pivot, change designs, rejigger ideas. Every startup that I’ve seen spend a lot of money on visual design early on ended up wasting most of it.

The solution is to use Template Monster and other sites that have a ton of Photoshop and HTML templates that are pre-built, ready to go, and cheap — sometimes under $50. They are good enough so that your site appears professional when you go out to do usability testing with your interaction designer.

Included in the mix is Twitter Bootstrap, Foundation and other frameworks. While the initial iterations might look like hundreds of other sites, the frameworks are easy enough for most back end developers to use and will get you to something functional.

There are also a ton of templates for them, so you can skin another look and feel. I have an extensive list of resources that should get you to launch.

Keep it basic

Repeat after me — it’s not about the shiny, it’s not about the shiny, it’s not about the shiny.

It’s about shipping so you can test and pivot.

As much as you want your first version to be perfect, you’ll change your idea several times until you find market fit. The most important thing is to have the right guidance to help you find market fit, and that is most likely to happen with a great interaction designer.

You don’t need a Masters degree from Carnegie Mellon to practice user experience.

Every day thousands of people practice user experience in their jobs, and they do so without knowing it. And they might be doing it poorly, if they don’t understand the methods and practices that are used by designers to produce great products.

Researching the market, iteration, or other methods are unknown to them, and there aren’t a lot of publications that service this market of unknowing UX designers.

Aimed at the same market and a great companion to Eric Reis’ Lean Startup, the publication is a very concise overview of what user experience is and how you can apply it in just about any startup environment.

It purposely omits case studies because Laura feels that every situation is unique. Everyone should figure out a process that works for them, iterating until it works. Lean Process for doing Lean UX.

It doesn’t use big words

The book is an excellent guide for mid-career UX designers that want to move to a more iterative process and away from waterfall, and for founders that don’t have the money to pay for a user experience designer and would need to have a go at it themselves.

One of the biggest frustrations for non-designers regarding user experience books is that many of them use overly technical terms to describe some of the process that are used in the field. For example, I have a hard enough time pronouncing “ethnographic research”, much less spelling it.

Laura calls it what it is: “You know, listening to your users.”

She does this consistently throughout the book, explaining terms in a voice that is similar to what I love about her blog — taking complex concepts and explaining them in a way that doesn’t belittle the reader, unlike many other publications in our field.

Testing ideas quicker and cheaper

Engineers are expensive. Designers are expensive. How do you mitigate that cost?

Designing small prototypes and doing quick sketches with pen and paper that test your assumptions is the way to go, and Laura discusses tools that allow founders to do that. She specifically calls out frameworks like Twitter Bootstrap, which is revolutionizing prototyping, and wireframe tools like Balsamiq (which, ironically is what the wireframes in the book are done in).

There’s also solid commentary about the value of interactive prototypes — they take a long time to build — and discussion of when you should use a medium fidelity prototype (testing more complex concepts) versus something simple, like a visual change or a landing page for A/B Testing.

Quick, dirty, and cheap usability methodologies

She advocates methods that are much quicker, and more cost effective so that you can use many more of them.

If you’re working for Facebook, Google, or other large organizations, you have a lot of resources at your disposal — usability testing labs, eye tracking machines, and big budgets to spend on bringing in people that fit your target audience.

That’s. Not. Lean.

The book explains that this sort of testing, especially early on in the product development process, is a waste of time and money. She advocates methods that are much quicker (the book has a whole section on the value of guerilla user tests), and more cost effective so that you can use many more of them.

One of the methods she discusses that I have used personally is the Starbucks usability test: sit down in a local coffee shop, set up your laptop, and offer someone a free coffee to spend 10 minutes using your product. You would be surprised how many people are willing to do it, and I’ve done it several times, most recently for a startup project. We did the test at The Creamery in San Francisco, and we got a demographic that was a lot less techie than you would think.

Measuring every step of the process

The book covers a data-driven design process which explains the value of A/B testing, why it works, and how to use it properly.

Having been through the startup process one too many times, I’ve watched founders spend thousands of dollars on building a product without measuring their progress by gathering user data. They get to the end of development, release the product into the wild, and wonder how to pivot because of low user adoption.

(I think this is where I’m usually screaming at the client, “Your idea is never going to work” before launch, because nothing was tested in front of any live users other than the founder’s wife.)

The book covers a data-driven design process which explains the value of A/B testing, why it works, and how to use it properly. It also explains some of the misconceptions about A/B testing that are often brought up by user experience professionals, and how to overcome the fear of testing everything.

A discussion of when not to design

“Your goal for this type of design is to make things easy, obvious, and useful.”

Most founders get hung up on the shiny when they really should be focusing on user adoption, and this is well covered in the book.

If you’re doing a startup, those initial designs will usually end up in the electronic trash as you pivot and iterate your way to success. Especially in startups.

Laura makes this point exactly: “Your goal for this type of design is to make things easy, obvious, and useful.”

I personally care less about initial designs than the developers and product owners I work with, because I know it’s a starting point. I’ve heard time and again, the designer is the person that cares least about the color of a button.

Laura makes that point too: “I’ve seen too many companies spending time quibbling over the visual design of incredibly important features, which just ends up delaying the release of these features.”

And any delay for this reason will delay getting feedback from real users.

The Conclusion

The book is an invaluable resource for demystifying the Lean Process. It’s also an excellent guide for mid-career UX designers that want to move to a more iterative process and away from waterfall, and for founders that don’t have the money to pay for a user experience designer and would need to have a go at it themselves.

Designers like myself that have been using some of this approach for a long while before it was called “lean” will find this book a good validation of their methods.

Also, if you’re doing your own startup and don’t have formal user experience training, or you are a designer and don’t know how to build your own product, you should buy this book.

I received a suggestion from a friend of mine, “Why don’t you get a list of the best portfolios you have seen, and post them?”

What a great idea!

I don’t go out looking for them — I do have a day job — but I will be doing an article about portfolios.

I need a bunch submitted, plus I’ll send a $100 Starbucks Card to what I think is the best portfolio. The final deadline is August 15, 2013.

There are no rules for this other than what I pick, so no whining is allowed. And you can’t win if you aren’t following me on Twitter.

If it’s a portfolio that sets no context (read: Dribble), I probably won’t feature it. It has to tell a story about each client you worked with, and the overall story of your career. I’ll keep track of the best designers and send them off to some super cool companies. Remember, you have to be a UX Designer. Visual design is a plus, but it won’t be the focus of this post.

Many UX Designers are prototyping their designs using frameworks like Twitter Bootstrap, and building these prototypes has never been faster. The frameworks support responsive design, so you can develop for different breakpoints without breaking your head on the table.

Ideally, these frameworks should speed up front-end development if teams figure out out the right workflow. I’ve found these tools to be invaluable to speed development, and illustrate concepts to developers.

Here’s the list I have compiled, with descriptions from Wikipedia. It’s my list, so don’t be offended if you aren’t on it.

Twitter Bootstrap

A free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates font typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. It is the most popular project in GitHub and is used by NASA and MSNBC among others.

NVD3A list of functions that creates some of the most common data visualizations.

RickshawA list of functions that creates some time-based data visualizations.

Angular JS

An open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.