Building a Better InVision

How to design a better user experience for an ever-expanding platform.

Introduction

InVision is an extremely efficient tool for designers to manage workflow, and a fantastic collaboration space for third-party stakeholders and a great platform for presentations. However, as a designer, I often find using it frustrating to use. As the platform has grown in scale and has started supporting new features, the original UX struggles to keep up. In addition, I spend a good amount of time each work day trying to find work arounds for bugs, which adds a layer of aggravation to the experience (I have similar feelings about Sketch, but I’ll save that for another article…).

Bugs aside, I have been thinking about InVision’s usability issues for a while. I decided to try my hand at reworking the UX to create an easy-to-use-experience. Despite UX annoyances, I am still rooting for the platform to succeed and it’s still hands-down my favorite workflow management tool to use. With tweaks to the overall experience, it could be even more powerful than it is now.


Problem: Structural & organizational issues

A disjointed navigation

As features and sections have been added over time, some things included in the nav feel unnecessary, while other things that could naturally fit there are missing.

The People tab shows you all the people who are currently admins on the account, but this information could easily be removed from the top navigation and tucked into a more general settings menu.

The Activity tab has all activity happening within InVision, but it feels like it should be more closely tied to the individual projects where activity is happening.

On the other hand, a whole separate “workflow” tool is included in InVision, complete with project statuses and an agile board similar to Trello. But because this tool is hidden at the individual project level, this powerful feature remains unnoticed and unused. This is certainly a link that could be included here.

To complicate the navigational structure further, the top nav changes between all different sections in the site which causes a lack of consistency that could allow users to gain a better understanding of where they are.

Disorganization at the high-level project view

By far, the biggest challenge InVision’s UX faces is the unwieldy “prototype” view. From here on out, I’m going to simply call them projects. Each project contains a set of screens, which you can then click into and see details about the screen and comments.

Projects view > Screens view > Screen detail view

You can create projects to group any number of screens together under one category. For instance, you could choose to have two projects such as:

Visual Design | UX

Or you could get slightly more granular, such as:

Website Visual Design | App Visual Design | Website UX | App UX

But because of the in-depth nature of product design, even a bucket like “Website Visual Design” tends to be way too broad. For instance, you could have multiple pages, each with multiple states and flows, each with various micro-interaction design details such as animations and rollover states.

So what most designers end up doing to maintain a manageable amount of screens per project is they break down projects into smaller bucket sizes. As this is usually the case, your InVision likely looks a lot like this if you use it in your day-to-day workflow:

…yikes.

The screenshot above is actually, really, literally, the InVision account I use for work. It appears to scroll into the abyss, but wait…there’s actually pagination at the bottom!

The thumbnails in the screen above take up so much space that the page is impossible to scan for what you’re looking for. I often find myself typing in ⌘F and searching the text on the page to try to find things.

What makes the scannability of this page even harder is that these projects are all sorted automatically by the last modified date by default, so the placement of projects moves around.

Solution: A restructured navigation and a more scannable way to organize projects & screens

Primary & secondary navigation

In this solution, the places where you work (Projects & Boards), the place where you manage the higher-level agile process (Workflow), and the place you go for general help & tips (Learn) are accessible in the primary navigation. To the right of this, there are links to less important navigational items like account settings in the secondary navigation.

Left-hand project panel replaces long scrolling project view

You’ll now see all high-level projects listed in a scrollable panel to the left. This panel is organized alphabetically by default but users can choose to sort this panel by recency or by a custom order. This structure is simpler, and also allows us to look into projects and see their screens without having to navigate away from the high-level projects.

The archived projects section is included in this left panel and is always sorted to the bottom, below active projects. Docked at the bottom of this list is a new button to quickly create a new project. This allows users to work within a project without having to click into a specific project and be redirected.

Tabbed sub-nav

Within each project, a sub-nav appears that links to all the important sub-sections for the project.

The key sections in the sub-nav are the Active screens tab (for screens in progress. This section is the default view), the Comments tab, the Archived Screens tab, the Project assets tab, and the Advanced Project Settings tab, where you can manage collaborators & invites, archive and modify the project, etc.


Problem: Unstructured and unruly “Archived” sections

InVision allows you to archive a screen from a project or even archive an entire project, but getting it back requires digging through unruly “archive” sections.

The example above shows an archive section for a project that has 984 screens.

The screens in the archive view are sorted alphabetically, which can make finding recently archived files a daunting task if you don’t remember exactly what the screen title was. Even if you do happen to know the screen name, it can be difficult to find your most recently archived file. Take this one screen design for instance:

Among the other 984 files in this project, there are 44 different variants on one we’re internally calling “Tracker”. As I scroll through them, I see them all in jumbled order, with files from 2 months ago sitting next to files from 23 days ago and 4 months ago. In order to see the subtle nuances between a few of them, I have to click into view the screen itself.

Not only can you archive screens in a project, but you can archive entire projects as well. The project-level archives unfortunately suffer from a similar chaos and, even worse, they are harder to find since archived projects are hidden under a tiny dropdown arrow in the top nav.

Solution: Better archive management of screens & projects

By giving Archived Screens its own tab in each project, archived screens are easy to find and get back to.

To give users more control over finding screens from the archive, a filter is included in the top that allows the screens to be re-sorted by date archived, alphabetical ordering, or by the original date the screen was posted to InVision. To visually separate the screens more, section headers are included between screen thumbnails to divide archived content up by the month it was archived.

The archive view for projects would have a similar layout and filter controls:


Problem: Screen detail view structure

Navigation that flips location

When you click on a thumbnail within a project, you arrive at the screen detail view. This page has a different navigation that moves to the bottom, and the top-level navigation disappears. This bottom navigation is necessary to accommodate the amount of controls needed here, but it could easily stay at the top to prevent such a jarring experience.

An over reliance on icons

In addition, a common design pattern for InVision is to create icons for navigational elements and buttons that often serve as the replacement for text in the areas tight on space. This is the case for this screen-level bottom nav, which relies mostly on icons. But due to the lack of text here, I often find myself hovering over these icons before clicking to make sure that I’m clicking into the right place. I still do this because there are so many icons to choose from, even though I have gotten quite accustomed to using InVision. I imagine that users who work with this product every day end up losing quite a bit of working hours over time fumbling for the right place to click.

Solution: A cleaner way to manage individual screens

The screen details view now has a slightly modified navigational structure. The navigation remains at the top but changes to reflect the fact that you’re on the deepest level page you can navigate to. To remove confusion for users, a breadcrumb nav shows up at the far left to get back to higher-level screens.

On the far right is a list of less important actions you can take at the screen level — Share, Live Share, Display Options, Workflow and More (represented by three ellipses, where extra-advanced or utility-based features like social share and cloud upload can appear in a drop down).

In the middle is a new screen-level toggle which allows you to turn on different modes of the same screen (Preview, Comments, Proto, & History). This keeps the same four views that InVision currently has but gives them additional text descriptors. And rather than “Build”, I am calling the building tab “Proto” which speaks better to the interactivity offered in that section.

All functionality within these tabs could stay relatively the same, with the exception of the comments section, which could use a few minor improvements.


Problem: Hard to use commenting system

Comments that are hard to discover

The comments tool is one of the best features of InVision. It allows you to drop a pin at any point on the screen and make a comment about it. I typically use this feature to share ongoing UX and design work across teams to be inclusive in the process and to solicit a wide range of feedback.

One of the big difficulties I have with invision comments is that they are hard to find when a new one is posted.

It’s hard to stay on top of InVision comments through the site, and instead most people use email notifications to find the latest comments. This can be a pain to continuously move between your inbox to InVision to see the latest comments.

To make comments more discoverable, InVision added an activity feed feature in each project, laid out in an ongoing list. But unfortunately it’s hard to follow and doesn’t present the information well.

In addition, there’s also a flyout menu that can be clicked viewing a screen, but because the comments apply to all screens and not just the current one, clicking these and jumping around from screen to screen can feel disjointed.

Unclear comment tagging

When writing a comment, it can also be difficult to add people to a thread. Often, people forget or don’t understand that in order for participants to be alerted about their comment, they have to write “@username”. And because comments are so difficult to find in the interface, ones that aren’t tagged are never seen.

I often forget to tag someone in a comment and as a result will end up tagging them in another comment after posting:

Solution: A more usable, accessible commenting system

A better badging system

In my new design, comments tab in the sub-navigation is be badged when new comments are added. When this happens, the project title in the list to the right will also get badged. This way, we call attention to new activity more easily and users will know where to go to acknowledge it.

Within the the comments tab itself, activity would appear as a feed with thumbnails that expand upon click, and show all comments.

More collaborative commenting

Surfacing a list of collaborators while commenting could make it much easier for someone writing a comment to remember to tag the user(s) they want to read it.


Conclusion

It’s no mystery why InVision has become become so ubiquitous in the design community — they regularly roll out great features that make the lives of design teams easier. Competitor platforms pop up all the time, but they fail to capture the same intuitive sensibility that InVision has. However, If InVision wants to continue adding new features and support users who are using the platform for more and more projects, there’s a lot of work to be done at the higher-level pages in order to keep things feeling navigationally, structurally, and visually lightweight and easy to use.


Thanks for reading

I hope found this exercise on UX thinking and organization helpful. If you did, please hit the ♥ button below, and share it!