How To Build Prototypes Without Technical Chops
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.