Creating prototypes — set up your streamlined workflow so you don’t kick yourself
As version 5 of your prototyping screens is exporting to your documents folder you think to yourself, “…dear god, why did I set up my design this way?” “Why did I make myself do a bunch of manual stuff?” “Why does every correction I make mess up other things?”.
Working between illustrator and Invision is a two step process, first you design in illustrator, then you bring pngs into Invision and make your prototype interactions.
As versions accumulate and design problems need to be fixed, you end up exporting a lot of stuff, and making a lot of wasted hotspots. I recently went through the process from conception (creating the test scenarios/objectives) to paper prototypes to clickable prototyping. I managed to not make my workflow the most painful thing ever (for once) so I thought I’d share some of my insights.
Ok, so these are the rough stages of the process as I know it. We’re going to focus on step 6.
- Realize you’ve got to test your design with users and the timeline you have to meet. i.e. before developers start on your design (flail wildly and freak out for a while).
- Get a clear idea of the areas you need to test, write out your tasks really clearly, ensure that there are not any distractions in the tasks in terms of subject matter, verbs you use, etc.
- Create paper prototypes from wireframes you hopefully already have. (Use symbols in Balsamiq to ensure that you can make global, instantaneous changes).
- Test your test with the paper prototypes, make sure that you’re asking the right things by running through the entire test process with some internal people. This works double duty, by working with team members outside of the design team, you can uncover details you’ve missed and also get them in on the design process. Everyone gets a kick out of doing these sort of tests I’ve found.
- Tighten up all of the details, start visual design* of prototypes
*visual design to me means when you take all of your thought/whiteboarding sessions on interaction, and wireframes and fire up illustrator.
- Go through the design process back and forth between Invision and illustrator.
- Test interactive prototypes with existing users or newbies that fit the right profile.
- Analyze test footage and gain understanding of what needs to be changed.
I’m going to focus on number six, specifically around the workflow between Illustrator and Invision.
Setting up your file in illustrator
There are multiple ways to do this, but I found a way that is pretty efficient. Taking time at the beginning of this process to set things up properly is so important, the most important ever, so you don’t go crazy by version 3. And are miserable by version 5.
You’ll be starting out this design process understanding which screen will be the larger and most complex (because paper prototypes have been tested already). Use this to figure out the maximum height. Then make all screens max height.
Set up your art boards properly
Name you art boards according to their specific context. Something like ‘task one screen 2’ or even abbreviated to 1–2. Any sort of understandable convention. As long as it is consistent. Name your illustrator file something that qualifies the art board name, so something like ‘Navigation Usability Test’. Then when you export your art boards to pngs, they will automatically be named similar to this ‘Navigation Usability Test 1–2’ you will easily pinpoint the one screen that needs changing and easily re-export it as you get feedback. Also, when you put them into Invision, the screens will inherit those names and you’ll be able to identify them easily.
Creating scalable assets in the design doc
Create the skeleton or background of your screen, example: the header and a sidebar. Anything that’s always in view and static. Make that a symbol. If any small changes need to be made, you’ll make it on that symbol, and it will be inherited by all screens automatically. Place the symbol on your layer 1. If they are all in the same layer, they are easy to ‘select all’, command A, and align them / adjust them if you need.
Again, give yourself the max height to work with. Then if you change small things inside of this skeleton, all of the layouts won’t get (as) weird and need adjustment. Plus, as it turns out, Invision allows you to sustain the scroll position when you go from one screen to the other, so your hotspots will be located in the exact same spot from screen to screen (more on invision later).
Create more symbols in illustrator. Because you have tested your paper prototype already, you have a good idea of all the states or moments in space time you’d like to capture. Analyze which pieces of your design will be reused on more than one screen. Then make them into reusable symbols (symbol naming matters here too, but just so you and your team mates can understand what is what).
Here’s an example of something you would want to make into a symbol: a cluster of buttons which have an active and inactive state or a consistent modal. Sometimes groups of these things. Make these groups of symbols at max height as well.
(I first validated this idea in Balsamiq with the paper prototypes, I made a lot of the same div/UI component with lots of states (each contained in a symbol). This approach made the editing process much easier. Just do the math: Say you make 6 symbols, each is used more than once, that’s a minimum of 12 screens you don’t have to manually change with each version.)
Ok so you have your artboards, your symbols, all of which they all have space to exist. Then you do the detailed work (the one off states/moments in space time). This should be easy because so much planning has already been done. Do you see where I’m going with this planning/thinking things through thing? Putting in that initial thought investment will make the whole prototyping process 10x faster and less frustrating.
Making the prototype
Early on, familiarize yourself with the features so you don’t design around problems that don’t exist, or perceived limitations of your software. Design is all about experimentation, so check things out and do experiments whatever new tool you’re going to launch into. No matter how frazzled you are, and how tempting it is to launch in there and just start, this approach will save your butt. You don’t have to do it the manual way if there are features which will make it easier.
(So I checked out an old version of the prototype that wasn’t being used, and looked to see what features would hurry things up a bit. I mentioned earlier that you can link and sustain scroll position, that was the first thing that saved us a lot of fussing.)
Invision features for efficient prototypes
In the ‘discovery’ part of launching Invision, I found some features which made things go fast. Specifically templates, prototype sections, replacing images, disabling hotspot flashing.
Again, do an analysis of the things that you’ll be reusing. Do you have a help text hover over hot spot that you need on every screen? Build it onto the prototype, but save it as a template. Then you can apply that template en masse to as many screens as you wish.
In the case of things like hover over help text, you can place the help text in a specific position using the custom placement option. *Just be careful once it’s placed to explicitly hit save after.
The project that houses all your pngs can have multiple sections, so you can group screens by the task number if you like. The UI is a bit subtle, but allows you to move things around by drag and drop.
Replacing screens with new versions of those screens, so if you have a lot of hotspots and you want to simply replace the existing image you can go to the screen, hit upload screens and drag and drop the new one into the big drop target. I had trouble figuring out what this feature was at first, but that worked for me.
Finally, if you’re using a prototype for a user test, you don’t want the hotspots to flash and for your users to get a hint of there to click. Then your whole test is shot, because some people click a lot as they try to discover what is possible. So, when you go to share your link, go to more options and enable the field ‘disable hotspot flashing’. And give that link out.
Test your prototype
Then, you test the whole testing process with some people. To make sure there aren’t some forgotten details in your test. By the time it comes to test with real users you’ll feel confident in your work.
Boom, you’ve created a great deliverable and saved 30% of your design time/frustration molecules by making reusable, scalable design assets, thinking through things initially really well, exporting your pngs with ease with each version, and creating templates in Invision.