Prototyping like a pro - Smile Machine
post-template-default,single,single-post,postid-57130,single-format-standard,qode-core-1.2,ajax_fade,page_not_loaded,,pitch child-child-ver-1.0.0,pitch-ver-1.8, vertical_menu_with_scroll,grid_1300,blog_installed,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

Prototyping like a pro

Prototyping like a pro

We have our favourites. Some prototyping tools we use regularly -they work for us. But depending upon the scale of the product and the client we are working with – we’ll sometimes use one or more of the following tools to help convey our concepts.

Paper Prototyping

If you’re trying to convey a high-level concept during user testing –you probably don’t want to be spending a lot of time and effort in the early stages of development – especially if you’re still defining the needs of your users, and the objectives of your business.

All you need is pens, paper and sticky-tape – it really is that simple. We control the interactions, button presses and screen-swipes simply by sketching them out. It’s a great way of producing ideas -as anyone from the developer to the CEO can get involved in the design process.

Of course, there are pros and cons to this approach; although they are cheap, require little time and can easily be discarded or re-arranged – the results are not very representative of the final product and can be harder to convey to those who are not familiar with the technique.

Low-fidelity Wireframes & Clickable Wireframes

With paper prototyping it can be difficult to display detailed interactions and design pattern. If your purpose is to demonstrate your product, or a specific feature, to a developer or a designer, then you probably need a tool that allows for accuracy, detail and annotations.

Omnigraffle: An industry standard in UX. A designer can create really beautiful – and clear – wireframes in a relatively short time. It is easy to use – they even have some great templates and stencils baked in – and iterations and changes can be made on the fly! Omnigraffle is not interactive. It requires detailed annotations and copy – making it harder to convey and share your idea and flows to those that are less familiar with traditional wireframes.

Whilst Omnigraffle is our go-to wireframing tool, it’s a desktop application – i.e. it doesn’t allow for team collaboration. Each iteration has to be perfected or printed for review. Not-so-Lean.

High-fidelity Prototypes

High-Fidelity prototypes are great for producing something a little more polished. If you need buy in from a high level stakeholder or you’re after funding or investment into your product – then you probably want a prototype that simulates the finished product – complete with design and clickable interactions. Here’s a few we use:

Axure RP: Great for detailed prototypes – it is able to simulate almost all the interactions you would expect from a mobile app or website. You can add annotations – just as you would for traditional wireframes. Better yet, you can load the URL onto a desktop or mobile – allowing users’ to gain a feel for the product – and its functions. These added simulations come at a cost, though. It is labour-intensive and lacks the same flexibility as low-fidelity tools – in that it requires a great deal more time and effort to make changes and iterations. That is not to say that it should be discarded. It’s actually the perfect tool for complex projects – i.e. a banking app, in which functions are fixed and clearly defined prior to development.

Proto-io: We rate this tool pretty highly. It has some pretty advanced features, allowing you to create an experience close to the final product design – and with little technical expertise. You have a lot of control over the UI – as it has the ability to create bespoke animations and transitions between screens. You can even add in text fields and activate the native keyboard – all in a matter of clicks. The downsides? It can be time-consuming to create and update – but it is perfect in terms of functionality.

Marvel: Marvel not only allows you to prototype on paper, there is also an online tool that allows designers to create interactions on their photoshop designs. It’s really quick and easy to use. It doesn’t allow for quite so many of the animations and interactions as Proto-io but it’s certainly easier to use. Again you can save this to your app home screen so it behaves almost like a real app.