When creating prototypes that should support the validation of screen-flows, visuals or the data content, it is less important to have fully functional prototypes rather than having prototypes that can be changed quickly and easily to reflect user feedback and conduct a number of iterations in a short amount of time. It can also be important to self-enable a group of the project team to create an additional iteration while being in discussion with end customers without them requiring web- or app-programming skills. But before stepping into the details of HOW to build a prototype and WHICH tools to use it universally important to consider the prototyping rules outlined on the linked knowledge base article and to make sure you properly understand the context of you prototype's target group. This includes the objectives on what they would want to achieve using your application or page and it also includes a sound understanding of the testing context (guided / un-guided, attended / un-attended, devices used, time available, etc.).
There are many tools available to support communications prototyping including some like Sketch, Balsamiq or Marvel that we have been using with our teams in the past. While the overall workflow to create a communications prototype with these tools is quite similar across the tools, they all have differences in capabilities and detailed features. The Table across provides an overview of features and capabilities we consider important when selecting the right platform for a prototype build.
The figure below outlines the simplified workflow for two of the named tools. The process consist of four general blocks:
Description of the Workflow Steps:
- Screen Design
- During the screen design you define the layout, structure and content (incl. graphics) of the screens you require to visualize the workflow inside the prototype. You also would specify certain screen parameters or target devices as screen design and later-on appearance is heavily dependent on the screen parameters (like resolution, aspect-ratio, orientation, target platform, etc.). Some tools may allow to use build-in wireframe libraries or embed available libraries online.
- INPUT: Screen design sketches, scribbles, design guides, logo graphics and general graphical elements, corporate CI guidelines, target devices.
- OUTPUT: Exportable screen designs that can be used as screen mock-up for the prototype.
- TOOLS: Sketch, Balsamiq, Marvel, Powerpoint or Photoshop. In general any tool that can be used to create/manipulate computer graphics and export the result to .jpg or .png.
- Click Area Definition
- During this step, pure graphics / screen designs created during the previous step will be extended with a) a definition of graphic areas that should be able to respond to clicks and b) a reference between these clickable areas and other screens of the prototype. This is generating a defined screen flow that is representing one or many user journeys that can be visualized with the prototype.
- INPUT: Screen design graphics, logical user journeys and associated screen representations per step in the journey. Description of clickable areas in the screen designs.
- OUTPUT: Screen designs and associated user journey defined into user paths that represent the links between clickable areas and screens.
- TOOLS: Sketch, Balsamiq, Marvel and comparable.
- Play & Test of the Prototype
- Test and replay of the prototype is important to ensure that the defined user journey works as intended and the references between the screens function correctly. This step now also enables us to play the prototype to the user and get an impression about how the prototype works outside the design / development context. Depending on the intended target group of the prototype and the contextual environment the prototype needs to work in to generate the intended results, the prototyping apps play a more important role. Capabilities demonstrating the prototype and collecting feedback differ substantially. While some limit the play & testing capabilities to browser-based versions only, some other apps come with "prototype players" that allow for prototype testing on end-user devices.
- INPUT: Screen designs and technically (click-areas and screen references) defined user journeys.
- OUTPUT: Play-able prototype and test protocol.
- TOOLS: Sketch and Sketch Player for iOS, Marvel and Marvel App for iOS/Android, modern web-browser.
- Collection of User Feedback
- Collecting user feedback finally is the step the whole prototyping intends to. Feedback can be collected offline and online depending on the tools capabilities and the requirements of the situation.
- INPUT: Working prototype.
- OUTPUT: Collected user feedback on functional-, logical-, esthetical-level.
- TOOLS: Marvel App, Word, Pages, OneNote, hand written notes.
Instructions for Coaches
- It's not very likely that UI or communications prototyping will happen during actual workshops at the level of a realization in tools like Sketch or Marvel. More often we see that pen & paper will be used in these sessions to create drafts that later can be turned into a communications prototype using support of a tool. It will not be important to push teams to use a tool (other than pen & paper) if they are not already familiar with the usage.
- As with any prototyping, be very clear with the team to identify why they are working on a specific UI or communications prototype and essentially what they want to achieve with it. The complexity and associated effort for prototyping can easily grow into substantial amounts of time and as this is one of the most important resources in the team the expected value generated by using the prototype needs to be aligned.
- Intensively challenge the team on the connected assumptions and hypotheses that the prototype should help to generate knowledge for. Getting closer to presentation meetings or the final decide workshop, teams tend to "brush up" their communications prototypes to hide a lack of information or unfinished validations behind seemingly ready-made product functions. Be aware that the worst thing a prototype can be used for during a business design sprint is to hide gaps that the team needs to address to get to better, more precise results.
- Don't let tool discussions over-rule content discussions. All a team needs to get the tough communications prototyping decisions done is pen & paper. The tools introduced here will help to make it all more lively and tangible but they will rather enhance the discussions with clients and stakeholder, not make or break them.
- Have the team record basic visual guidelines (if not available as a separate document) and specific key points about the visual appearance. But keep point 4. in mind - content and structure are higher priority than visuals.
- Instruct the teams to be very clear on the UI elements to be used for a certain functions. In modern software there is a very limited number of key UI elements (sliders, toggle-buttons, input fields, dropdown menus, etc.) that users have become familiar with. With very limited exceptions, prototypes should be constructed from the most commonly known set in the social context of the prototype. Again, point the team to the fact that in most cases it's about efficient delivery of information or availability of functions and NOT about fancy new UI models.
- What is the more easy to start with tool for communications prototyping? Marvel is an easy start with no software installation required and a free account to get started with your first two prototypes. The drawback is, that functions are limited and it complexity quickly grows if prototypes get more sophisticated. Sketch is the "Photoshop" type of tool which suits the expert and supports even most complex prototypes. If you or someone in the team is familiar with Adobe products he/she will find it easy to work with Sketch.
- What kind of prototypes can I create with the tools? Both tools are limited to "non-functional" prototypes and have pre-configured canvases for the most common web and mobile formats (web-pages, mobile phones and tablets for iOS and Android as well as some wearables like the Apple Watch or Pebble).
- Can we share links to the created prototypes and invite people for feedback with both tools? No, only Marvel can be used to do this as prototypes are hosted in the Marvel cloud. Sketch prototypes can be shared and viewed as long as everyone is in the same local network. There is a seamless integration between Sketch and Marvel (Marvel PlugIN for Sketch) which creates an easy workflow bringing more complex Sketch prototypes into the Marvel cloud for feedback and sharing.
Feature Comparison Sketch / Marvel (prioritized)
|Designer||Mac OS & Windows desktop application||Web-based Marvel Studio|
|Sync & Sharing||Sketch Cloud account included in yearly license. Allows for central storage and team sharing.||Marvel native cloud for sync and sharing between team members.|
|Community||Huge community supporting and building wireframes or libraries.||Limited community rather on the Dev-Side for building integrations.|
|API||No open API available.||Open API allows to create own integrations.|
|Plug-Ins / Integrations||Very limited integrations and Plug-Ins with focus on enhancing local app features.||Integrations available for a number of modern tools such as Slack, Jira, Confluence, Dropbox and LookBack.|
|Step 1: Screen Design|
Pre-build Wireframes and Designs
|Not available in Sketch but plenty of free libraries are available to be integrated.||Simple pre-build wireframes are available. Simple screen designs can be created using either the Marvel mobile or cloud app.|
|Integration of Libraries|
Huge amount of 3rd party libraries having everything from pre-build screens to screen components are available.
Unsplash stock photo library integrated.
Own libraries can be created and shared with the team. No external libraries available.
Unsplash stock photo library integrated.
|Scribble based screen-design||Cannot be directly integrated and using photos as screens does not allow linkage of control elements to mock up a navigation.||Photos of paper sketches can be uploaded as screen designs. The Marvel mobile app can be used to directly feed pictures of sketches into the prototype.|
|Step 2: Definition of click-areas|
|Page / screen flow design||Easy building even complex screen flows with good visibility of linked screens.|
Simple to create but not so easy to keep track of more complex screen flows due to a lack of visibility.
Can be done integrating with "UserFlows" 3rd Party integration.
|Screen transitions||Transitions between screens can be created for a smooth transition between screens.||Transitions can be created in the web-editor but not in the mobile version.|
|Actions / Tap-Styles||Different tap styles (tap, click, swipe, etc.) can be configured.||Different tap styles (tap, click, swipe, etc.) can be created in the web-editor.|
|Step 3: (Re-) Play & Test|
|Browser based testing||Yes. Fully supports browser-based testing. Access for testers requires Sketch cloud.||Yes. Fully supports browser-based testing. Access to prototypes can directly be shared with testers via "invite" links.|
|Mobile device testing||Yes. Using the Sketch-Mirror app for iOS. (USB / local Wi-Fi connection required)||Yes. Using the Marvel app for iOS and Android. Works in online and offline mode.|
|Step 4: Collect Feedback|
|Online feedback collection||No||Yes. Testers can comment & discuss screens while testing the prototype in the browser.|
|Re-integration of user feedback||No||User comments are available at design-time to incorporate and comment changes.|