This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Getting feedback from clients is a crucial part of any project. It doesn't matter if you're a team of one or a team of developers and designers, you need feedback from your client to keep the project moving forward.
Designing prototypes is a great first step toward engaging your client with the overall project. Not only will you save valuable time in the development process later on, you'll keep your client involved and iron out some much needed functionality early on. I use prototypes for all of my web projects as a first step in developing a user interface that will help the client envision the final website.
InVision is my tool of choice for its easy to use tools and the ability to share interactive prototypes with clients. This workflow helps the client understand the look and feel of a project before ever committing to code. This tutorial will walk you through three ways InVision can help you get valuable feedback from your client.
Today we'll only scratch the surface of how to use InVision in your prototype workflow. Be sure to check out my complete course on UX Prototyping for Mobile Devices with InVision and see how to design a prototype in Photoshop, bring it into InVision, apply these tips and more.
Before you can start receiving feedback on your project, you need to send a link to your client. Once your project is set up in InVision, you'll see two buttons on the main screen. One for LiveShare and one for Share. If you click on the green Share button, you'll be able to send a review link to your client.
There are many ways to share a project with InVision. You can copy and paste a URL, send an email, send to a mobile device (great for mobile app previews), embed into a webpage and download screens. You also have control over whether or not you want to allow commenting, navigation between screens and allow browsing of all screens in the project. Most likely you'd allow all three for maximum interaction from your client, but you can tailor these settings accordingly.
Now that you've sent an email off to your client, it's time to look at how your client can leave feedback.
1. Commenting
Commenting has long been a universal method to exchange ideas and feedback. InVision's tools offer flexibility for commenting straight in the prototype screens as well as an inbox for easy reference. Let's take a look.
Inside the project you'll see a variety of options at the top. By default you land on the screens page that display all the screens you uploaded to your project. Next to that, you'll see an Activity tab and Comments tab.
The Comments tab displays all your comments for the project. This set up is similar to an inbox format. It's easy to scan and send a comment back.
Click on the comment and a window will pop up for you to insert your reply.
But what if you want to leave a comment on a specific part of your screen? Head into the screen by hovering over it from the main screen and click View Screen. This will take you into the preview mode for your prototype. To leave a comment, click on the speech bubble icon or hit C to activate comments mode.
From here you can click anywhere on your screen and leave a comment. You can even click previous comments left by your client and send a reply. Finish a task your client requested via comment? Check Mark as complete to leave a note that you've finished it.
Perhaps you need to make sure only select users see the comments? Change Everyone to either Collaborators or Dev Note to leave a note to your developers.
Now that you've reviewed comments from your client, you can take them back to your project and either apply them to new screens for more review or move onto the rest of your development.
2. LiveShare
LiveShare takes your feedback into the now allowing you to present your designs and collaborate in realtime. You can share your project screens, mark on them with a virtual whiteboard and even engage in toll-free conference calls. Let's see it in action.
To activate LiveShare you can click on the blue LiveShare button found in any screen of your project or the main screen when you first login to your project. Your LiveShare screen will load in a new tab of your browser and comes with a variety of options and collaborative tools. You can immediately share the link to your LiveShare screen with others.
Once your client and team joins the LiveShare, you can engage in a Group Chat right in the screen.
Draw directly on the screen or go to a separate virtual whiteboard for more space. You can even save or email your drawings for future reference.
Tip: though not required, it does help to draw with a pen instead of a mouse.
You can also switch between multiple screens so that you can review your entire prototype user flow. Also review or leave new comments as a team in realtime. This works great if you are getting together with your team to review a project before talking everything over with your client.
End the LiveShare at anytime and return to your project screens, upload changes based on your conversation, and continue with your design and development.
3. LiveShare PS
LiveShare PS takes your realtime project sharing right into Photoshop. This is ideal for teams who are working on a design and need to see color options, or multiple functions. It's also great for that uncertain client who makes decisions based on seeing it first. This method definitely eliminates the emails back and forth sharing multiple screens and waiting on a response. Instead, hop into Photoshop, activate the LiveShare plugin and you're ready to share your project changes in realtime.
Note: LiveShare PS is only compatible with the latest version of Photoshop CC 2014, on OS X. You can download the plugin here.
The view for your clients and teams are identical to the LiveShare screen. The key difference is that the designer who initiates the LiveShare in Photoshop can interact with Photoshop in addition to the browser screen. Everyone in the LiveShare can see the changes instantly, leave feedback in the group chat or comments, and draw on any area of the screen.
For example, let's say you want to change the color of the "Be in the Know" banner from gray to teal.
This is superb realtime collaboration that makes the entire prototyping workflow more efficient and streamlined. You can get feedback instantly and work out any uncertainties between your clients and teams right in Photoshop without ever going back and forth in your email.
Conclusion
Now that you've seen what's possible with InVision, it's time to apply this to your projects. Improve your workflows and get instant feedback from your teams and clients!
Head on over to my course on UX Prototyping for Mobile Devices with InVision. This course will guide you through the entire prototype design workflow, from project brief and mock-up in Photoshop to client feedback and revisions. You'll also discover how to create mobile-friendly prototypes in Photoshop before diving into InVision to simulate user interactions.
