Behavioural Research Consultancy
Leeds 0113 350 8155       London 020 3393 0651         info@simpleusability.com

Menu
  • Home
  • What we do
    • beInsight
      • bewebsite-iconbeWebsite
      • bemobilebeMobile
      • beadvertisingbeAdvertising
      • beinstorebeInstore
    • Close
  • Our Services
      • Accessibility
      • Retail insight & In-store environments
      • Usability testing
      • Mobile usability testing
      • Usability training
      • User-centred design
      • Eye tracking services
      • Gaming UX Research
      • Neuromarketing
      • Print/pack & advertising testing
    • User-centred design
      We can support you with User Centred Design services throughout the whole project lifecycle.
      • card-sortCard sorting
      • expertExpert review
      • iaInformation Architecture, Prototyping & Wireframing
      • personaPersona development
      • taxonomyTaxonomy
    • Close
  • Why we’re different
      • Methodology
      • Our facilities
      • Participant recruitment
      • Technology
      • The team
      • Environmental Policy
      • Our clients
    • Our Technology
      Cutting edge neuro-marketing technology is our enabler.
      • eraEmotion response analysis with EEG
      • eyeEye tracking
      • gsrGSR
      • glassesMobile eye tracking
    • Close
  • Case Studies
  • BeInspired
      • Articles
      • News
      • White papers
      • Video gallery
      • Sign up to our UX Knowledge email newsletter
    • Close
  • Contact us
      • Directions
      • Get in touch
      • Join Us
      • Market Research Volunteers
    • Close

The lifecycle of a prototype

Mar 09

by Katharine Johnson

In: Articles, Research Thoughts

Comments Off on 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.

Knowledge Share Newsletter

newsletter banner Sign up to our regular UX knowledge email newsletter.

Recent articles

Do It by the Book: How to Use Storytelling in UX Research

When was the last time you bought something online? Did it go as expected? How

> Read More
User experience research vs. market research for product design and development – a blurring line?

You say ‘to-may-to’, I say ‘to-mah-to’ You often hear the terms ‘user research’ and ‘market

> Read More
How to use storyboards effectively in UX projects

‘A picture tells a thousand words’ This is certainly the case when it comes to

> Read More
Homepage fundamentals: Handy tips to entice your users

A homepage is something that any internet user will be familiar with. Whether it be

> Read More
Don’t Lose the Plot: How to Use Storytelling in UX Design

What’s your favourite book, film or tv show? Do you know why you like it

> Read More

Categories

  • Articles (73)
  • Awards (2)
  • Conversion Rate Optimisation (4)
  • ECommerce (10)
  • Emotion Response Analysis (5)
  • Eye Tracking (8)
  • Gaming (2)
  • News (62)
  • Research Thoughts (27)
  • SimpleUsability events (4)
  • Usability (31)
  • Usability Reviews (22)
  • UX Design (19)

Archive

  • April 2018 (1)
  • March 2018 (2)
  • February 2018 (2)
  • January 2018 (4)
  • December 2017 (1)
  • November 2017 (2)
  • October 2017 (2)
  • September 2017 (2)
  • August 2017 (2)
  • July 2017 (1)
  • June 2017 (3)
  • May 2017 (2)
  • April 2017 (3)
  • March 2017 (2)
  • February 2017 (2)
  • January 2017 (2)
  • December 2016 (1)
  • November 2016 (1)
  • October 2016 (3)
  • September 2016 (4)
  • August 2016 (4)
  • July 2016 (1)
  • May 2016 (1)
  • March 2016 (1)
  • October 2015 (1)
  • September 2015 (1)
  • July 2015 (1)
  • June 2015 (1)
  • May 2015 (1)
  • March 2015 (2)
  • January 2015 (2)
  • November 2014 (4)
  • July 2014 (1)
  • June 2014 (2)
  • May 2014 (2)
  • April 2014 (1)
  • March 2014 (1)
  • February 2014 (2)
  • December 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • April 2013 (1)
  • January 2013 (1)
  • November 2012 (3)
  • September 2012 (1)
  • June 2012 (2)
  • May 2012 (1)
  • March 2012 (1)
  • February 2012 (1)
  • January 2012 (2)
  • December 2011 (3)
  • November 2011 (2)
  • October 2011 (1)
  • September 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • March 2011 (2)
  • February 2011 (2)
  • January 2011 (4)
  • December 2010 (7)
  • November 2010 (5)
  • October 2010 (5)
  • July 2010 (1)
  • June 2010 (1)
  • May 2010 (4)
  • March 2010 (1)
  • January 2010 (1)
  • September 2009 (1)
  • July 2009 (1)
  • May 2009 (1)
  • March 2009 (1)
  • February 2009 (1)
  • January 2009 (1)
  • March 2008 (1)
  • February 2007 (1)
  • January 2007 (2)
  • November 2006 (1)

Research tags

accessibility Advertising Effectiveness ApplePay argos Big Brother christmas contactless payment Conversion Rate Optimisation CRO Eco ecommerce eeg emotion response analysis Eye Tracking eye tracking glasses gaming insight Internet Retailing iPhone Leeds Market Research Mobile multichannel neuromarketing neuroscience NUX Oculus Rift Online Experience Index outsource Prototyping psychology recruitment research buyer social media twitter twitter brand page usability usability day usability methodology usability testing Usability test of prototypes venturefest Virtual Reality Waitrose X Factor

SimpleUsability

  • Usability Home
  • What we do
  • Our services
  • Why we're different
  • beInspired
  • Contact Us

Sign up for our Knowledge Share Newsletter

We aim to email you once every two weeks with curated content on UX, behavioural research and more.

Our Services

  • Accessibility
  • Retail insight
  • Usability Testing
  • Mobile Usability Testing
  • Usability Training
  • Eye Tracking Services
  • Neuromarketing
  • Games testing
  • Print & Pack Testing
  • Viewing Facilities in Leeds

Latest news

Do It by the Book: How to Use Storytelling in UX Research

4 April 2018

User experience research vs. market research for product design and development – a blurring line?

22 March 2018

How to use storyboards effectively in UX projects

8 March 2018

Homepage fundamentals: Handy tips to entice your users

22 February 2018

Don’t Lose the Plot: How to Use Storytelling in UX Design

7 February 2018

Get in touch

  • SimpleUsability Ltd, Marshall Mills, Marshall Street, Leeds, West Yorkshire LS11 9YJ

    Leeds Tel: 01133 508 155
    Int Leeds Tel: +441133508155

  • SimpleUsability Ltd,
    27/31 Clerkenwell Close,
    London, EC1R 0AT

    London Tel: 020 3393 0651
    Int London Tel: +442033930651

  • Email: info@SimpleUsability.com

Copyright Behavioural Research Consultancy 2018

facebook rss twitter youtube