How prototyping helps the user experience

DevToolsGuy / Friday, August 14, 2015

As we have seen in other posts this month on the blog, the history and techniques involved in wireframes and prototypes is a fascinating one. From pencil sketches to fully clickable (and even designed) mockups - prototyping has a wide range of uses:


  • Visual - From simple sketch (low-fi) to fully styled (high-fi). Test the look and feel of an app.
  • Functional. Static or interactive, test the features of app or website and how users perceive them.
  • Content. Using dummy text or real content a wireframe or prototype can even help define and test the information architecture of an app or sites content.


But just how does prototyping help user experience? How does it help designers and UX professionals produce better products? Let’s look at a few key areas.

Where does effective UX come from?

Firstly where does effective UX come from? Well it comes from creativity, that spark of skill, good design, sensible use of standard interfaces elements and conventions, testing and hard work! In short it comes from many places, from a combination of skills and a multitude of disciplines.

But prototyping can help drive the process, validate the results, and present the overall output to relevant stakeholders:


1. Driving the creative process

Prototyping can be thought of as a tool in a UX designer’s kit much like a pencil, a sheet of paper, Photoshop or some other application. It is simply a way to facilitate the creative and design process. Our own prototype tool, Indigo Studio, helps in a number of ways:


  • Sketch and design - It is really easy to try out ideas, throw content on a screen and see what sticks. Sometimes this is the easiest way to start off what becomes a great user experience.
  • Add interactions - Piece together multiple screens, interactive widgets, and moving parts. Indigo makes it easy to create fully interactive prototypes.
  • Easily export - Early on it can be important to make use of the design tools you are already familiar with. Indigo lets you export wireframe easily. Push them into Photoshop for a bit of extra inspiration and then import back in images to carry on.


2. Validate results

Prototypes are a great way to not only create and design user experiences, but also to test them. Indigo supports a number of features in this area:


  1. Storyboards - With storyboards you can not only test the app or site with users, but also easily communicate the wider use case. Storyboards are unique to Indigo and a really powerful way of driving a better end result.
  2. Prototypes - When asking for feedback and conducting testing, you need to know users understand what they are looking at. Indigo implements annotations in a really nice way to make adding and reading notes very easy.
  3. The Indigo Designed Community - This site is a great way to share designs and social feedback. It integrates fully inside the app also.


3. Presenting the output

Finally when thinking about designing great user experiences, communicating designs and ideas to stakeholders is all important. Indigo has a really strong share and present mode, making it easy to get the right message across to the right audience. After all there is little point getting 90% of the user journey right if you fail to show the results to those signing off the project or approving the final designs.


What are the key benefits?


So now we know some of the ways to drive great user experience with prototypes, what are the other key benefits? 

1. The chance to step back and test a prototype yourself - Having the opportunity to view your product as a user makes it easier to see areas of improvement. Sometimes it is all too easy to get caught up in the design process itself.

2. Using a library of prebuilt components - Prototype tools like Indigo make it easy to reuse and share designs and components.

3. The high levels of interactivity make it the best way to gather user feedback, and the possibility is there to include the end-user in the designing phase.

4. Discover areas for improvement you would never normally consider - Watching users interact with, or even discuss, your prototypes can yield really rich feedback. This in turn can lead to suggestions and features that otherwise might not have come to be.


Prototyping makes life easier for the UX designer

Prototyping is now a vital tool for the UX designer. And when their job is made easier, the user experience gets better as a result. The ability to rapidly create and revise interfaces means a better end product, achieved in a quicker time, with less rework in actual development. A win win for everybody!