Using InVision like a Pro
I have been a UX designer for almost 4 years at Innovaccer and we have tried, examined and experimented with different prototyping tools. Of course, every tool has its pros and cons, however, with this article I do not aim at promoting any specific one of them.
Our usual process of design starts with pen and paper, which is indeed the best and the quickest way for every Designer/Product Manager to put across their ideas. This allows us to storyboard the user workflows and understand, as well as improve, our product’s experience. Balsamiq is also great for quickly converting your thoughts into connected screens, it allows creators to prototype their ideas and stories without putting a lot of effort into the aesthetics. These techniques create a quick feedback loop mechanism and allow us to assess the extent of functionality of our product.
When all requirements have been gathered and the user stories have been finalised, we then move to the next stage, which is, focus on the look and feel of the product which enhances the experience.
Adobe XD is used by a lot of designers, however for us it becomes a constraint as we do not want to be restricted by the Adobe ecosystem, especially when we talk about using animation tools like Flinto, Principle and Framer.
So we use Sketch.
Once our designs are ready, we upload them on InVision app, where we connect the screens according to the desired workflow.
InVisionApp is a design collaboration platform for web and mobile, which helps the users to create clickable prototypes from static designs. It has helped us to a great extend — from collaborating with our developers to helping our sales team on closing a deal with potential customers. The overall experience of InVision app is so seamless, that most of the times, even we (the designers) are unable to distinguish if we are browsing screens on InVision or on our actual product.
I would like to share with how we use InVision at Innovaccer and hopefully these tips would help you out if you are starting out with design.
Tip #1: Upload screens with sequential numbers
It is a good habit to save your art boards in sequential numbers. Doing so, will not only help you to keep track of the screens and workflows, but also help another designer in your team to have an idea of the user story.
At Innovaccer, we use “x.x” notation for the art boards, where the first digit is the primary user story and consecutive digits signify workflows for the corresponding stories.
For example,
1. List of Documents
2.1 Create a new document
2.2 Provide a name for the document
2.3.1 Document creation success
2.3.2 Document creation failure, try again
2.4 Document added (or some follow-up screen)
Tip #2: Maintain at least 2 versions — one for sales and other for developers
It is always better to maintain a stable version especially for sales teams because they are given training on the content they need to demo. Switching the content too frequently might create a gap in communication. Make sure all your new features or enhancements are maintained in a separate InVision project which allows you to collaborate with developers in parallel.
Tip #3: Hotspots templates for ease of usage
One or more clickable actions can be saved as hotspots, which can then be re-used across various screens. This is very helpful in case of navigations, which can save you tons of time by making all similar and reusable links grouped together.
If only there was a way to use these hotspots across projects, that would have been phenomenal.
Tip #4: Prevent hotspot hinting
One of the major feedback for design is to see how receptive are the users about the features or interface that you have worked on. By turning off hotspot hinting, you will be able to assess if your design is as intuitive, for the required user interaction, as you wanted it to be.
It also helps, if you do not want your potential customers to know that they are interacting with only mockup screens *wink*
Tip #5: Playing with overlays
Overlays in InVision is a blessing in disguise, it allows us to create modals, overlays without having to replicate the background content and thereby reducing the extra screens and effort. You can choose any “screen as overlay”, position it anywhere on the screen with custom positioning, set animation style and also reduce the background opacity to highlight the overlay.
When we usually have more than one states of a modal, we set similar positioning to different states so that it seems that the content is changing inside the same modal.
Some of things are still missing from this feature. First is a very basic need, which is, allow us to search for the screen that we want to select as the overlay. Second is layering of multiple overlays, for instance a dropdown or a date picker over (inside) the modal. And third, choosing a custom background color, right now, it is white and only the opacity can be altered.
Tip #6: Use real devices for a true experience
Nothing can replace the experience of the prototype which is viewed from a compatible device. Not only is it a great practice for demo but also helps you to understand the true space in the design.
There are a lot more features that the tool has to offer which I have not mentioned above. If you feel there is something else that I should add please let me know in the comments. Also, do share how working on InVision has improved your team’s effectiveness.
I will be sharing more of my learnings and adventures as a designer in a healthcare tech startup, with you all, on my medium channel. So keep tabs on me, by following me.
