How InVision Uses InVision

“So, how do you do it?” As an entirely remote design team that builds a tool for collaboration, it’s only natural that people would wonder what our process looks like. It’s a question I love getting asked because it has a very simple answer.

At InVision, we use InVision to design InVision.

So what does that mean exactly?

Well, you may think it sounds like a canned marketing response, but it is not. InVision lets our team iterate and explore new design solutions at a rapid pace. Here’s just a few ways that using our own tool makes our team (and our product) better.

Rapid Iteration in Real Time

With LiveShare PS, we can make updates on the fly to see if an idea works. There is so much power in being able to see an idea in the context of a design. We are constantly asking one another to make a change just so we can see what it will look like.

It is a real game changer to not delay simple changes until the next review. If we can do it now, then take the time to do it and get the small things approved with the entire group.

Sketch on Everything

With LiveShare, we can grab a (digital) pen and draw all over a design to show an idea or train of thought. If someone has a new idea, they open up a new digital whiteboard, and sketch it out. In every design meeting we have, there is always a moment where someone stops mid-sentence, grabs LiveShare, and says “Let me show you what I am talking about.” They draw a new element, change an existing element, or sketch out a quick flow.

You can feel the exact moment when everyone in the room finally “gets” a design solution. This is a critical piece for design collaboration. Being able to explain your idea clearly cuts down on the number of iterations needed. The team is able to align on the same thought or idea together, in real time.

Context Switching and Comparisons

One of the biggest mistakes designers make is designing a solution outside the context of a problem. This can also be an issue in design reviews. If people give feedback without the context of the problem, the conversation is at risk of going down a broken path.

With LiveCapture and LiveShare PS, it makes it easy to grab other designs or elements to help set the context. Recently we were working on a flow that asked the user to authenticate with Twitter. We had designed a screen to show a successful authentication. The issue we were having was not being able to see the step between.

We energetically discussed the language on either side of the flow, but what we really needed was to see an example of a Twitter integration. The designer who was presenting grabbed a quick screen shot and dropped it into place and, magically, the planets aligned. Suddenly, everyone was giving much better feedback. We could see how this flow would work and exactly what the solution needed to be. All we needed was context and InVision allowed us to quickly drop an element right where it was needed.

Prototyping, Like a Boss

Once we have moved through the initial steps of a design concept, we look at the solution as a high-fidelity prototype. Prototyping takes all the guess work out a new feature. As a team, we are able to see exactly how a user will move through this new or updated flow, including all the interactions they will see. We still have the power to sketch our ideas over the prototype and iterate in real time. But by this point in the process, we are down to tweaking the smallest of details.

To me, the funniest part of our process is we are collaborating using the very tool that we are designing updates and new solutions for. It has proven to be very helpful, because it gives us a working knowledge of our product. That is the last piece of our process that is critical. As a designer, you need to be educated on the tasks of the user. If you are creating a solution without all the data, it is impossible to design a usable experience. By using InVision on a daily basis, we gain an intimate knowledge of the product.

While InVision is a critical part of our design process, it is still only a tool. And a tool is only as good as the process it serves. There are a few key insights we try to remember when crafting and refining our design process.

• Iterate quickly. Don’t be afraid to show things that don’t work.
• Explain the decision. Great designers always have a reason or story behind their design decisions. When presenting work, explain the thinking that went into the design. Have a defensible point of view while being open to feedback.
• Remember your patterns. Always remember to see how your design fits into the patterns already set. Don’t create more elements the user is going to have to learn to use. Stick to patterns that have already been defined.
• Dig deeper. If you don’t know the use case, go figure it out. Designing without knowing the problem you are trying to solve is not design.
• Bring it back to the problem. If you find your team deep in a discussion about a button, modal, or any other small element, back it up. Ask yourself: what problem you are trying to solve. What is the use case? What does the data tell us?

The last thing to remember is this: do not be afraid of changing your process. Try presenting work in different ways. Your goal should be to share your designs with your team as soon as you have a story to tell. Collaboration is key to meaningful design.