A step-by-step process for creating interactive prototypes
The digital product design space is constantly evolving, so our team of designers is continuously testing new tools and approaches. Voltage Control is a proponent of dynamic collaboration because it enables our sprint teams to arrive at a prototype faster with less miscommunication along the way. During a Design Sprint, a collaborative five day design process, we work closely with our Sprintmates.
Most designers and developers can readily share frustrating stories about the painful side effects of relying on arbitrary file naming schemes or other brittle processes for organizing files when working with others. While there is no “one size fits all” approach to working on a prototype as a group, we’ve developed an approach that works well and have decided to share it with you.
I will begin with an overview of four tools we are currently using to build prototypes and finish with step-by-step instructions on how we make prototypes at Voltage Control.
Abstract
Abstract is a powerful tool for versioning and sharing Sketch files with your entire project team. In recent Design Sprints, Abstract has become our hub for file management when working with multiple designers, copywriters, and other contributors. With Abstract, we no longer lose versions of files or accidentally overwrite previous work. Abstract is a breeze to pick up even if you are unfamiliar with version control. If version control is a new concept to you, we highly recommend you first check out this overview of Git and Gitflow by Atlassian. When working alone, making changes linearly is fine, but when collaborating with multiple team members, a version control process like Gitflow drastically improves the pace of your work and reduces duplicated efforts and rework.
Everyone dislikes redoing something that was overwritten or realizing that you’ve duplicated something someone else has already worked on. With Abstract, you can directly synchronize your Sketch files with other team members, make comments on files, and communicate design specifications all in the same workspace. During a recent Voltage Control Design Sprint, our team had two designers and a copywriter working on the same prototype. All three of us were working on files that were directly connected using Abstract. The copywriter was able to add comments and update copy dynamically, while each designer was syncing work as they completed each screen. I really liked the direction that our teammate Ben was taking on a list structure, and I was able to use that as inspiration for other elements of the app. Simultaneously, I could respond to the copywriter’s direction. This would not have happened without the real-time capabilities of Abstract.
Sketch + Craft Plugin
Sketch is the leading digital product design tool available on the market today. Most designers are already familiar with Sketch, and it is the tool of choice for most software interface designs. If you have never used Sketch, download the free trial and check it out. While I won’t spend much time explaining how Sketch works, I can say it is very easy to learn and you can find additional resources here. In this tutorial, we will cover how to connect the Craft Manager to create interactive hotspots and sync your project to an InVision prototype.
The Craft plugin is one of the best tools available to improve your prototyping with Sketch. While Sketch offers Sketch Cloud and other prototyping tools, these tools do not provide the same level of collaboration and ease of use as the Craft plugin. Using Craft in our workflow, we no longer need to separate the stitching of the prototype and the generation of screens into two separate tasks to be completed in separate programs.
Invision
Invision is a tool that allows you to upload a set of still images and connect them together via clickable hotspots. By assembling this interconnected set of images, you can create the illusion of a functioning product. Invision also has a set features that help designers create more realistic prototypes such as additional transitions, mobile phone frames, etc. Teams working on a portfolio of prototypes can easily manage shared links.
Using a shareable link and a password, every member of the sprint can stay up to date on the progress of the prototype while it is being created. Members of the team can add comments and feedback to document to-dos, tweaks, and other desired changes.
Voltage Control uses Abstract, Sketch, Craft, and Invision as its prototyping toolkit to provide the best collaboration experience available. We are constantly tweaking and evolving our process and toolchain. We’ll let you know as we find new and exciting tools.
Step-by-Step
This step-by-step tutorial covers a process for creating a prototype using these tools. This workflow is structured to keep the prototype flexible, organized, and easy for the team to maintain. First, let’s do a little bit of preparation to set up our prototyping environment.
0.0 Set up the prototyping environment.
0.1 Sign up for an Abstract account and Download Abstract.
0.2 Download Sketch here.
0.3 Download and Install Craft Manager.
0.4 Create an InVision account here.
After you’ve completed these four steps, we are going to make a simple three-page app with buttons that will transition us between the pages. It will look like this at the end.
1.0 Let’s get started with Abstract
Abstract is the hub of projects where we can access all of our prototypes as well as previous versions of our prototypes.
1.1 Once downloaded and installed, launch Abstract.
1.2 You will be prompted to sign in or create an account.
If you have not already signed up, select “Create an account” to be taken to the Abstract website. Otherwise, sign in, and continue.
After you verify your email and complete signup. Close your web browser to return to the Abstract desktop app.
1.3 Click on the “New Project” button in the top right of the window to create a project.
1.4 Name the project “Hello Rapid Prototyping”.
1.5 Add a description: “A sandbox to explore collaborative prototyping tools.”
1.6 Set the custom hex value to #000000
1.7 Leave “Make private project” unchecked.
1.8 Select “Create Project”.
2.0 Use Abstract to create a Sketch File
Abstract will track changes to our Sketch files so that we never lose work and can collaborate by syncing the files across our team.
2.1 Select the grey “Create Sketch File” button in the middle of your screen.
2.2 Name your Sketch file “My First Prototype”.
2.3 Leave “Use as Library” disabled.
If enabled, symbols within this file can be used in other Abstract projects.
2.4 Next, select “Edit in Sketch” in the top right of your Abstract project window to open your file.
2.5 You will be prompted to open untracked or create a new branch. We want Abstract to track our changes, so select “Create a Branch”.
2.6 Name the branch, “Getting Started”.
2.7 Select “Create Branch”.
The modal will close. Abstract will generate the branch and automatically launch Sketch.
3.0 Draw artboards for our screens.
Artboards represent screens in Sketch. We can easily create the screens of our prototype with Sketch’s default features.
3.1 Click Insert from the toolbar at the top left of the window.
3.2 Select Artboard from the dropdown that appears.
3.3 Choose iPhoneX from the Inspector panel on the right of the window.
3.4 Select the iPhoneX artboard by clicking the name above the artboard. Press ⌘+C to copy the artboard and then ⌘+V to paste a new artboard.
3.5 Double click the first artboard from the Layers List on the left of the window to name it, “Page 1” and then name the second, “Page 2”.
3.6 Select both the artboards by holding shift, and click their names which appear at the top left inside of the Canvas.
3.7 Change the active Background Color to white by clicking on the white square in the Inspector to the right of your screen.
4.0 Add a button to “Page 1” with a call-to-action.
We are going to add buttons that users can tap on to interact with our prototype.
4.1 Press “R” on the keyboard to activate the Rectangle Tool.
4.2 Draw a rectangle 330px wide and 70px tall.
4.3 Click on the color swatch in the Inspector and change the fill to black.
4.4 Click the plus sign next to the Shadows item to add a shadow.
4.5 Change the Y position to 8.
4.6 Change Blur to 14.
4.7 Change Spread to -8.
4.8 Next, press T to activate the text tool.
4.9 Drag a rectangle over your button and add the text “View Page 2”. Change the properties of the rectangle using the Inspector on the right.
4.10 Typeface: Arial Black
4.11 Weight: Regular
4.12 Size: 24
4.13 Color: White
4.14 Press shift and select both the text and the button.
4.15 Use the center align icon in the top right of the inspector to center align the two elements.
4.16 Press ⌘+G to group them, and then double click the Group 1 layer name from the Layer List and change this to “Button 1”.
5.0 Preview and Commit changes
Commit changes to Abstract early and often to track your work. It is helpful to remind yourself to commit each time you change screens that you are working on.
5.1 Save the Sketch file by pressing ⌘+S
5.2 Click on the “Preview & Commit” in the Abstract toolbar at the bottom of the Canvas.
5.3 Write the “Summary of the changes” that describes the work you are committing. Examples: “Add prototype links for onboarding” or “Update user tutorial artboards.”
5.4 Summarize the commit by typing “Add button to Page 1”.
5.5 Click the blue “Commit changes” button in the bottom right of the modal.
5.6 Abstract will save the commit and sync to other collaborators who may be working on the project at the same time.
5.7 Wait for the grey spinner in the top left of the abstract window to change from “Syncing” to “Up-to-date”.
5.8 Click “Edit in sketch” in the top right of your abstract project window to switch back to the Sketch file.
6.0 Add headers to the artboards
We’ll differentiate the pages of our prototype so that we can easily see the path a user should take.
6.1 Press T to activate the text tool.
6.2 Drag a 335px by 100px at X:20, Y:86 on the Page 1 artboard.
6.3 Text “Page 1”
6.4 Typeface: Arial Black
6.5 Weight: Regular
6.6 Size: 72
6.7 Color: Black
6.8 Click the text and copy it to the clipboard by pressing ⌘+C
6.9 Select the Page 2 artboard and press ⌘+V
6.10 Change the text to say “Page 2”
6.11 Deselect the text, Press T to activate the text tool again.
6.12 Drag a 335px by 240px at X:23, Y:286 on the Page 2 artboard.
6.13 Type “+” on the keyboard.
6.14 Under Alignment in the Inspector select the middle align button to center the text vertically within the text box.
6.15 Typeface: Arial Black
6.16 Weight: Regular
6.17 Size: 172
6.18 Color: Black
7.0 Preview and Commit changes
Commit changes to Abstract early and often to track your work. It is helpful to remind yourself to commit each time you change screens that you are working on.
7.1 Save the Sketch file by pressing ⌘+S
7.2 Click on the “Preview and Commit” in the Abstract toolbar at the bottom of the screen.
7.3 Summarize the commit by typing “Add header text”
7.4 Select the blue “Commit changes” button in the bottom right of the modal.
7.5 Abstract will save the commit and sync to other collaborators who may be working on the project at the same time.
7.6 Wait for the grey spinner in the top left to change from “Syncing” to “Up-to-date”.
8.0 Create new branches
Branches allow designers to work on the same file without overwriting each others work. We no longer have to send files via Google Drive.
8.1 Click new branch in the top right of the Abstract project window and name it “Designer 1”.
8.2 Select Edit in Sketch to launch the Sketch file on the new branch. Abstract will close your other Sketch file.
8.3 Notice the Abstract toolbar at the bottom of your Canvas reflects that you are on the new “Designer 1” branch.
8.4 Double click the + text on Page 2 and change it to a “-” sign.
8.5 Select Preview & Commit.
8.6 Name the commit “Add – sign”.
8.7 Commit the changes.
9.0 Conflicting changes
Abstract handles conflicting design changes at an artboard level. We’re going to simulate another designer making conflicting changes.
9.1 Select the Getting Started branch on the left.
9.2 Click new branch in the top right and name it Designer 2.
9.3 Sketch will close your previous Sketch window and open the Designer 2 branch.
9.4 Notice the changes from the Designer 1 branch are not present.
9.5 Notice the Abstract toolbar at the bottom of your Canvas reflects that you are on the new Designer 2 branch.
9.6 Copy the + sign and paste it, then change the y position value to 586.
9.7 Change the copy to be a “-” so now we have both a + and – sign on Page 2.
10.0 Preview and Commit to commit the change
Commit changes to Abstract early and often to track your work. It is helpful to remind yourself to commit each time you change screens that you are working on.
10.1 Name the commit “Add – sign” and commit the changes.
10.2 Now select the Designer 2 branch under Getting started in your abstract window.
10.3 Select Merge Branch in the top right.
10.4 Abstract will sync Designer 2’s changes with the Master file and then alert other team members to sync.
10.5 Now, select the Designer 1 branch.
10.6 The Merge Branch button now displays “Update from parent” because there are new commits that you have not synced.
10.7 Click the “Update from parent button”.
10.8 Because there are changes to the same artboard, Abstract prompts you to resolve conflicts.
10.9 Select “Pick artboard” beneath the preview for the version on the parent branch Getting Started.
10.10 Add this description: “I like the addition”.
10.11 Select the “Commit update” button.
10.12 Select “Edit in Sketch” to continue creating the prototype.
Now that our Designer 1 branch has all of the updates, let’s begin adding hotspots to link our prototype.
11.0 Add hotspots for Interactions
When using Craft, you can select an element such as a button, and then choose what screen it will link to and what transition it will use.
11.1 With the Designer 1 branch selected, click Edit in Sketch from the top right of your Abstract window.
11.2 Sketch will automatically open the file.
11.3 Press X on the keyboard to enable prototyping mode via the Craft Plugin.
11.4 Select the Button1 group on Page 1.
11.5 Press C, and then drag your mouse to the Page 2 artboard.
11.6 Click the artboard.
11.7 Change the gesture to “Tap” and the Transition to “Slide Left”.
11.8 Select the Page2 artboard copy and paste and rename the copy to Page 3.
11.9 Change the header to Page 3.
11.10 Press R to activate the rectangle tool.
11.11 Drag a 335px by 550px at X:23, Y:262 on the Page 3 artboard.
11.12 Select the + sign on Page 2.
11.13 Press C, and then drag your mouse to the Page 3 artboard.
11.14 Click the artboard.
11.15 Change the gesture to “Tap” and the Transition to “Slide Up”.
12.0 Preview and Commit changes
Commit changes to Abstract early and often to track your work. It is helpful to remind yourself to commit each time you change screens that you are working on.
12.1 Save the Sketch file by pressing ⌘+S.
12.2 Click on the “Preview and Commit” in the Abstract toolbar at the bottom of the screen.
12.3 Summarize the commit by typing “Add Page 3 and prototype links”
12.4 Select the blue “Commit changes” button in the bottom right of the modal.
12.5 Abstract will save the commit and sync to other collaborators who may be working on the project at the same time.
12.6 Wait for the grey spinner in the top left to change from “Syncing” to “Up-to-date”.
12.7 Click “Edit in sketch” to switch back to the Sketch file.
13.0 Sync to Invision using the Craft Plugin
Using Craft, we can sync the project with InVision the prototype will automatically be updated and can refresh your browser to see the changes.
13.1 Click on the icon beneath the Craft logo.
13.2 This is the export icon to sync with InVision.
13.3 You will be prompted to sign in to your InVision Account.
13.4 Create a new prototype and name it “Hello Rapid Prototyping”.
13.5 Select the iPhoneX device type from the list of options.
13.6 Select Publish.
13.7 Your prototype will begin syncing to InVision. Once finished hover over the “Hello Rapid Prototyping” project and click “Copy Link”.
13.8 You will receive a notification that the link has been copied to your clipboard.
13.9 Paste that link into a browser to view your project on InVision.
ProTip: When syncing minor changes on a larger project, you can reduce sync time by only selecting a single artboard to sync.
14.0 Test the prototype in your browser using InVision
The web based InVision app allows you to access screens of your project to test as well as adding additional interactions not supported by the Craft plugin.
14.1 Click “View Screen” on the Page1 artboard.
14.2 You will be in Preview mode by default where you can click through the prototype.
14.3 Click the button to see the “Slide left” transition play.
14.4 Click the + sign to see the “Slide Up” transition play.
14.5 You should now be on Page 3 of your prototype.
14.6 We want to add a swipe interaction to our mockup so we will Switch to Build mode by tapping “B” on the keyboard.
14.7 Draw a hotspot over the black rectangle on Page 3.
14.8 Select “Page 2″ as the destination to link to.
14.9 Set the Gesture: to “Swipe Down”, and the Transition to “Slide Down”.
14.10 Click Save to confirm your changes.
Notice that the hotspot is blue. This symbolizes that the hotspot is managed by InVision.
14.10 Press shift+click the hotspot to navigate to Page 2.
Notice that the hotspot on the + sign is orange. This symbolizes that the hotspot is managed by Craft.
15.0 Share your Prototype
Now that our prototype is available and linked, you will want to share with colleagues to get feedback. You can invite by individual emails, but our preferred methodology is to create links to send out to team members.
15.1 Select the share button in the bottom right of your prototype.
15.2 A modal will appear prompting you to share by email or sms.
15.3 We’re going to send out links, so select “Link Settings” in the bottom right of the modal.
15.4 Select “More Options”.
Notice each combination of toggle produces a different link, remember we can make two versions of our prototype link.
16.0 Sharing with team members to get feedback:
16.1 First Enable comments.
16.2 Enable Access to all screens.
16.3 Start the share link at “Page 1”.
16.4 Hotspots Enabled.
16.5 Copy the link and save it for future reference to send to team members.
17.0 Sharing with customers to test:
17.1 Disable comments.
17.2 Disable access to all screens.
17.3 Start the share link at “Page 1”.
17.4 Hotspots Enabled.
17.5 Enable Prevent Hotspots hinting.
17.6 Copy the link and save it for future reference for customer testing.
17.7 Paste the link in your browser to view the end result.
We’ve covered digital product design tools that Voltage Control uses during design sprints. This is the process that works for us in fast-paced prototyping days. Abstract allows for dynamic collaboration. Sketch combined with the Craft plugin makes hotspot linking much simpler. The process concludes with a one button sync to InVision to make the prototype live where we still have flexibility to make changes as needed.
I once had a design colleague tell me, “Don’t talk about it, be about it.” This could not be more true when it comes to app ideas. Using this workflow, you will be able to communicate your concepts using interactive prototypes that you can share by simply sending a link to you colleagues. Best of luck, and happy sprinting!
Please contact elijah@voltagecontrol.co if you have any questions about this tutorial or are seeking help training your design organization in these softwares.
