User experience design: Collaborating with InVision | Kagool

User experience design: Collaborating with InVision | Kagool
25th June 2018

Learn how user experience design is a collaborative process at Kagool.

What is InVision?

InVision is a polished, incredibly flexible and ever evolving digital design platform. It has been used by brands such as, AirBnB, Amazon, IBM and Netflix to generate world class user experiences. User experience design is a collaborative process for us.  And at Kagool we use InVision to allow us to be more organized and to communicate effectively.

At its core, InVision separates out into two tools; prototypes and boards. Prototypes visualise designs and boards allow us to share design inspiration and other galleries. We use both in interesting ways and benefit from the InVision platform during many stages of user experience (UX) and Design.

User Experience Design

If you already work in UX, you’ll be familiar with the concept that a memorable experience is made up of micro moments. Tiny interactions that stand out, enriching the experience and making your life easier.

Think about the convenience of Amazon’s ‘One Click’ ordering, the simplicity of AirBnB’s search results filtering, or Google Inbox grouping your holiday booking emails into an event. In isolation they can seem a little insignificant, but when they are part of a carefully considered user journey they create an experience that users will remember.

Ideas for these micro moments can come at any time, from a passing comment in a workshop, to a discussion around the coffee machine. Sketch and InVision allow us to quickly take an idea to users with rapid prototyping and deployment. We start by visualising and developing the concept in Sketch. If a brand library already exists, we can link to it and quickly get to a high level of fidelity which is on brand and feels polished.

Then, using the Craft Plugin, artboards are exported to an InVision project where we create the interactions and steps to make a seamless ‘smoke and mirrors’ prototype. This can be shared with project stakeholders for quick feedback, or tested directly with users via an online testing platform, email, or even text message for mobile prototypes.

Users can leave comments and feedback for improvements directly within inVision, and any updates made to the Sketch file can be pushed quickly to InVision and re-tested. This gives us an incredibly quick and responsive cycle of testing, gathering feedback, and iterating the design. The approach fits neatly within an agile workflow and ideas can be validated early in a project lifecycle.

Visual Design

Awesome thing 1 – Workflow

We use Sketch for digital design and InVision has provided some great third-party support via their plugin called Craft. We use this to generate dummy content, define component specific responsive measurements, and sync files online to the InVision app. So, once we’ve finished working in Sketch, we upload our concepts and realised designs to InVision for review.

We organise visuals using the project management feature called Workflow. This is simply an alternate view and way of organising your visuals. You get four columns:

  • On hold
  • In Progress
  • Needs Review
  • Approved

We use this system to vet designs and follow this process.

  1. New visuals are uploaded into InVision and then are auto categorised as ‘In progress’
  2. We move the visuals into ‘Needs review’ when they’re ready for client eyes
  3. Once these are signed off or refined they’re then moved to ‘Completed’
  4. They are then uploaded to another collaboration tool called Zeplin for our developers to build from.

 This process helps to keep our sign-off and build process separate.

Awesome thing 2 – Presenting

We like to keep it simple and present flat visuals that focus on aesthetic and functionality. Using InVision allows our team to scan the page designs without any distractions, so we can contextualise, experience, and critique the design.

But that’s made better buy one of InVision’s greatest features, the ability to add actions in the form of notes.

These can be directed at people using @Name, made private (for internal discussions) or to act as presentation tour points. So, we present and instead of making notes in a notepad, add them directly into the prototype and tick that beautiful ‘Resolved’ check box as requested adjustments get … well … adjusted.

Awesome thing 3 – Boards

Boards are beautiful! We work on boards throughout a project and then to deliver at the end. These can continue to exist as an evolving page that is client facing and used to sum up the project combining visuals, resources, assets and rules into a single board. We use these boards as part of final handover to clients. They then act as a reference, style-guide and asset resource, that are assembled and written to be user friendly.

As nothing is stuck on a server we’re able to empower our clients by giving them full access to their assets. Overall making the whole experience more convenient and efficient for everyone.

What you need to take away from this

Firstly, user experience design can be and should be an enjoyable collaborative process. InVision is a great presentation tool but not necessarily to prototype interactions.

Secondly, it’s worth utilizing integrating tools for the best result, Craft improves Sketch and shouldn’t be overlooked.

Thirdly, if you master the art of notes, as a designer, life will be easier. In addition to that, Workflow is an invaluable tool that is there to help you keep organized – use it.

Lastly, boards are a beautiful way to organise and share everything created for a project.

All of the above make InVision great at aiding a collaborative user experience design process. It’s got some great tools from which you can pretty much pick and choose. But importantly the core ones are well executed and extremely helpful.

InVision V7 is just around the corner, we’re brimming with excitement at Kagool.


Does your organisation need a website a creative uplift?

Our skilled creative team are here to help. Get in touch to find out how we can help with your user experience design.