Learn how to prototype web and mobile apps

Online account: the prototypes page

If you click on the Project name in your online services account, the prototypes page opens up.

There you will see the various prototypes contained in each specific project, and you will be able to browse and comment on them.

Prototyping tool Online Account: prototypes page

On the top part of the page, you’ll see the following elements:
  • The upload a new prototype button: click it to open the “new prototype” page (1) and publish a prototype in the current project.
  • The link to return to the projects page (2)
  • The current project name (3)

On the left-hand side of the page is the list of prototypes, each one with the controls and menus required to use it. On the right-hand side, you’ll find the actions for renaming, archiving or deleting the project (4).

  • Change name: click to rename a project.
  • Delete project: click to delete a project. This action requires confirmation and it is irreversible. 
  • Archive project: click to archive the project. The project will be stored in the archived projects folder, displayed at the bottom of the projects page (the number of archived projects is displayed in brackets). Its prototypes won’t be accessible, even though they still require account space.

Archive prototyping project in your online account

From the archived projects page you can restore a project to the state it had when it was archived (A), or delete it permanently (B). This action requires confirmation, as it will delete all of the prototypes contained in the project and is an irreversible step.

Each prototype in the project has its own area.
  • Click on the prototype’s name to browse and comment on it. Next to the prototype’s name, you will see the time/date it was uploaded as well as the uploader. (5)
  • Actions menu (6): This drop down menu contains the operations you can apply to the prototypes:

– integrate with usability testing tools

– replace with a new version

– download the .vp file format

– download HTML code

– Delete. Note that if you delete a prototype, the reviewers who try to access it will see a message telling them that the prototype has been deleted.

  • Public/private switch (7): click to toggle the prototype status. Public prototypes can be viewed anonymously by all the people who receive your public link, Public prototypes don’t display any lateral panel. Private prototypes can be annotated by users invited through the “Invite reviewers” option.
  • Get link” (8): If the prototype is public this option will allow you to obtain its public link, open it in a new tab or send it via email.
  • Reviewers and comments info (9): displays the number of reviewers, the number of comments this prototype has and the date/time of the most recent one.

Below the prototype’s name and information, you’ll find a further two actions:

  • Invite reviewers: opens the Invite reviewers page. Use this to invite users to browse and comment on the prototype. You can send the invitation directly to the reviewer’s email address. You can also invite former reviewers of your prototypes.  Reviewers info and comments are displayed under the prototype’s name: more specifically, you’ll be able to see the number of reviewers the prototype has, as well as the number of comments and the date/time of the most recent one.
  • Password protection: you can opt to password-protect a prototype. Once you have set a password for a prototype, only the people with access to the password will be able to see it. Note that the online system will not deliver the password, so you will need to communicate it to the people you want to review the prototype.

When you publish a prototype, you’ll find a different action below the published prototype: “Create new user test“.

Next tutorial> How to publish a prototype on your online account

Account Management – FAQs

Related tutorials: