Over the course of my career I’ve worked in large companies with vertical silos and teams spread across remote offices and geos. In both of these scenarios communicating project status, design, and development as well as sharing ideas is quite challenging. I’m always looking for ways to improve collaboration, whether through processes or tools.
Currently, I’m designing a mobile app for a company overseas, so not only am I dealing with geographic distance but I also have a language barrier (note: my attempts to learn Mandarin and Cantonese continue). The app is not single-focused, but has many facets and features which require multiple screen designs (100+). With this being my first native mobile app, and a complex one at that, I thought this would be a perfect time to seek out a new tool to help communicate the designs.
Previously, I presented flowcharts in PDF, screenshots/mockups in PowerPoint and Dropbox, and used Skype for screen sharing. All of these presentation tools fall short though, particularly for mobile design. Flowcharts are useful in wireframe mode when you’re communicating the app’s architecture, interactions, and layout. However, flowcharts don’t work well for showing high fidelity design. PowerPoint is a dependable go-to when presenting to shareholders and clients since they’re likely to have it installed on their PC and know how to use the application. It’s also useful for including annotations next to each screen design. However, PowerPoint doesn’t show the design’s true-to-life form if you’re designing for a smartphone or tablet which is a huge flaw. Cloud storage apps like Dropbox solve this problem by allowing you to view the mockups directly on your smartphone or tablet. The minor barrier is the client must install Dropbox on their device, but sending a link simplifies the process. While I recommend every designer pre-test their mockups with a tool like Dropbox, I still think it’s incomplete for presentations. Dropbox allows you to organize files into folders and create photo galleries, but it lacks in showcasing app interactions and flow. Skype, Adobe Connect, and other screen sharing tools are great for live presentations, but in my case where I have a significant time zone differences and am trying to turn designs quickly, it’s helpful to have a tool where the client can review, digest, and understand the designs on their own. It’s also worth mentioning, in a former job I used Atlassian’s Confluence to post mockups and detail interactions for developers, which worked well since it synced with Atlassian’s JIRA, a project management tool. However, this is a start-up company with a lean budget and Atlassian, while great for communicating with developers, is not suitable for shareholders and client presentations.
In my quest to find a more effective mobile design presentation and collaboration tool, I discovered InVisionApp. The tool allows designers to create fully interactive prototypes without any code so others can try the intended user experience on their mobile device as if it were a real functioning app. Designers simply create an account at InVisionApp.com, upload image files (.jpg, .png, or .gif) to their account, and start linking images together. BAM! You’ve got a functioning prototype that you can send around to stakeholders for review and feedback.
There are several other competitors in the market offering similar a similar service, but here’s what I love about InvisionApp:
Invision was obviously built with their end user in mind – designers primarily. The app is well organized and user-friendly, while the visual design of Invision is eye candy. You want to keep using InvisionApp just because it’s easy and pretty.
You can send copy and paste the project URL, send an email or an SMS, or even embed it to an internal site. Stakeholders can then view the designs on a mobile device and web browser or you can even present in real-time using Invision’s LiveShare presentation tool. If viewing a mobile app project from a web browser, InvisionApp wraps the mockups in a mobile device frame which is a helpful to envision (pun intended) what the actual screen will look like on a mobile device.
InVision offers a suite of mobile gestures, transitions and animations to make your app come to life. In addition, you can customize the app icon and loading screen as if you launched your app.
Invision allows stakeholders to leave comments directly on the designs, so communication doesn’t get lost in email. This is a common feature available across other solutions in the market. However, where InVision differs is they take those comments and turn them into actionable to-do lists, helping designers organize and manage changes while keeping everyone in the loop on progress and design iterations. You can even mark each design’s status — in progress, needs review, or approved. It makes for a seamless workflow which I love.
Invision has a team of customer evangelists that want to ensure you have a good experience with their product. I received a follow up email a week or so after I signed up inquiring about my experience with Invision. I had a question about how to lock the iOS navigation bar (which turned out to be very simple) and they responded within 24 hours. In addition, they snail mailed me a few stickers and a magnet a week later just for tying out Invision. I still haven’t taken them up on their cool t-shirt, but I think it’s a nice touch and great idea for brand promotion.
Invision interviews top companies to give a rare inside look at other designers’ roles, workflows, tools, workspaces, inspiration and advice. Talk about awesome content marketing!
InVision gives you one project for free which is currently serving my needs. However, I can see how it’s beneficial to subscribe to a monthly plan if you have multiple projects or multiple designers. Plans include: $15/mo. (3 projects) or $25/mo. (unlimited projects) for individuals, $100/mo. plan for up to five team members, or an enterprise plan.
Overall, using InvisionApp makes a great difference not only in your workflow, but also adds an extra polish and professionalism when presenting to stakeholders. In addition, having a true-to-life prototype can help teams identify and address product weaknesses or potential technical limitations early on in the development process. It’s free and totally worth trying yourself. (Attention: all tech start-ups should be using Invision!)