Pre Code Prototyping

Cort Johnson of Terrible Labs was kind enough to stop by the Harvard I-lab to talk with us about prototyping.  As an engineer at heart my biggest tendency is to build first and ask questions later. I’ve easily wasted years of my life building products to test user demand – when a simple paper (or PowerPoint) prototype would suffice.  So, here are some tips to help you design a great product BEFORE you build it!

 

The Basic Prototyping Process:

1. Plan the tasks you need to test

• Have a clear idea of what you want to learn.

2. Observation

• Watch how users interact with similar or competing products

3. Sketch a user flow

• what tasks needs to be accomplished or what information do we need from the user? Make a simple diagram that links all the tasks together.

4. Beginning with the core, sketch or create simple wireframes of application screens

• Draw simple icons and areas to get a sense for layout. There are great templates for iPhones or websites (or even just paper with a grid of dots) that can help guide this process. A favorite of Cort’s is Pop Prototyping on Paper.
• Cores and Paths – the core is the critical content that people come to the site on. With Flickr it’s photos for a software company it’s the product page. Know that however much navigation you build (from the homepage) know that it’s just one path. Users will mostly likely arrive directly at the critical content – bypassing the rest of your site. Build for that.
• Think about inward paths and outward paths
• What are the user goals and business goals?
• Lastly there are trigger words/content/calls to action

5. Add interactivity and visual polish as needed

• Wireframe – start doing high fidelity wire framing with keynote or PowerPoint. Use conditional links for each button in these presentation systems to mimic the conditional states of your product.
• Fake Doors - Building some new features? Add a button or link that makes it look like the button is there and see how many click on it. Take them to a landing page with maybe a beta user sign up. Don’t build it out until you’ve confirmed interest.

6. Consider audience and intent when selecting the right but make it minimally real

7. Prototype early and often no need to code

And as you’re moving through this whole process here are some tips:

Use realistic content – make it look as close to reality as possible.  Take the time to put real images and real text in there.  People reacting need to focus there.

Test Early Test Often – Make frequent updates and always test first

Consider the Limitations – Keep the impact of the format of the prototype (fidelity/depth) in mind when evaluating the feedback you get.

One Change at at Time – Classic scientific method.  Isolate the variable.  Change it.  See what happens.  If you change many variables at a time its hard to isolate causal vs corollary relationships

Beware of Dead Ends – don’t let a user hit a dead end where they get ‘stuck’ in a state of the app  There should always be a ‘next’.  Users should leave when they feel they are ready – not when they hit a brick wall.

Last (but not least!) here are some really great online resources Court mentioned that will help you get on your way to being a prototyping wiz!

Sketching

• Design pattern library (developer.yahoo.com)
• Templates (interfacesketch.tumblr.com)
• POP for iPhone (http://popapp.in)

Wireframing

• Sketchflow http://microsoft.com/expression
• Axure http://axure.com
• Balsamiq http://balsamiq.com
• Keynote Kung Fu http://keynotekungfu.com
• Keynotopia http://keynotopia.com/themes
• InVision http://invisionapp.com
• http://proto.io

Learning to Talk

Remember doing that a few decades ago?  Well, as it turns out the fun never ends!  In person communication is the most powerful form of persuasion.  As an entrepreneur – especially as a founder – your voice is the most important asset you bring to a company.  We can always hire for skills.  However, that person who’s passion can power a team or persuade an investor becomes the irreplaceable piece of a company’s DNA. That’s a key difference between a founder and an employee.

Since speaking comes naturally we often will gloss over the practice of this art with a good enough subsistence level of skill.  What an opportunity to miss.  Like any other skill, through deliberate practice the level of competency will grow.  In this vein HBS brought in KNP Consulting to study some videos of past presentations.  Here’s the one I chose:

I was lucky enough to sit down with Matt Kohut who has some pretty incredibly experience training speakers – especially in the engineering space (NASA no less).  Here’s the core lessons he had for me based on the clip:

• Slow Down! Not news to anyone that knows me – but I talk FAST.  This makes the message hard to digest and understand. 
• Cadence is a roadmap.  Modulating the pace and tone of speech provides an audience with subtle cues for the importance attached to each part of the speech.  When you get to the most important point – lower your voice, slow down your delivery, and then stop.  A pause is the most powerful form of punctuation.
• Move deliberately.  When walking around a stage – it’s important to pick a point or a person and walk towards them.  Deliver a message as you walk.  Finish the point and walk away.
• Play with balls.  Most motions on stage should mimic holding a sphere ranging in size from a basketball to a bb.  The deliberate movements conforming to a round shape creates a strong movement with an organic (warm) pattern.
• Reading recommendations:
• The Man Who Lied to a Laptop.  What we can learn about building relationships from Human Computer Interaction
• Honest Signals. How to project authenticity.
• Strong vs. Warm.  The core analytical tool they use to think about a speaker’s effectiveness is how strong or warm you are perceived as.  It’s important to note that people prefer warmth to strength (just in case you’re picking one).  Figure out what your baseline place on the spectrum is and then carefully pick the appropriate place on the spectrum for each situation (talking with your team vs. talking with a VC). 

 

I love the framework and deliberately choosing the mix of strength and warmth that you need to project in any given situation.  The real challenge to continually developing this skill is collecting feedback.  Self-monitoring is extremely difficult since it distracts you from the conversation and will inherently make you less effective. 

The best way I’ve found (both personally and with my clients) is to designate a spotter – an ally in important presentations and meetings who can focus on watching you to provide feedback afterwards.  Any ‘bad behaviors’ go on a list for the spotter to flag in conversation for me (think of it as an early warning system).  The notes from KNP will definitely go on mine!