× Terms of Use Privacy Policy

Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

How to Get Started on Your Big Idea: You Need a Prototype

prototypes-101-2

Working in product development, I meet a lot of people with app ideas. Many times they’ll ask for my opinion on a product they’re thinking of building, and for advice on how to recruit developers to help them build it. Of course I’m happy to oblige and offer feedback, but in most cases it helps to have more than a 10 second pitch. If you’re thinking about building a product and pitch someone for advice, get ready for the inevitable question. That’s when I’ll ask: “Where’s your prototype?”

Whoa, whoa, whoa. I just spent three weeks polishing my elevator pitch, and you want a what? That’s right, when you finally get that investor, or potential employer, or dream collaborator to listen up, you need to have something to say — or show, that is. Enter, prototypes.

What exactly is a prototype?

A prototype is a functional example of what you’re trying to build. So if you have an amazing idea for an app, you need a prototype to show potential users (or investors!) what that app looks and feels like to use. A prototype helps you determine if your product is addressing a real need, and if it’s easy for a user to achieve that user goal.

And a prototype is a model that someone outside of your team can interact with: it should pass “the Mom test.” If your prototype makes your mom’s eyes glaze over, it might not be as obvious as you think it is. Before you can get someone as pumped about your brand new, world-changing idea as you are, you have to find a way to get it out of your head for others to see.

Which kind of prototype should you spend your time building, and how should you build it?

You’ve got your clickables, your papers, your basic keynotes, your fancy keynotes, your mobile readies – and the list goes on. Each variety of prototype serves a different purpose, so how do you know which one to choose?

Ask yourself:

  • What’s more important right now: design or functionality? Will potential users be sold on your idea when they see how it looks, or do they need it to work for them to get it?
  • Am I trying to learn from or convince someone? (E.g., am I trying to confirm that my idea is awesome or raise money for a project that is already certified Awesome?)
  • How much time will I have to get this puppy off the ground?
  • Can I get away with using Lorem Ipsum, or do I need actual copy?
  • Do I need this to be tested on mobile?
  • Do I need a designer?

Your answers will probably fall into two categories: (1) I need something that works, and (2) I need something that looks good. In an ideal world you would have both, but think: at this point in time – exactly now – which better serves your purpose? You probably don’t need both right away.

Let’s use a huge, hypothetical example. Before Apple debuted the swipe-to-unlock screen, a visual prototype probably wouldn’t have done much good. Since the swipe is all about the feel and function, users would need to experience the way swiping might change the way they use their phone. Apple needed a functional prototype.

Then take this scenario. When WordPress.com was building its mobile app, they needed users to see what each screen would look like–how would stats translate to a mobile screen? How would they navigate comments? WordPress needed a visual prototype.

Once you’ve determined the kind of prototype you’ll need, it’s time to get started.

When to create a pen and paper prototype

Paper prototypes communicate the purpose and function of your product at its most basic level – they don’t attempt to replicate the branding, user interface or copy, but focus on the core value proposition and user interaction instead. True to form paper prototypes are typically unsexy; they are probably not your best bet for raising investments. Instead, these low-fidelity prototypes are useful for quick usability testing and user research, and particularly for early concept testing: since users can’t actually click back and forth, they tend to linger longer on a single “screen.” This means you can probe deeper for feedback on what people think of your designs, product, and marketing on a more holistic, strategic level.

How do you make a paper prototype? Very simply. If you’re quick in Photoshop, you can make mocks and print them out, printing one page per screen to test a full flow and instructing the user on a series of flows they can “click” (aka shuffle) through. Or, go old school and sketch everything out on paper: you can go as in depth or as lightweight as you’d like. You can also upload your sketches to apps like POP to simulate click throughs on mobile as well.

When paper doesn’t cut it: clickable prototypes look and feel like the real thing

If paper isn’t enough, you may need a more high-fidelity prototype: something more faithful in appearance and functionality to the real thing. Try tools like Invision, Flinto, Proto.io, which can help you create snazzy, real-life looking prototypes. All of them allow you to make clickable prototypes that can be used on your mobile phone; these are great options for showing off in-app animations. Proto.io is especially useful for mimicking native iOS interactions, and can even help you replicate the increasingly popular swipe-to-dismiss card pattern (like Tinder’s).

Remember though that going for a higher quality prototype means spending time and (possibly) money learning to use the prototyping platform. You’ll also need visuals to make these prototypes really shine, so rope in a designer friend or get cracking on those Photoshop skills to get there.

Not too fancy, not too frumpy: some in between prototypes that are just right

What happens when a paper prototype doesn’t cut it but a high-fidelity prototype is too complicated?

Balsamiq and Omnigraffle are two popular platforms for your just-polished-enough prototyping needs. Both are easy to use and standards of the design and product world today.

If I’m heads down focusing on interaction and screen flow, I like Balsamiq best. Why? Because it is limited in functionality – there is no access to icon design, color, typography, etc built within Balsamiq. This restriction is actually highly productive: I can’t do any of the UI things I’d like to do, and instead am forced to focus on getting the core interaction flow down pat. I hate what Balsamiq mockups look like (chicken scratch!), and while I wish I could change it, it’s actually a good thing I can’t. Its silly comic sans font may be annoying, but the platform’s limited UI capabilities stop me from getting distracted by all the pretty colors and typographies I could be employing and encourage me to focus on interaction patterns instead. Simplicity for the win!

Omnigraffle is a great option for the next immediate phase, when you are still working out that interaction flow, but would like a bit more polish. It’s easy to integrate branded jpegs you have on file, or build from their icon set (which is much more extensive than Balsamiq’s).

Omnigraffle does require just a smidge more discipline with Balsamiq because you can do some design work within it – don’t get distracted by user interface unless you are trying to create a prototype with UI. Prototypes in Omnigraffle look good, even without those UI design elements.

Ultimately the platform you choose for prototyping depends on what you’re trying to show, and to whom. Once you’ve got that figured out, it’s time to get after it. So where’s your prototype?

Ximena Vengoechea is a Product Operations Manager focusing on user behavior & experience for mobile products at LinkedIn. Before working in tech, she spent several years in Paris working in the art world and now moonlights as a writer and illustrator. She writes about personal & professional development, technology & culture, and UX, and draws just about anything that crosses her mind. Follow her on twitter @xsvengoechea.

Your email address will not be published.

One сomment

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.