sketch

Before any final product goes live, there are countless sketches, whiteboard scribbles, test plans, and prototypes to guide us forward. We, as end users, don’t always see them, but those rough squiggles and drafts are invaluable even though they never see the light of day. Prototypes are an early version of a product, and as a drafting tool they are an increasingly essential part of any multidisciplinary team’s methodology. They’ve had a long history outside of the digital world, but for any digital product team their benefits are rich and varied. Teams can gain approval earlier in the process of building, determine and solidify design direction, understand and evaluate technical approaches and solidify content from one tool before any code is written. Agile promotes getting out of the office and in front of the customers – in order to validate that what we are building is valuable to them. Prototypes are one of the best tools in a team’s toolbox to help build enjoyable, functional and delightful products quickly, without confusion and with lower costs and time.

The UX team at InRhythm have been veterans of the various Prototyping Wars over the years. We’ve seen prototyping go through intense debate – what fidelity and software, when to build them, what to make interactive, what code we can leverage afterwards, and how to encourage them in the first place. Like many in current UX and Product Design circles, we’re enthusiastic, passionate cheerleaders not only for the value of prototyping, but in particular for the killer Tag Team of modern prototyping software, Sketch and Invision. To say they are game changers and life savers is not hubris – they are a revelation. We’re excited to be able to share what we’ve learned about the world of prototyping in more depth in our upcoming Meetup, and walk through how these tools make everyone’s lives easier no matter if you’re a product owner, designer, developer, stakeholder, other team member or end user.

There is a role in modern software development for moving towards code based prototypes using Bootstrap, Angular and other frameworks – perhaps we’ll all be prototyping in Framer one day. There should always be room in the family for the high fidelity, interactive ‘click through’ prototypes that Sketch and Invision create. When it comes to mobile, Invision and other tools like Pixate can create experiences so close to native code that you’d be hard pressed to tell the difference. No matter what fidelity or tool, getting a prototype in front of stakeholders allows for approval and testing with real users without needing the final, polished, finished, and tested product code, which can be expensive to retroactively go back and fix. Our UX team has worked with developers to build out the prototypes we’ve designed and developed, and can share how a mature approach to prototyping benefits everyone on the team.

When prototyping a flow of screens, the time to develop multiple screens or multiple design options can be easily done by a designer rather than a development team. Prototyping the right thing means giving more time back to the development team to focus on solving the important technical challenges rather than prototyping the obvious things that don’t need validation, or building out multiple screens and multiple flows. By using Sketch’s branding related features like ‘Copy CSS’ and Invisions ‘Dev Notes’ commenting tool, developers will get the instructions they need to pick up the pace after a prototype is validated. There is a source of coolness for our devs – by hiding notations layers or multiple pages via a simple ‘-‘ to a file name in Sketch. We can quickly go from ‘rough concept’ to ‘selected design’ to ‘prototype’ to ‘final design with notes to help devs’ all within the same document, rather than sending a never-ending stream of PDFs. With Invision Sync, working with these two tools becomes seamless and automated. Like a great product, you don’t have to think about it – it just works. Development has become a beautiful craft because we build upon the work of previous products – with modern UX prototyping software, building continues easily, scalably and without pain and heartache. The days of slicing .gifs, version control panic and PSDs with sad titles like ‘final_approved_last_change_USETHISONE.psd’ are dead – and it’s about time.