Practical Prototyping – Getting The Design Right

Part six in a series of blog posts looking at effective design.

Having got your design sketched out in our last post, it’s now time to refine and tweak it with some rapid prototyping

What is a prototype?

A prototype can be thought of as a rough model of the interface or application; it won’t look exactly like the finished product but will work the same. You can create prototypes using a variety of tools, HTML, Visio, Fireworks or even paper.

At dotMailer we often use Axure Pro, since this prototyping software allows us to quickly turn our ideas and sketches into fully interactive interfaces that mimic complex functionality and would otherwise take many days to program. The important thing is to use whichever tool you are most comfortable with and allows you to work the quickest – the important thing here is creating and changing the prototype as quickly as possible.

An early ‘sketchy’ prototype from dotMailer’s split testing process, we ignore colours and user placeholder icons here-  these details can be added later once we are happy with the information and interaction design.

Our prototypes are often greyscale and look hand drawn, at this stage we are mainly concerned with information architecture and interaction design. It also helps the rest of the team and our Test Pilots to understand that what they are using isn’t a finished product so they can focus on usability. Some designers prefer to create much higher fidelity prototypes, but that can lead to lengthy discussions on things like which shade of blue to use when really you should be focusing on button placement.

Why prototype?

A prototype is something ‘tangible’ that facilitates idea sharing and communicates a concept more effectively than any number of sketches can. Prototyping gives us the opportunity to gather feedback on a working interface without using development resources or affecting the live product.

No matter how much thinking you may have put into your sketched concept, it simply may not work that well in practice. If there are problems with our concept, by prototyping we know early and cheaply (in terms of time and resources spent).

The rest of the team find prototypes easier to follow than lengthy specification documents, they are less ambiguous and reduce misinterpretations. This can speed up development time and ensures that the finished version is as the designers envisioned.

The prototyping process

To get started, take your sketch and start building the interface you’ve outlined in your chosen prototyping software. It helps here to have a pattern library of commonly used elements to speed up the process and maintain consistency throughout your product.

Dragging an element from our pattern library while working on a prototype for dotMailer’s new RSS feed feature. The pattern library makes it quick to create prototypes that fit in with our products.

Your sketched concept gave you an outline for the solution, the idea is solid but now we need to focus on the details. Once you have your idea prototyped, you’ll want to try different positioning and copy refining the interface and experiment with variations.

You’ll often be surprised how much difference even minor tweaks to microcopy or the interface layout can make. Always use realistic data (i.e. avoid lorem ipsum) and consider all possible scenarios, does the interface work equally well for brand new users with no data and heavy users with more than average?

Trying the prototype in the browser frequently will also help you notice further opportunities for optimisation, do the interactions and journey feel right? Have colleagues use and discuss the prototype too, this is likely to bring new perspectives and ideas as developers and visual designers will approach it from different angles.

Ultimately a prototype will go through several iterations before being finalised, the solution being refined and improved each time.

Testing a prototype

It may have taken 4 or 5 iterations and it could now look quite different from your original sketch, but you are ready to test your prototype. Next time we’ll look at how to conduct and get the most from user testing.

dotMailer.com logo