Welcome… I’m quite excited about this issue! This blog is going to be a little different to the last couple as it’s my first deep dive into a single topic, one that’s played a large part of my work over the last few years, Prototyping.
Prototypes are a great tool that helps you shape your thoughts, communicate more effectively, make massive leaps in progress in short periods of time and they’ll even help you make strategic decisions.
“A prototype is worth a thousand meetings.” - IDEO
But before we get into the detail, let’s have a quick chat about humans… yes, old Homo Sapiens. Actually, in the grand scheme of things, we’re really not that old. We’re pretty complex animals and the only species on this planet that have a vocabulary of more than just a few phrases. Yet, we’ve somehow managed to also develop an ability to sometimes completely misrepresent our thoughts as we speak.
How many times have you tried to explain an idea or thought, only to be met with a bewildered face as the receiver of your garbled sentence tries to figure out what the hell you are talking about? I bet you’ve also then attempted to explain something to no avail, only to pick up a pen and successfully sketch out your point on a whiteboard in a few short seconds.
Our brains are simply not tuned for spoken explanations without complex processing. Our evolution has trained us to make incredibly fast decisions based on our vision. We can spot the risk of a lion in a field 500m away, see a deadly storm approaching, and are able to tell the difference between a poisonous mushroom and a safe one by its colour (well, maybe with the aid of Google these days).
In fact, 90% of the transmitted information to our brains is visual, and it seems some forms of visuals perform better than others. Recent claims by 3M showed that our brains can process images 60,000 times faster than text. Another study showed that 65% of humans learn better through visual study than audio and kinesthetics.
If you want to test this idea, check out the performance of your Twitter / LinkedIn posts where you have also included an image. It’s highly likely you’ll find that they attract more attention. A picture says a thousand words indeed!
Everyone is different
Making the communication of ideas even more complex is perspective. Every one of us on this planet has lived a unique life. Our backgrounds, whether it be education, religion, country, or even just our social groups will have a profound impact on the way we communicate.
If I asked all of you to explain the same problem to me, I’d end up with a collection of completely different answers each a reflection of your personality, experiences and perspective.
On that note, let’s pause for a second and try a little experiment. I want you all to grab a pen and a sheet of paper. Set a timer for 3 minutes.
I want you to draw the process for making toast. (Really Steve? Yes, Really!) Ready? Go! Here’s some thinking music.
All done? Great. Make sure to send a photo of your sketches via Twitter @forbze or send to my email hello@steveforbes.com.au.
I have to be honest, this game we just played is not one of mine. In fact, Tom Wujec has developed a whole methodology around this. You can find more information at http://www.drawtoast.com
Got a wicked problem? First, tell me how you make toast - Tom Wujec
I’ve run this game as an ice breaker with clients and teams many times, and it’s always a unique insight into the types of people you have in the room. Some people get right into the detail, some people stay at a high level and think about big pictures. Some people draw lots of people, some people focus on the engineering. Perhaps you can give it a try at your next team meeting?
Here’s my sketch by the way (inspired by the Van Gogh exhibition in town)...
So where am I going with this? Well, the point I’m hopefully making is that visual communication is a fast, effective way to communicate your thoughts and to inspire greater collaboration on an idea in a group.
What is a prototype?
Have you ever worked on something for hours and hours, only to be told it was wrong? Going back to the drawing board can be soul destroying knowing you’ve spent so much time already on the task.
Prototypes aim to address rejection by gathering feedback along the journey throughout the journey when testing on yourself, colleagues and customers.
In my opinion, even a rough prototype can deliver great amounts of learning in a short period of time. In simplest terms, prototypes are a low-cost version of your idea and are built to help understand your requirements in greater detail.
Prototypes come in many forms - post-its, sketches on the back of a napkin, wireframes, high fidelity designs, interactive mock-ups, technical proofs of concept, static images, animations etc. You get the picture.
But prototypes aren’t restricted to software and app development. In the last decade, the 300-page business plan of the past has died a slow death, replaced by the Lean / Business Model Canvas.
Why? Because it’s a low investment, easily editable plan on a page. The added bonus? It’s visual! It can also be used as a prototype. You can quickly create 5-6 varying business models to test with.
When I start planning a newsletter, I create a mind map of my ideas and send it to a few readers for feedback. Is there anything missing? What do they want to read? It is essentially a low-cost prototype of the real thing before I’ve spent all the effort writing.
Show us, don’t tell us!
I first witnessed the power of prototyping about 4 years ago when I moved into mobile development. At the time, our sales team were still trying to understand how mobile differed from the standard sales pitch needed for our other engineering practices.
Around that time, we also hired our first designer, who would regularly attend client pitches for work, sitting at the back of the room listening intently to the customer describe their problems whilst clicking away on his MacBook.
“You mean like this?” the designer would interrupt.
You would straight away see the delight on the customers face as their ideas suddenly became a reality. Needless to say, the designer became the go to sales tool and “Show us, don’t tell us” quickly became a bit of a motto around our office.
So, how do I do it?
Unfortunately - there is no one size fits all type of prototype. Each project is unique and depending on the stage of your project, you will likely need to use a different style of prototype.
I like to think of prototypes on two common scales - Fidelity, and functionality. Depending on your objectives, you will fall into one of four categories - selling the idea, testing the interface, proving a concept or testing the logic.
When you start out, think about your overall goals.
Who are you going to show this prototype to?
Do you need to show the interface or the logic that makes it work?
Do you need to show the whole functioning app or just a subset?
Can you get away with some real functioning areas of the app, and others which are just “smoke and mirrors”?
Fake it, before you make it
One important thing to remember is that the fidelity of the prototype should match the fidelity of your thinking. So, if you are in the early stages don’t waste too much time building a high fidelity prototype. Use whatever tool you can to start forming your ideas and then start getting feedback. There’s only one certainty at this point - that whatever you’ve dreamt up at the start will need lots of changes.
You want to try and achieve a Goldilocks prototype, a façade… looking real enough on the outside, but has limited function behind it.
Remember to start small and learn fast. “Don’t make it, if you can fake it”.
Here’s one of my favourite all time presentations from WWDC (the Apple Developer Conference) on faking applications. It’s full of great advice!
Fake it till you make it!
Refine over time
In my last newsletter, I spoke about the importance of making small incremental improvements.
Ideally, you should aim to start with a large number of low fidelity prototypes such as sketches and slowly build up to wireframes. As you gather insights through testing wireframes then build up to richer prototype which is made in high fidelity and potentially include native feeling animations.
I like to think of prototyping as a kind of funnel, in the early stages your sketches can be done in seconds and you can take your ideas in many different directions. You can literally make 100 different options in as many minutes.
As you kill off sketch ideas, you should narrow in on the best ideas that you want to take into wireframes. Then keep narrowing in until only a few ideas remain that you want to test with at the end.
Note: I’ve spoken a lot about killing off prototypes and testing your designs. In a future issue, I’ll talk about hypothesis-driven development, where we’ll dive into some of the techniques you can use to test with customers, define success, and track your learnings over time.
Some tips & tools
I’m not going to go into all the different software tools you can use for prototyping as there are literally hundreds of them. My go to tools include Sketch, Marvel, Invision, and finally the underrated Keynote. Check out this post on Medium which has a rather extensive list of prototyping tools.
Below are some tips that I’ve picked up over the years.
Consistent sketches
This might sound strange, but everyone sketches differently. If you’re running a team ideation session, then having similar looking sketches can help when it comes to refining your ideas.
Ensuring each person has a good sharpie for borders, a fine liner for detail and a highlight colour will make your sketches really pop. Check out this post from Vedran Arnautovic with more simple steps to improve your sketches.
Using the same dimension paper, or post-its are also important. If you fold an A4 page three times in half you will end up with 8 mobile phone sized sketch areas. Alternatively, the rectangle sized post it’s are also great for phone sized sketches.
Use existing patterns
Don’t try to re-invent the wheel, there’s plenty of websites such as pttrns.com which allow you to look at how existing apps implement common screens such as tables, login forms, profiles etc.
You can quickly take a screenshot of your favourite applications, paste into Keynote as a blueprint and then replace the elements on the screen with your own images and text. Using Magic Move transitions in Keynote is an effective way to test animations.
Organise your sample content & images
As you build up your prototypes into digital, keep a library of fonts, icons, images, colours and sample text that you can reuse. You’ll be amazed how long hunting down little things like that take away from the overall objective.
Even better, you can use plugins like Craft for Sketch / Invision and the Noun Project for quickly dropping content into your designs.
Hopefully, you now have an understanding of how we respond better to visual cues than other forms of instruction. We took a look at the benefits of prototyping and how a quick sketch ideation session with your team can create an explosion of collaboration and inspiration.
Finally, remember to fake it till you make it! Don’t build more than you need to before you can test and get meaningful feedback. Don’t be afraid to put something in customers hands early. They love being involved in the process and often feel privileged to get a sneak peek! Build facades, use smoke and mirrors, fake back-ends with manual processing, do whatever you can to get the prototypes in customers hands, and then learn, learn, learn!