InVision StudioNewUX DesignBurning Questions

Quick summary

Learn how to ideate, iterate, sketch, and storyboard winning ideas using world-class InVision tools like Boards and Freehand.

On the agenda

  • Ideation and iteration
  • How to curate inspiration
  • Crazy Eights and storyboarding
  • InVision Boards and Freehand

Ideation With InVision

Question: have you ever run a design sprint? 🤔

A design sprint is an energetic methodology used to research customer needs, rapidly ideate and iterate over ideas, prototype solutions, and then 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 has all of the tools needed to validate ideas early by sketching, iterating, wireframing, testing, and collaborating.

We won’t learn how to conduct a design sprint now, however, we will utilize a few design sprint techniques such as compiling inspiration, sketching ideas in solitude, and voting on ideas as a team. We’ll learn how to curate inspiration using InVision Boards, and how to rapidly ideate with InVision Freehand (remote whiteboard collaboration).

We won’t discuss InVision Studio, however, the knowledge of Freehand will be useful when we start collaborating on high-fidelity mockups with Studio later on (see image below), and you’ll also acquire a better understanding of the overall InVision workflow.

Importing screens from Studio to Freehand

The Problem™

We at UX Tricks are building a new product.

Business objective? Discover a new revenue stream.

Customer research shows that designers want to try new apps and subscriptions to help them work more efficiently, however, they’re not always affordable, or they haven’t yet become mainstream. Our idea? Discount bundles for designers and entrepreneurs.

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.

Here’s a terrific resource for learning about user needs and customer research.

So there’s the context — let’s begin our tutorial.

Step 1: find out how others are solving similar issues.

Compiling Inspiration With InVision Boards

Most ideas are remixed from solutions 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) — the grid type doesn’t matter, so choose anything.

Creating a board

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.

Adding inspiration to a board

Supported Media Types

Boards support various media types, including…

  • GIFs
  • Fonts
  • Audio
  • Video
  • Design files
  • Code files
  • Documents
  • Presentations
  • Color swatches

Documenting the Likes and Dislikes of Each Example

We’d also recommend including 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 caps afterwards and adjust the “Set Item Size” slider, changing the item size of the screen cap to span the full width of the board. This is so the screen caps become vertically stacked with the notes horizontally tiled underneath.

Adding notes to a board

Separating Each Example

Next, add section titles to separate each example. Hover over the board where the section title should appear, then click the + icon underneath “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.

Adding section titles to a board

Inviting Others to Collaborate

Before wrapping up this moodboard exercise, click the + button in the center of the screen, next to your avatar, underneath the board title, to “Add / Remove People”.

After that, scoop up your team’s email addresses and invite them to collaborate.

Everybody contributes, that’s the rule! 😉

Collaborating on a board

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 at hand, it’s now 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 stops us fixating 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 we need to sketch ideas with others in realtime.

Below: 8 ideas drawn with InVision Freehand (time: ~8min).

Crazy Eights with InVision Freehand

Freehand is accessible from the InVision Web Platform, meaning anybody can use it without special software. It makes design more democratic, offering all stakeholders the chance to collaborate whether they’re reviewing an idea or sketching alongside us.

It’s basically your team’s whiteboard.

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 the InVision iOS app because it has a tonne of other features, especially when combined with Studio, which we’ll dive into later.

Creating a Freehand

Via InVision Web, hit the + button once again. Choose “Create New Freehand”.

Creating a Freehand

Freehand in 120s

Drawing with a mouse is notoriously frustrating, however, InVision Freehand’s shape detection tools automatically convert awkward scribbles into beautiful sketches.

Literally, you can learn it in a couple of minutes. Ready?

  1. Tap P/2 to switch to Pencil
  2. Hold and draw a circle
  3. Tap V/1 to switch to Pointer
  4. Drag the circle into the corner
  5. Tap P/2 to switch back to Pencil
  6. Hold and draw a rectangle
  7. Tap V/1 to switch back to Pointer
  8. Click on the rectangle
  9. Resize it by dragging the blue handles
  10. Hit ⌘E to fill the rectangle
  11. Tap P/2 to switch back to Pencil
  12. Hold and draw only two sides of a rectangle
  13. Hold and draw a diagonal line (result: rectangle)
  14. Tap T/3 then click and type some text
  15. Hit ⌘B to make the text bold
  16. Tap P/2 to switch back to Pencil
  17. Hold and draw a straight line
  18. Draw an arrow head on the end of the line
  19. Tap V/1 (or hold ) to switch back to Pointer
  20. Click-drag over the arrow to select all the layers at once
  21. Hold and drag a layer to duplicate it
  22. Hit ⌘ and -/+ to zoom in or out of the canvas
  23. Hit ⌘S to save the Freehand (there’s no autosave)
  24. Click the keyboard icon (bottom-right corner) to reveal all shortcuts
InVision Freehand tutorial

Now that you know how, sketch your 8 ideas. BTW: in a design sprint, we typically sketch solo and everybody else weighs in later. People brew their best ideas in solitude.

Below: my 8 ideas!

Crazy Eights with InVision Freehand

Storyboarding With InVision Freehand

Next: choose one idea and turn it into a storyboard.

Do this in a separate Freehand, because we’ll share this one with stakeholders.

A storyboard helps us choreograph our wireframe by deciding how many screens are needed, and what they might look like exactly. Remember to sketch with a little more fidelity this time around — think: realistic, but not overcomplicated. Stakeholders 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.

Storyboarding with Freehand

Storyboarding Show n’ Tell

Assuming that all sprint members are ready to share their final storyboard, it’s time to vote on which one will be turned into an interactive wireframe using InVision Studio. Have everybody screen-capture their storyboard and upload it to a new InVision Board.

Tip: to make voting easier, give each storyboard a unique name/section title.

Next step: spend a few minutes looking through each of the storyboards. Ask questions 💬 and annotate/comment on each other’s Freehands if necessary.

Voting in Slack 🏆

We can vote using numerous methods — a common method is to use Slack because Slack integrates with InVision in various ways, so your team may already be using it.

Ways to vote in Slack:

  • Install a voting app such as Polly on the team Slack (free)
  • Simply vote in Slack (without an app) and tally the results manually

And violà, we’re done! 👏

Next up: the winner gets to be prototyped in Studio. Get the ebook here.

Daniel Schwarz, author

Daniel Schwarz

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.

InVision StudioUX DesignAdvanced UXInVision StudioUX DesignBurning Questions