Learn how to ideate, iterate, sketch, and storyboard winning ideas using world-class InVision tools like Boards and Freehand.
What you’ll learn
- 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.
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.
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
Boards support various media types, including…
- Design files
- Code files
- 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.
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.
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! 😉
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).
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”.
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?
- Tap P/2 to switch to Pencil
- Hold ⌥ and draw a circle
- Tap V/1 to switch to Pointer
- Drag the circle into the corner
- Tap P/2 to switch back to Pencil
- Hold ⌥ and draw a rectangle
- Tap V/1 to switch back to Pointer
- Click on the rectangle
- Resize it by dragging the blue handles
- Hit ⌘E to fill the rectangle
- Tap P/2 to switch back to Pencil
- Hold ⌥ and draw only two sides of a rectangle
- Hold ⌥ and draw a diagonal line (result: rectangle)
- Tap T/3 then click and type some text
- Hit ⌘B to make the text bold
- Tap P/2 to switch back to Pencil
- Hold ⇧ and draw a straight line
- Draw an arrow head on the end of the line
- Tap V/1 (or hold ⌘) to switch back to Pointer
- Click-drag over the arrow to select all the layers at once
- Hold ⌥ and drag a layer to duplicate it
- Hit ⌘ and -/+ to zoom in or out of the canvas
- Hit ⌘S to save the Freehand (there’s no autosave)
- Click the keyboard icon (bottom-right corner) to reveal all shortcuts
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!
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 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 🏆
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! 👏
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.