The lifecycle of a prototype

As a User Researcher, I often get to watch a product develop from an early stage low-fidelity paper prototype, to a final stage high-fidelity prototype, before the design gets developed into a live product. Therefore, I understand the importance of continually testing through the different stages of a product, and how valuable this can be for teams developing products.

Prototyping is a draft version of a product which allows users to explore ideas and the intention behind a design, before the designers invest time and money into further development. Prototypes allow us to show users what the experience will be like, from a ‘show’ don’t ‘tell’ perspective, presenting the opportunity for problems to be discovered early on, and therefore allowing time to change the design to ensure a good user experience.

The different stages of design and development of a product can be documented using different prototyping tools and methods, which help to clearly communicate the project direction. These can be used at different levels of fidelity depending on where the product is at within the lifecycle.

Prototype fidelity levels are on a range:

Low fidelity –Typically a series of hand-drawn sketches or printouts of the design. These work well during early stages of the design process when looking to test the product idea and interface. Low-fidelity prototypes show a rough approximation of the intended user experience, and include the essential characteristics of the site.

Medium fidelity – Often a wireframe showing the general layout and design of the page, this will consist of a set of images which display the functional elements of a website. Wireframes are great for answering questions based on where people expect to find things. This feedback can then be applied to the final stages of the prototype.

High fidelity – These are usually computer based and allow realistic user interaction. They take the user as close as possible to a true representation of the user interface, to test the final stage of the design before handing over to developers to build the live product. High-fidelity prototypes are an accurate representation of the site, displaying the core features, most aspects of the final visual design, and allowing users to engage with specific site behaviour.

It’s important to choose the correct prototype fidelity for the stage you’re currently working at in the product lifecycle, and there are different tools available for this. This article will take you on the journey of the lifecycle of a prototype, looking at the different tools which can be used along the way.

Low fidelity – hand drawn sketches

While no professional tool is needed to make low-fidelity hand drawn sketches, it is useful to use other tools to help mimic the interactions which users may encounter with your product. Post-it notes can be used to represent panels which open and close and work as pop-up windows. It’s important to remember there will need to be someone ‘behind the scenes’ operating the system as the ‘user’ works through the actions on a paper prototype, opening dropdown menus and entering data.

Hand drawn sketches are also useful for quickly exploring new designs and journey concepts – something we often do with client workshops to help prepare for testing with users.

Figure 1: An example of how SimpleUsability do low-fi sketching on our whiteboard walls.

Low-fi sketches are great for showing a quick diagram of the intended user experience.

Medium fidelity – wireframing

When the lifecycle of your product evolves and you’re ready to step up to medium fidelity, wireframes may be the next logical step. A wireframe simply shows the key layout of the page, such as where content will go, the prominence of headings and what navigation styles will be available. Wireframes help to answer questions such as:

• ‘Are things where people expect to find them?’
• ‘Do the category names make sense?’
• ‘Is it clear how the navigation is supposed to work?’

A great tool for creating wireframes is Balsamiq. Designs created in Balsamiq are great to test to see where users expect to click to find something within the interface, and therefore testing with a service like Chalkmark to do a first-click test may be useful. This can help you answer the ‘Are things where people expect to find them?’ question.

Designs created in Balsamiq have a sketch appearance to them, making them look like free-hand sketches and can therefore be useful for encouraging discussion as they allow users to focus on the functionality and not the design. Designs created in Balsamiq can also be easily revisited and iterated at this stage, which could work well for agile teams looking to move through the design process at a fast pace, and continuously iterate.

Here at SimpleUsability, we know it’s important to test your design concepts early. That’s why running testing at all product stages to answer key questions, such as the ones mentioned above, help us make recommendations to the design team on how the prototype can be improved.

The example below can be used to understand how users would navigate the website. Asking a question such as ‘Where would users expect to access their notifications?’ will let you understand where users expect to find these.

Figure 2: A representation of ‘Botify’ created in Balsamiq.

If you’re looking for some insight into how your users navigate your design, then Balsamiq could be the right tool for you.

High fidelity – prototype

For the next stage of the product lifecycle, it is time to turn to high fidelity prototyping. High fidelity prototypes allow users to explore full user journeys in a way similar to experiencing the real flow as they would if it were a live website or app.

Axure is an advanced prototyping tool, which allows you to quickly create prototypes of responsive websites and mobile applications. This can be really useful when conducting usability testing across platforms, as only one prototype needs to be built to achieve this.

Axure is typically used to make complex prototypes that usually look very similar to a live website, and can also be helpful for testing interactive prototypes with users. Axure also allows you to create ‘smart prototypes’. These allow the user to enter certain information, such as their name or email address, which the prototype will then store and use this information throughout the rest of the journey. This level of interactivity is best left to the final stages of product testing, as a final check to ensure decisions made earlier on in the lifecycle have the right impact on users.

At SimpleUsability we often test prototypes created using Axure, and find that being able to see the sidebar helps us understand the flow the designer has worked through to create the prototype, which ultimately helps us understand the journey the user will progress through when on the website.

Figure 3: A view of the sidebar in Axure, helping understand the flow through the user journey.

Axure is great when you need a high-fidelity prototype with rich interaction.

It’s important to acknowledge that different levels of fidelity should be used at different stages of the product lifecycle. Ensuring that the product has travelled through each lifecycle stage will ensure that the final product has been thoroughly tested and meets user needs.