Prototyping is the most effective way to test and validate app concepts
Whether you’re a single-member startup or a well-funded development team, I will always recommend creating an interactive prototype to facilitate rapid customer feedback on app concepts. Here is the exact formula I use to day-to-day for my clients:
Design screens using Sketch
This design tool is relatively low-cost, easy to learn and integrates with many prototyping tools which will save you time. As a designer, I often collaborate with product owners and product managers by sharing and modifying each other’s Sketch files. Once you get the hang of the basics, you should learn how to create re-usable symbols and style libraries to speed up your workflow.
Click here to download a trial of SketchBuild a prototype using Invision
Once you’ve designed your first version of each screen, upload the designs to an Invision project. Use build mode to add hotspots which will turn your screens into a tappable prototype. The goal is to test your most-important user flows so you can collect feedback and iterate before sending the concept to development.
Share the prototype with your teammates and collect feedback in comments on each screen. When you’re ready, send a link to your tester’s mobile device and ask them to complete the workflow. A huge number of usability issues can be caught early by simply testing your prototype like this with a handful of people. This practice can save you thousands of engineering dollars in the long run by catching issues early on.
Pro-tip: Give each screen a unique name in the files you export from your design tool so that Invision can keep proper track of them. This will save you time in the long run because you’ll be able to simply replace a screen with its new design to preserve its hotspots and interactivity.
Click here to sign up for an Invision account (with $25 credit)Install the Craft plugin for Sketch
With the Craft plugin, it becomes incredibly easy to export the screens to Invision while preserving all of the hotspots that have already been set up. This means that you can tweak small things like copy, button text or images, and one-click export all screens in your file to keep your prototype up-to-date with the latest changes. Once you’re done making changes, click the Craft export button within Sketch to automagically update Invision.
Click here to download the Craft plugin (free)Use Abstract for version-control
If you’re collaborating with others on Sketch files for your application design, consider using a version-control tool like Abstract to ensure y’all are always working with the most up-to-date file. While Abstract is an investment and takes time to learn, the long-term advantage is you will never worry about accidentally saving over someone else’s work and will ensure that all previous versions of those files are preserved.
Your engineering buddies will love this tool due to its similarities with how code files are stored with Git. Abstract will give you peace of mind knowing that nothing can be lost.
Click here to learn about AbstractHand-off design files with Invision
My trick for making design-developer handoff easy as pie is utilizing the ‘Inspect’ tools already available within Invision. Since you’ve already set up your prototype and are using the Craft plugin to keep each screen up-to-date, then all you’ve got to do is ensure that the assets are downloadable.
In Invision ‘Inspect’, a developer can “zoom in” to each element on the screen to view its style properties (things like color codes, type styles, pixel dimensions, shadows, overlays, and so much more). To make assets (icons, images, graphics) ready for export, simply click on that object in the Sketch file and check the box “make exportable”. Then sync your files with Craft, and voila! Your developer friend can now download that asset.If you can’t already tell, I’m a HUGE fan of prototyping for speeding up the app design and development process. I hope this post has given you some ideas on how to improve your workflow