Lesson: App Prototyping with Erin Parker

Step #6 Prototyping: Learn about different prototyping stages and when is the right time to transition between them

There are lots of different stages of prototyping. If you are starting a company you are probably in the stage where you are sketching out what your product might look like at first. If you are an engineer or if you have the ability to code, I urge you to not code, until you have put together a mock or drawing. So that when you show it to someone, they know what to click on, where it goes and those screens need to make sense to them.

The very first stage of prototyping is you draw your screens and your interface. Then you take your first interface and you sit down with a customer and you ask them, "What do you see and what can you do?" What you are validating is, that what they are seeing is the same as what you are seeing and what they think they can do, is actually what they can do. What if they don't see a button that is important, or what if they think they can swipe a screen and it connects to the calendar and it actually doesn't.

Then you take them to the next screen and you say, "Okay let's say you click on that button. Now what do you see? What can you do?" Once their perception of your product is the same as your perception of your product, then you build the basic back-end. Or you even fake a back-end, because you want to be lean and you want to test as much as possible. Then once you have an interface that they can work with, that looks like it works. Then you ask them, "What do you see? What can you do?" Once you validated that your interface works, that's when you actually start building your product.

In later stage prototyping, you have a much more polished product, so it doesn't really make sense to draw sketches. Because users are probably very comfortable with their very polished, nicely working product. If you show them a sketch, as an extension of an existing feature set they may be probably confused and be like, "Wait. That doesn't make any sense." It does help if you have Photoshop skills to photoshop a pretend interface that looks like what you would reasonably build. Don't build the back-end for it though.

Then do a round of, "What do you see? What do you do?" As a fake extension of your existing product. Then see if that entire user-flow makes sense. That's how we prototype for Spitfire in the later stages.

So for Spitfire Athlete we are making a strength training app that empowers women to lift weights. As the founder I have actually been prototyping every aspect of the company and the application. But for now I'm focusing mostly on the product because we need to get the product out there and get a bunch of users. I've made the mistake of engineering first, then building an app that people don't know how to use. They don't understand what to click on, or why they can do certain things with it.

Once my co-founder and I basically over-engineered our app we realized, "Oh, we should stop spending all this time coding, go back to prototyping, creating interfaces and then testing to see if users actually understand how to use it." That's how we developed that agile system.

Now the process we use is, create the mocks first and then we run through about five user tests. We really don't need to talk to more than five people because after five people they start repeating the things that you already know.

Think in terms of five and pick wildly different people who are still in your user demographic, then test that interface first, before we actually build it.