Learn how to ideate and iterate using world-class InVision tools like Boards and Freehand—create moodboards, rapid sketch ideas, and collaborate on storyboards.
What you'll learn
- How to ideate and iterate
- InVision Boards (inspiration)
- InVision Freehand (rapid iteration)
- Crazy eights and storyboarding
- Design collaboration with Slack/Polly
Ideation With InVision
Question: have you ever run a design sprint?
A design sprint is an energetic 5-day methodology utilized within teams to research customers, rapidly iterate over ideas, prototype solutions, and test them with real users—all in 5 days. Whether your team enjoys the benefits of a design sprint, or some other type of lean approach to design, the InVision Platform (Studio included) has some terrific tools to help with rapid iteration, storyboarding, and design collaboration.
In this tutorial, we’ll learn how to rapidly ideate with InVision Freehand (a tool for realtime remote whiteboard collaboration). We’ll also learn how to curate inspiration using InVision Boards, and we’ll talk about how Studio (InVision’s new screen design tool), Freehand, and Boards all come together to enable a seamless design workflow.
Below: Studio screens imported into InVision Freehand.
We at UX Tricks are building a new product.
Business objective? Discover a new revenue stream.
Customer research shows that designers and entrepreneurs want to try new apps and subscriptions to help them work better/faster, but they’re not always affordable, and sometimes, they end up undiscovered having not received the exposure they deserve.
Within the tech industry, which is rife with competition, an extended trial or rare discount can be the difference between investing in one app or the other, and since many apps and services offer affiliate linking, this seemed like a fairly decent way to explore a new revenue stream while making certain apps and services more accessible.
Step 1: find out how others are solving similar issues.
Compiling Inspiration With InVision Boards
Most ideas are remixes of things that already exist. By compiling inspiration onto InVision Boards, we’re acknowledging how similar issues are being solved. This inspiration will fuel our ideation and iteration cycle when it’s time to begin sketching.
Creating a Board
Start by opening up the InVision web dashboard, clicking on the rounded + button, and then selecting the “Create New Board” option. Give the board a name (which in our case is Design Deals Inspiration). Next, choose a grid type (FYI: due to the way that we’ll lay out our board, this setting actually doesn’t matter at all, so choose anything).
Populating the Board With Inspiration
Assuming that we’ve screen-captured the examples that we like, click the “browse” link within the newly created board to open up the file chooser, and add them to the board.
Supported Media Types
FYI: boards actually support a number of different media types, including…
- Design files
- Code files
- Color swatches
Documenting the Likes and Dislikes of Each Example
We’d also recommend including some text notes to highlight the likes and dislikes of each example. To do this, click the rounded + icon, then click “Add a Note”. Remember to hover over the uploaded screen cap afterwards and adjust the “Change item size” slider, changing the item size to span the full width of the board. This is so our screen caps and text notes become vertically stacked, and don’t appear to be disorganized.
Separating Each Item of Inspiration
On that note, let’s also add a section title for each example so that they’re visually contrasted and easier to browse through. Hover the board where the section title should appear, clicking the + icon that appears alongside “Create New Section Title”.
Give the section title a name and description. If you’d rather keep the moodboard brief, write any notes in the section description instead, thus eliminating the need for notes.
Inviting Others to Collaborate
Before wrapping up this moodboard exercise, click the + button in the center of the screen (right next to your avatar, underneath the board title) to “Add / Remove People”.
Grab your teammates’ email addresses and invite them to collaborate.
Everybody contributes, that’s the rule! 😉
Excited yet? Great. If ideas are already flowing, hold onto them for a few more minutes!
Crazy Eights With InVision Freehand
Ever heard of Crazy Eights? Crazy Eights is quick and inexpensive rapid iteration technique where we sketch 8 rough concepts in 8 minutes, regardless of how crazy they are. People often don’t discover their best ideas because they become too fixated on refining their first idea (and thus, with bias, convincing themselves that it’s the ultimate solution). Crazy Eights allow us to break free from these (very) costly habits.
With inspiration now at hand, it’s time to sketch our own solutions.
Plain Ol’ Paper vs. InVision Freehand
One way to approach Crazy Eights is to take some paper, fold it three times, and then unfold it to reveal 8 squares. After this, take a thick marker (this helps us to defocus on detail), and simply begin sketching. That being said, if you’d rather be environmentally-friendly (and have a safe space to store sketches), InVision Freehand is a blissfully easy way to think out loud, especially when you need to collaborate with others in realtime.
Essentially, it’s a collaborative whiteboard with raw tools that anybody can use.
Below: 8 ideas drawn with InVision Freehand (time: ~8min).
Sure, we can rapid iterate in Studio, however, Freehands are accessible from the InVision Web Platform, meaning everybody can access them without somebody else having to export their designs—everybody can have their say without needing to download or learn how to operate sophisticated design tools. Freehand makes design more democratic, it’s everybody’s opportunity to make mistakes and create disposable ideas, it’s everybody’s opportunity to be a designer, which is perfect for Crazy Eights.
Freehand is also accessible via InVision iOS, for those that would rather sketch using the Apple Pencil. We’ll be running through this section of the tutorial using the desktop version, although it’s worth downloading InVision for iOS because it has a tonne of other features, especially when combined with Studio, which we’ll dive into later.
Don’t worry, using InVision Freehand on desktop is just as easy.
Starting a Freehand Session
Via the dashboard, hit the + button once again. Choose “Create New Freehand”.
Learning Freehand in ~2mins
Now, remember how I said that using InVision Freehand on desktop is really easy? Here’s why: drawing with a mouse is notoriously frustrating, however, Freehand’s shape detection tools automatically convert awkward scribbles into beautiful sketches.
Let’s take a super-quick look at how.
- Step 1: tap P or 2 to switch to Pencil
- Step 2: hold ⌥ and draw a circle
- Step 3: tap V or 1 to switch to Pointer
- Step 4: move the circle to the top-left corner
- Step 5: tap P or 2 to switch back to Pencil
- Step 6: hold ⌥ and draw a rectangle
- Step 7: tap V or 1 to switch back to Pointer
- Step 8: click on the rectangle
- Step 9: resize it by adjusting the blue, draggable handles
- Step 10: hit ⌘ + E to fill the rectangle
- Step 11: tap P or 2 to switch back to Pencil
- Step 12: hold ⌥ and create a rectangle by drawing only two sides
- Step 13: hold ⌥, this time creating a rectangle by drawing a diagonal line
- Step 14: tap T or 3, then type out some text
- Step 15: hit ⌘ + B to bold the text
- Step 16: tap P or 2 to switch back to Pencil
- Step 17: hold ⇧ to draw a vertical line
- Step 18: hold ⇧ and draw a series of lines, creating an arrow illustration
- Step 19: tap V or 1 to switch back to Pointer (or hold ⌘)
- Step 20: drag the mouse over these lines to select all of them at once
- Step 21: hit ⌘ and -/+ to zoom in or out
- Step 22: without ⌥, simply draw something without shape detection
- Step 23: select this layer, hold ⌥, then drag it to create a duplicate
- Step 24: hit ⌘ + S to save the Freehand
- Step 25: click the keyboard icon in the bottom-right corner to reveal all shortcuts
Now that you know how, sketch your 8 ideas using Freehand. Below: my 8 ideas!
Storyboarding With InVision Freehand
Next: choose one idea and create a storyboard.
A storyboard helps us decide how many screens are needed for our solution to work, and roughly what those screens should look like. Remember to sketch with a little more fidelity this time around—think: realistic, but not overcomplicated. People should be able to follow the story easily. Include any template UI, such as the main navigation.
Below: I chose idea #8 and ended up with a 3-step storyboard.
Preparing the Storyboards for Show n’ Tell
Assuming that other team members have sketched their own Crazy Eights and storyboard, after a quick voting cycle, one of these storyboards will be chosen as the solution most likely to succeed. This is the solution we’ll prototype in InVision Studio.
Have everybody screen-capture their storyboard and upload it to a new InVision Board.
Pro tip: to make voting easier, give each storyboard a unique name/section title.
Voting on the #1 Storyboard 🏆
Get chatty 💬.
We can do this in various ways, but a common method is to use Slack, (1) because it’s awesome, and (2) because Slack integrates with InVision in numerous ways. For now, simply drop a link to the board in Slack, and then briefly discuss each solution in turn.
When you’re ready, vote on the best solution.
- Install a voting app such as Polly on the team Slack
- Mark your name in the relevant section header on the board
Below: discussion followed by a Polly vote within Slack 👏.
And violà, we’re done! 🎉
Stay tuned for next week, where we’ll learn how to prototype the UI for our storyboard with Studio. Also, subscribe to the InVision Studio Pocketbook!
Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.