More topics

Prototype and test

Last updated on September 21, 2022

Test, validate, and iterate on your ideas before putting in too many resources towards development.

On this page:

Conceptual design prototyping

Prototypes simulate how your service or website will function. Prototypes provide the opportunity for users and stakeholders to experience what your service will feel like. By simulating your design before it's fully built your team can iterate, optimize, and validate your design decisions. This helps catch potential issues early, reducing major design changes later in the process.

 

Conceptual design prototyping steps

  1. Determine the level of detail your prototype requires

  2. Choose the appropriate method to create your prototype based on this level of detail. For example, a paper prototype vs a clickable digital prototype

  3. Identify a list of tasks that a user will be required to complete with the prototype

  4. Conduct a test with the prototype using real users

  5. Receive feedback on the prototype

  6. Refine the prototype based on your learnings

Testing with the right participants is important to get reliable feedback from the prototype. It’s easy to spend too much time creating a prototype. Limit the amount of effort required by identifying the purpose before your start designing.

Usability testing

Usability testing is a a way to uncover issues with your service by testing it with real users. Users perform a series of tasks while being observed to see where they encounter problems or become confused. By testing with multiple users, recurring issues will be identified as areas of improvement.

 

Usability testing steps

  1. Identify what areas you want to test

  2. Create a list of tasks for users to complete

  3. Conduct the test. Have one person moderate and one person to take notes. If possible, try to video record the session for later analysis

  4. Compile all your findings from the test to identify areas of improvement. These may be small usability issues or larger problems with the whole service

A majority of usability issues will be uncovered after 3 to 5 participants. Avoid helping or leading participants while completing a task. Remind participants you are testing the service, not them. Any issues they encounter is a problem with the service, not their inability.

Treejack testing

Treejack testing is a tool to evaluate the findability of topics in a website. Users are asked to find a topic on your website by navigating through a simplified text version of your site structure – without the influence of navigation aids and visual design. Treejack testing can be done with index cards or with treejack testing software.

 

Treejack testing steps

  1. Create your site structure either with treejack testing software or using index cards to represent a page

  2. Develop a list of topics for participants to find written as a task ie. “Find out where you could get information about pricing”

  3. Participants will choose which heading they believe is where they can find the information

  4. Choosing a heading will show them list of subtopics

  5. They continue choosing (moving down through the tree, backtracking if necessary) until they find a topic that satisfies the task

  6. Start each task back at the top of the tree

  7. Document the paths participants take to find each topic

  8. Analyze the results

Be careful about providing clues in how you write a task about where a topic is located.

A/B testing

A/B testing compares two versions of a web page to see which one performs better. You compare two web pages, version A and version B, by showing the designs to different visitors at the same time. The way each version performs against your set criteria will help you make design decisions based on actual user behaviour.

 

A/B testing steps

  1. Construct a hypothesis based on user behaviour or website analytics. For example, “increasing the size of the call to action button will make it more prominent and will increase conversions”

  2. Create two versions of a page design that will be able to test your hypothesis. One version will be the original design, the other version will be the experiment

  3. Use a software tool that can handle A/B testing on your site. If this isn’t available, you can use your new design and compare any changes with previous analytics data

  4. Analyze, draw conclusions, and implement the strongest option based on the analytics you receive

A/B testing should only present a single design change in the new version. If there are many different changes it becomes difficult to determine which changes influenced the user's behaviour