Recently, we finished a major Web Prototyping project for a client building a project management application in the Creative space. The application has 3 different subscription levels: Free, Enhanced and Professional. Each level allows for increased functionality and features, and we agreed with the client that the best thing to do would be to build out each account level to show the Development Team and potential users exactly how the application functioned at each level.

To view screenshots that demonstrate these ideas, click here:
Large Version | Medium Version

Here is a short list describing the process we used:

1. Complete the full version of the application first with a focus on giving the user the most thorough and comprehensive experience possible. Be sure to build the prototype files out in a separate directory with its own subfolders and keep all links and images relative to the html documents – not the site root. This way, when you make a copy of the directory to create a different account, you don’t have cross-account link problems.

2. Identify the features you are going to remove from the lower subscription levels. In this case, we created a quick document listing what features were to be removed each section as our roadmap to begin the removal process.

3. Instead of simply going through the html pages and removing features of the application that aren’t accessible at that level, take screen captures of the features, gray them out in Photoshop and replace the actual features in your html documents with these graphics. This way, the user understands precisely what it is they’re missing at a lower account level and is tempted to upgrade their account. Having a direct hyperlink from the screen capture images to an Upgrade form is also vital.

3. Create a very easy-to-use upgrade form page that changes the account type to a higher level. This will be instrumental in taking the user from the Screenshot view through the Upgrade process.

4. Add documentation into the prototype to inform the Developer or Programmer that after the user is successfully upgraded to a higher account level, they should be returned to the page they originally came from with the new features in tact. This way the user gets the direct benefit of upgrading by gaining access to the features they upgraded to use.