Design Tip 6 - It’s 2016 you need to know how to prototype

What and why?

Knowing how to create prototypes is an invaluable skill to have as a designer. They can help you achieve these 5 key points.  

1. Test your interactions with users

2. Provide extra value for clients to get further buy in 

3. Communicate exactly how you want the build to work

4. Determine how something “feels” and not just how it looks

5. Failing fast to find the right answers through iteration

 

1. Test your interactions with users

This allows to get your designs and preliminary ideas into the hands of users. Allows you to test the usability of your design and information architecture. Do your screens flow together in a logical manner. And more importantly does your design work in a manner that users expect them to. Problem > solution > desired outcome. Were there any pain points that the user experienced and did they use the functions a flows in a manner that you thought they would. Once you consolidate these findings make amendments and repeat. 

 

2. Provide extra value for clients to get further buy in

Send comps and presenting to the client is all well and good. But where added value can be achieved is to show how something works. Not everyone has the ability to visualise certain ideas, it might be clear in your mind but not to others. Maybe it animates a certain way, or behaves in a manner where a static screen will be ill representative of what it is meant to do. Animation is part of the design. It’s provides context to your designs. It also boosts buy in from clients or even your own boss or colleague. When I present prototypes of how things work and how certain screens flow - clients really appreciate the extra detail and are more likely to want to run with an idea. And if they don’t at least you’ve pitched it in the best way possible.  

 

3. Communicate exactly how you want the build to work

Your prototypes can  be used as a guide for developers to understand how you want things to work, the structure of things and it’s exact behaviours. It is especially useful when the build is not done internally. Prototypes take the guess work out of development. And developers can see exactly how you envisioned the final product to work. How things flow together, the hierarchy and depending on the complexity of your prototype -  right down to the easing equation that is used on the animation. 

 

4. Determine how something “feels” and not just how it looks

This is that intangible element that is delightful. And comes from a designers intuition. Especially if you are exploring unchartered territory. Like something that doesn’t have an existing design pattern yet. Prototypes are a wonderful tool to see how something “feels”. Is your idea clunky. Or does it feel intuitive.  You pick it up and think of course this is how it works it feels so obvious. Almost the emotional side of something as you interact with something that feels a bit more tactile and receptive.  This is something you can't achieve with a static comp. So prototypes can shed some light on these interactions. 

 

5. Failing fast to find the right answers through iteration

Prototypes allow you to test ideas quickly. Rather than being bogged down and building a final product blindly. It allows a continuous loop of feedback. And bring in certain parameters and context that can’t be discovered until something is tested. Maybe people don’t want a gajillion buttons they just want 2. It is with these prototypes that you can unveil such insisghts. 

 

Prototyping has always been an important skill. But I think especially now when product design is pushing to become more human-centric and intertwined with our lives. Getting people to touch and use things as soon as possible is the best way to get input and to move forward. From websites to apps to the Internet of things. The technology is not the focus in its use, it's about solving tasks and resolving the pain points that people have. Consider the nest thermostat, think of what prototypes and scenarios they would have had to have gone through to get to their product to become invisible when needed. And delightful to touch at other times. Prototyping is particularly powerful when coupled with the thinking of the context. As stated here in a previous article Your work is not static, always think about it’s context. Prototyping is truly powerful, so add it to your designers toolbox and it will definitely boost your value as a designer. 

 

How to implement and get better at prototyping

The main thing to get out of the way first is that the tools don't necessarily matter it is merely a means to better communicate what you want to achieve. Different prototypes will answer different questions. 

1. If you are testing user flows I recommend using invision. For something basic that you transition across various screens both on desktop, tablets and phones. I personally use it most to showcase to clients how things will look natively on their devices and how the site/app will flow .

So on your next project create a user story and user flow, for example.

 

 

Lily has been appointed maid of honour for her sister Beth’s wedding. Unfortunately she recently had cut her hair shorter. And her sister would love for her to have this cute braided hairstyle that she saw on instagram. At the suggestion of a friend and the encouragement of her sister, she is looking for some high quality hair extensions to achieve this look. 

She would describe her current hair as medium in thickness and currently has brown hair. Towards the darker end of the spectrum. After seeing a few videos on youtube she lands on the “Name of site” to find out more. 

 

How will the user navigate with your site from having the problem to finding the solution and then reaching their desired outcome. Create and test a user flow of this and test it using invision

 

2. For more complex interactions. Perhaps those that are more conceptual. Then I would use principle and pixate. Principle has also just added the ability to work with on hover states too which is great for creating prototypes for websites. While pixate is a more powerful in what it can do but is focused purely on mobile at this point. You can test both natively on different devices too which is super handy. The key to improving is just get started. Start by recreating some of the examples on the principle site to get your feet wet. http://principleformac.com/tutorial.html  And if you want to learn pixate Patrick Wong created a great course for it http://learndesign.io/pixate

 

There are a myriad of tools out there so you can do your research. But here a few more. 

Flinto, Marvel, Framer and Axure.

PS: You can also download a free resource that I created a while back using Principle. So go out there and get started and practice using these tools and getting your designs to be functioning early on. And if you're type short at work practice after hours when you create some new interaction concepts. And share them online. Happy prototyping.