How To Build Prototypes Without Technical Chops

8370785956_dc0b54ce9f_z

The best part about prototyping with paper, Post-Its, and PowerPoint, was that not a single line of code had to be written, yet I get feedback for my minimal viable product.

By Andrea Lo (Founder, Piggybackr)

The purpose of a prototype is to cut down on the time spent building out a product so you can focus on figuring out what people want.

Having a prototype from day one gives you authentic user feedback – because you are able to immediately gauge how users react to your product. Surveys and interviews are only so helpful since they often depend on how well you’ve phrased your questions or cut out biases.

Here is what I learned while prototyping during the idea phase of my startup Piggybackr, a fundraising website that empowers youth ages 8-15 to raise money for their schools and organizations and ditching methods like candy bars and bake sales.  My goal was to confirm that this was a good solution for the educators, parents, and kids I was building it for.

Lesson #1: A prototype can be made out of paper.

My first prototype was literally a yellow piece of construction paper with a one page sketch of my “website.” I went up and down the neighborhood showing a sheet of paper to parents at playgrounds. I got great feedback just from their physical impressions of what I wanted to create. My favorite was - “Why do I need this?  It looks like Facebook.” It made me realize that to not try to reinvent the wheel.

Lesson #2: The uglier the better.

Don’t be embarrassed about how it looks just yet. You want to get harsh feedback so you can get all the major issues out of the way early on. If you show them something really polished, it psychologically becomes harder to give “negative” feedback.

My second prototype was a piece of purple construction paper with a bunch of Post-It notes on it outlining the flow of the website.  It allowed me to move things around to nail down a reasonable user experience flow.

Lesson #3: Lesson Learned: Test one thing at a time.

Then came the time to test the functionality.  At this time I started toying with the idea of learning how to build a WordPress site or even hiring a developer.  I ultimately settled on an existing tool called Weebly, which has drag and drop functions, and enabled me to build a page that tested out one key functionality with users: collecting donations and payments.

Lesson #4: Lesson Learned: Leverage existing tools.

After getting enough initial feedback, I started the process of wire-framing the entire website. Tools like Balsamiq made it easy to sketch out a series of linked pages.  However, I wanted to show something more designed so that I could provide a better visual for the kids I was working with.

I ended up designing over 15 pages of my website usingPowerPoint and Keynotopia, a library of predesigned images and icons commonly found on websites or mobile apps, and linked all the pages together. Shown in presentation mode, the result was a working and clickable website.

I’d talk to people on the phone and share my screen with them using a tool called Join.me and walk them through the functionality of my “website.”  Apparently, it was so realistic that one teacher didn’t realize it wasn’t already live on the Internet.

Lesson #5: Lesson Learned: Iterate again and again.

Using my PowerPoint prototype, I tested various ideas and features easily iterating on the deck with the click of a mouse.  It was much easier than actually building the website and continuously changing it.However, don’t over do it with the feedback.  Once you start hearing the same things over and over again, you’re probably about ready for the next step.  I stopped when I felt like I had something that stuck and genuinely made people excited.

The best part about prototyping with paper, Post-Its, and PowerPoint, was that not a single line of code had to be written, yet I was able to gain pages upon pages of feedback that made deciding critical features and writing out specifications a million times easier for my minimal viable product.

Doing all the research and learning in action rather than wait for someone else to build it also enabled me to ultimately attract a technical co-founder. Prototyping also gave me invaluable lessons in understanding user interface, user experience, and prioritizing features – all critical pieces for building a successful website.

Today, Piggybackr is a website piloting with over 100 kids and many relieved parents and teachers, all eager to ditch the practice of selling candy bars and magazines.

Little do they know it started with a yellow piece of paper.

Women 2.0 readers: Got an early prototype story to share? Let us know in the comments.

About the guest blogger: Andrea Lo is the Founder of Piggybackr, a fundraising platform that empowers youth ages 8-15 to raise money online for their schools & organizations by making fundraising easy, fun, and educational. She’s always looking for feedback on her “prototype” from parents and teachers. Follow her on Twitter at @andreatlo.

  • Michelle

    Great article, thanks for sharing! If you’re familiar with graphics tools like Photoshop, Illustrator, or Fireworks, they can be used to build mockups as well.

  • Pingback: The Afternoon Grind: Building Prototypes And The Office

  • Kalvin

    Great inspirational article, Andrea! Prototyping is key and you used some of the best simple tools for it.

  • http://www.19pencils.com Neill Kramer

    I’ve watched Andrea grow through the entire process outlined in her article and everything she’s saying is true. This is not to say that the work was easy. It’s hard to listen to people without getting your own filters in the way. Andrea is an excellent listener as well as a hard-working entrepreneur. Bravo!

  • Andrew

    Great article. I love how you’ve applied design thinking to building your product and company. Excited to see how it continues to evolve!

  • Pingback: The Morning Grind: Compliments And Bad Dreams

  • Pingback: Quora

  • http://www.trofiltd.com Kelly Beall

    Hello!

    I love your website and concept. However, I have a product that is not a tech product. Can you direct me to a group such as yours that focuses on non-tech startups?

    I thank you in advance and look forward to hearing from you.

    Regards,

    Kelly Beall
    Montare West Designs, LLC
    dba Trofi Ltd.

  • Elizabeth Zirk

    Nice work Andrea! Lovely to see you thriving! :-)

  • http://www.bankaroo.com Etay

    When my daughter and I build http://www.bankaroo.com (money management service for kids and their parents), we were using http://www.demoright.com to create the initial prototype and to collect feedback from many people. You can check out the prototype here: http://demoright.com/a/bankaroo . DemoRight is easy to use, in this example, we design http://www.bankaroo.com mobile application in PowerPoint, uploaded to http://www.demoright.com and created the interactions betweens the screens. Then we shared the prototype using the link I shared with you and many people gave us feedback. Now http://www.bankaroo.com is a real service, based on real needs and real feedback.
    You can learn more about it here: http://www.youtube.com/watch?v=rzlV_qmoq90

  • http://www.meynu.com Taja

    Andrea, This is great information. The real nugget of gold for me was learning about Keynotopia. This is very very helpful. I also really like your suggestion to make it ‘as ugly as possible’ for unbiased feedback. Wishing you much success.

  • Pingback: Women 2.0 » How To Build Prototypes Without Technical Chops « techiesandgeeks

  • Pingback: Software Design for the Newbie | Frances Marie