My Internal InVision Feature Demo Videos

Although InVision is shutting its doors, it's been an amazing journey; and, I've done a lot of work that I'm incredibly proud of. In particular, I feel great about the way in which I embraced experimentation with both arms; and, that I tried throwing as many features against the wall to see which would stick. Some of my experiments ended up being a "nothing burger". But, some of them went on to become highly valuable parts of the application and the user experience (UX). The whole process made me somewhat fearless in the face of opposition; and, taught me to love my failures just as much as my successes.

With many of my experiments, I tried to make a demo video to share with the team. For posterity, I've gone through our Slack history and found as many of the "public friendly" ones as I could so that I might reproduce them below. This isn't just a record of what I did, but a testament to how passionately I felt about the application and our customers; and how badly I wanted to make their lives better.

Even in the long hours, the panic attacks, the failures, and the disagreements, I loved every minute of it.

HTML Email Revamp With ColdFusion Custom Tags

As part of an internal hackathon, I rebuilt our Grunt-based email build system with a ColdFusion custom tag rendering engine. This made it much easier to develop consistent email designs and dramatically cut down on the deployment times.

Offline Prototype Export Concept

As part of the product end-of-life, I built an export system for our V6 users so that they might be able to download and view their prototypes (en masse) for archival purposes. This was an early progress demo when I was still working on the user experience of the archive asset.

Self-Serve Account Deletion

For most of its existence, the InVision product didn't provide a way for users to delete their own accounts without submitting a Support ticket. It was the most highly requested feature in our ticketing system when I finally built it.

Share Flow Mode

The Flow mode provided an alternate view into a prototype, attempting to show the click-paths through a prototype as well as islands of interactivity that might not be accessible.

Console Flow Mode

Once Flow mode proved to be popular in the share experience (above), I built it into the console experience as well. Again, it was intended to give people a different way to think about the connectivity of the prototype while they were building it.

Command Center

The Command Center provided a way for users to quickly jump from one area of the application into another and to jump into specific documents. It also enabled navigation to global elements (such as the Inbox and Search center) from areas that didn't have a global navigation interface.

Search Center

The Search Center provided a way for users to search across all of their documents, screens, comments, and team members. This quickly became a very popular feature; and, was a huge point-of-contention for some power-users that were migrating to V7 (which didn't have an equivalent feature).

Global Search (Early Version)

This was an early version of the global search that eventually became the Search Center (above). So much of the feature work we did at InVision was iterative.

Office Hours

Once I took over stewardship of the V6 product, I needed a way to increase my contact with our customers. I created an Office Hours feature right within the product that would surface a weekly Zoom link for all to access. Several of the features I built came from conversations that I had during these office hours.

Share Links Tab

InVision was first-and-foremost a collaboration platform. And the share experience was the central focus of that collaboration gesture. I spent a lot of time trying to think about how to elevate the notion of a "share". Breaking the share links out into their own top-level tab of the prototype navigation was a massive improvement to the user experience.

Edit Share Settings Modal

One the biggest "missteps" that we made in the early days of the product was creating a new share link every time a share configuration was changed. This created a lot of confusion. To mitigate some of this complexity, I added a way for users to edit existing share link settings without changing the link itself.

Share Link Quick Create

This allowed new share links to be created with a minimal set of high-value settings (such as a title, password, and expiration date).

Set Share Password

This allowed a user to apply a password to an existing share without changing the share link.

Share Links Tab QR Code

This provided a way to quickly open a share link on ones mobile device by providing a QR code to be scanned.

Remove InVision Logo In Share

InVision prototypes were often used in various user testing context. In those cases, when our clients were testing their own prototypes, they wanted to be able to remove the InVision logo while user-testing.

Share Disclaimers

This provided a way in which to show a pre-share informational screen that that the user had to agree to before they could enter the share experience. These agreements were primarily intended for NDAs (Non-Disclosure Agreements); but, could also be used to prime the user for a specific task within the shared prototype.

Share-Specific Disclaimer

This provided a way to override the default disclaimer (above) and use a share-link-specific disclaimer.

Share Expiration Date

This was a highly requested feature. It allowed a user to auto-expire a share link after a given number of hours or days. It was particular helpful when share links were being shared publicly (such as on Facebook); or when being used in a user-testing context.

Share Link Title

This allows share links to be identified with an internal title. Since so many action in the application generated new share links, it was easy to lose track of which links were being used for which purposes.

Custom Share Key (Private Cloud)

For our private cloud customers (which had their own infrastructure), this allowed custom share keys to be defined for a given share link. In the multi-tenant context, all share keys were auto-generated by the system.

Company Share Settings

This allowed enterprise customers to set global defaults for their share experience.

Share Tab Activity

Again, since so many actions in the product ended up creating share links, surfacing the share link activity allowed users to better see which share links were still in active use.

Export Share Activity

This allowed users to export share activity for subsequent consumption and analysis.

Screen Placeholders

InVision was originally built to cater to designers. As such, most of the ingest workflows either connected to designer tools (such as Sketch or Photoshop); or, used the exported assets from said tools. In an effort to bring more personas into the collaborative tent, I created a way to build low-fidelity placeholders. These were text-only designs that anyone could create for the purposes of prototyping an interactive concept.

Screen Placeholders Tab

This surfaced the collection of placeholders in the prototype navigation.

Console Edit Placeholder

This provided a way to quickly iterate on placeholder designs by creating and editing them directly from the console experience. This allowed a user to create a new placeholder and then immediately link to it from the current placeholder (via hotspots).

Export Placeholder To Sketch

Once a prototype was created using low-fidelity placeholders, the placeholders could be exported as a generated Sketch file. This would create a separate artboard for each screen; and given a graphic designer a pre-wired prototype as a base for higher-fidelity designs.

Storyboard Concept

This was the original idea that eventually became the "title" screen experience in the share mode. It never quite reached the level of fidelity that I wanted; but, something was better than nothing.

Export NOW News To Sketch

Once I had the placeholders being exported to Sketch, it didn't take much more work to get flat images exported to Sketch. This provided a way to evolve an historically export-based prototype into a rich, layer-based Craft prototype.

Prototype Tags

I spent a lot of time trying to think about ways in which to make the existing data more accessible to our users. Applying tags to documents was one of the features that was born from an Office Hours conversation.

Prototype Tags (Old Version)

This was an old concept that never quite made it into the product (at least not to general release). It attempted to treat "Tags" as delimited lists of folders, much like Amazon S3 paths or GMail labels.

Initial Labs Concept

This provided a way for users to turn on experimental feature for themselves. Unlike most user experience, which read from our feature flags settings, the Labs experience allowed users to set feature flag settings (for their own user).

Console Exit Menu

This provided a way for users to quickly navigate around related parts of the prototype organizational experience. Plus, it gave me an additional surface on which provide some educational links (as to the existence of new features like the Command Center and the Search Center).

Prototype Members Tab

In the early days, the information architecture (IA) of the application left a lot to be desired. Breaking the list of document members out into their own tab in the navigation was one of my earliest efforts to make the data surrounding the prototype more accessible to the users.

Self-Serve People Revamp

The "People" page was one of the oldest pages in our application. And, for the longest time, it was more-or-less ignored. As teams increased in size, this page became less and less usable to the point of absurdity. This revamp was my attempt to bring order to the chaos.

Company Member Detail

In the early days of InVision, we were so focused on the prototyping aspects that we somewhat forgot about the administrative aspects of the product. On the enterprise side, creating a "member detail" page was my first step in trying to create a more in-depth view of the people using the product. This would later become a foot-hold for centralized document access moderation.

Company Team Detail

Just as with the company member detail page, the company team detail page was an attempt to make administration of the enterprise user-base more accessible. This would also become a foot-hold for centralized document access moderation.

Centralized Document Access

This provided a way to manage document access from within the enterprise member detail page. Prior to this feature, administrators and managers would have to join individual documents in order to grant access (via invitations) to new company members. It was extremely tedious; and centralizing the access management was a huge efficient unlock.

Member Detail Role Settings

This provided a way to more easily change the enterprise user role from within the member detail page.

Company Default Role

This provided a way for enterprise administrators to change the default role that would be granted to new member invitations.

Company Invitation Detail

This feature provided a detail page for pending enterprise invitations. It would primarily become a foot-holder subsequent centralized document access management.

Company Invitation Documents Modal

This provided a centralized place for administrators and managers to define which document access would be granted for a given invitation. Prior to this, an administrator or manager would have to go around to every document individually and grant invitation access.

Company Member Invitations

This feature surfaced information about which invitations were sent out by a given enterprise member. I'm not sure if this was ever much a value-add feature; but, it was just another attempt to try and surface information that might be helpful to enterprise administrators.

Bulk Remove Company Members

This feature provided a way for enterprise administrators to remove users in bulk based on IDs and / or email addresses. This was particularly helpful for user management in a context that wasn't using a SCIM (System for Cross-domain Identity Management) integration. One of the many things that I learned about enterprise administration from customer interviews is that enterprises often had weekly or monthly culling practices wherein they would identify inactive users on a scheduled basis and have to remove them various enterprise applications (often in relation to usage-based billing contracts).

Company Mail Blasts

This provided a way for enterprise administrators to send a formatted mail blast to their members based on role.

Company Reassign Prototypes

In an enterprise context, I discovered that were was a huge amount of user churn. As people joined and then left a company, administrators would have to go into the InVision product and constantly add and remove users to and from prototypes. This became a huge point of friction. So, I created a way for administrators to reassign prototypes from a central location. This included "orphan document" identification as well as bulk reassignment.

Rename Company Members

This feature allowed enterprise administrators to rename members. This was hugely important in a larger enterprise setting where members would often sign-up with only their first name, making it hard to differentiate one user from another in subsequent drop-down menus and data grids.

Company Manager Permissions

This feature allowed enterprise administrators to increase the permissions allocated to the manager role. This would help distribute the responsibility of user management.

Console Eye Dropper

This was a feature idea that I stole from V7 and retrofitted into V6. It allowed the user to capture a background color from the screen using the browser's native eye-dropper tool.

Bulk Edit of Fixed Elements

This feature provided a way to update the fixed header and footer offsets across many screens at once. This made it much easier to keep fixed-position elements in line with an evolving design.

Export Screens Zip And CSV

This provided a way for a selection of screens to be exported as either a ZIP archive or a CSV dataset.

Manage Background Images

This feature provided a way for users to manage background images after they were uploaded in the console. For many years, background images were just stuck in limbo.

Nudge Hotspots

This feature provided fine-grained control over the size and location of the hotspots on a screen. The user could use keyboard shortcuts to either nudge or resize a hotspot in both 1px and 10px increments.

Duplicate Members With Prototype

This provided a way to copy members into a new prototype as part of the duplication process.

Duplicate Placeholders With Prototype

This provided a way to copy placeholders into a new prototype as part of the duplication process.

Prototype RSS Feeds

This was an attempt to make internal events (ex, screen added, comment added) available in a secure, public way without a public API. Prototype members could create custom RSS feeds that could then be ingested within within Slack, Zapier, or any other type of RSS consumer. Unfortunately, this experiment received almost no traction at all. Oh well!

Screen Info Popup

This feature was an attempt to help counteract the truncation of names within the screen thumbnail list. As the user hovered-over the thumbnails, an info tile would render in the corner of the screen with higher-fidelity information about the target screen.

Search Share Keys

This feature allowed users to search for share links across all prototypes. This was often needed in order to locate the password for an old share link.

Share Browse List

This provided an alternative "list view" for the browse modal in the share experience. Just as within the main product, the browse modal thumbnails tended to truncate the screen names. By providing a list view, I was able to present the full list of screens without any name truncation. For some customers with complex naming schemes, this was a huge value-add.

Share Navigation Steps

This moved the "current screen" indicator into a less intrusive part of the screen real estate.

Share Title Mode

This feature took the "screen dividers" in a prototype and attempted to elevate them into a more meaningful experience within the share link context. It took each divider title and represented it a "title screen" in the share mode. I had hoped to more tightly integrate it with the keyboard navigation; but, unfortunately, I was never able to get that part of the implementation done.

Export To Sketch Settings

This improved the "export to sketch" workflow by translating InVision hotspot settings into Sketch / Craft hotspot settings with higher fidelity. This made it easier to create a Sketch prototype from an InVision prototype.

Add Comment As Task

This was a feature idea that I stole from V7 and back-ported into V6. It was also another an attempt to elevate task management into more of a first-class concept within the application.

Space Tasks

This feature attempted to surface tasks across all prototypes that resided within a given space. Task management was a woefully under-considered part of the application; and this was one of my attempts to make tasks more of a first-class citizen.

Space Members

This feature broke space members out into their own navigation tab. This was an attempt to make information around a space more consumable for administrators and managers.

Move Comment To Screen

This feature allowed a comment thread to be moved from one screen to another. This was one of the many features that was built to solve a specific customer need.

Global People Search

After I created a member detail page for enterprise customers, it unlocked the ability to add people to the global Search Center feature. The member detail page gave me something that I could link-to from within the search results.

Global Team Search

After I created a team detail page for enterprise customers, it unlocked the ability to add teams to the global Search Center feature. The team detail page gave me something that I could link-to from within the search results.

Company Member Timeline

Our enterprise administrators sometimes complained that they had trouble seeing the "big picture". That is, that they couldn't get a good sense of how their users were consuming the InVision product over time. The member timeline was just one attempt to try and surface administrative information in a meaningful way. It provided a list of users and how often they joined, left, and then rejoined the user-base.

Sketch File Text Extraction

This was built specifically for a customer that needed a way to export design screen text so that they could upload it into an external system for Internationalization (I18N). Sometimes, the most joy comes from building a one-off feature for a high-value customer.

Export Comments

Based on a number of customer interviews, it became obvious that many of our enterprise clients had workflows that took place outside of the InVision application. This was often driven by existing processes that each company had before coming to InVision. So, instead of trying to work against the customer's process, I tried to build a number of ways in which our customers could more easily export data in a consumable format (such as a CSV).

Print Prototype to PDF

This was an attempt to create a more robust PDF export by deferring the PDF generation to the browser itself. Instead of trying to use outdated server-side PDF generation technology, this approach created a higher-fidelity "print friendly" version of the export that could be consumed in the "Save as PDF" functionality in the print settings of the browser. This allowed more modern CSS techniques to be employed in the formatting of the export.

Export Interactive PDF

A surprising number of our customers absolutely loved exporting prototypes as PDFs. But, the PDFs were static and purely informational in nature. This was an experiment in trying to make the PDFs more interactive by creating "hotspots" that would link from page to page within the PDF document. Unfortunately, for technical reasons, I was never able to retrofit this approach into the existing PDF generation workflow.

PDF Export Settings

This was a small quality-of-life improvement that I added to the PDF export in response to some high-value tickets.

Find Your Minimum Viable Product (MVP)

This was a prototype that I built in an attempt to codify some of the practices that our team was using during our own ideation and planning sessions. Unfortunately, this never went past the prototype phase.

Breadboarding Proof-of-Concept

This was an early precursor to the screen placeholders feature that I built as a proof-of-concept outside of the InVision application.

Prototype Ellipsis In Name

One of the most common complaints that we received was that the screen names in the thumbnail list were truncated and unusable. This feature was an attempt to move the text-overflow ellipsis from the end of the name to the middle of the name. This would allow the end of the names to be visible, which is often where the most differentiating information resided.

Omnibox Search Concept

This was a very early version of a search concept that used the "custom search" feature of the Chrome browser. Essentially, you could set inv as a special prefix in the Omnibox (ie, location bar) that would cause Chrome to navigate to a special page on the InVision site.

Omnibox Search Setup

This just demonstrated how to setup the Omnibox search (shown above).

Screen Quick View

This provided a way to quickly view a full-size image of a given screen without leaving the screen list. One of the big problems with application design is that so many of the screens look the same (and only have small variations). This allowed the user to more easily differentiate one screen from another by showing the full-size version in a modal window.

Team Sorting

This feature provided a way to sort the list of teams alphabetically. The teams page was one of the long-forgotten pages in our application and this was just an early attempt to try and make the page more usable.

Paste Screen As Upload

This provided a way for images to be pasted from the user's clipboard directly into the screen list (the binary paste value would be uploaded to the application like any other dragged-and-dropped image). This was more of a delighter - I'm not sure how many people even knew it existed.

Download Screen

This provided a way for non-technical people to save the current screen from the console experience. This feature was built in response to a high-value ticket. And, was one of those features that took like 30-minutes to build.

Cheat Codes For Free Plans

We always had a handful of Free plan users who were clearly using the system in ways that weren't intended. For example, they would take the free prototypes and split them up into sections where each section was a "different prototype". Or they would have dozens of users all sharing the same login. Ultimately, I wanted these users to have a better product experience; so, instead of punishing them for their misuse, I created a way for them to upgrade to a higher plan as no cost. At the end of the day, I wanted these users to work with the product instead of against it.

IP Allow-List Configuration

This created a self-service access to the IP restrictions for the application. Sadly, I was never permitted to turn this feature on for any of the enterprise customers—all IP configurations were handled via Support tickets.

Note: I no longer live in the same place that I did when I made that video. As such, I don't mind that my IP address (at the time) is being rendered in that video.

Bulk Revoke Share Links

This was build specifically for one of our enterprise clients who was heavily focused on revoking share links after they were no longer needed.

Assets Folder URL

This allowed the browser back-button to work "as expected" by pushing the source-of-truth into the URL during asset folder navigation.

What a journey! I feel so incredibly lucky to have worked with so many great people and wonderful customers.

Short link: https://bennadel.com/4746