Pros: 

+ It’s “clickable”, allowing testers to get a sense of interactivity

+ Text-to-speech allows for testers/stakeholders to give feedback before lengthy process of recording voice overs

+ Can be published to Articulate Review to allow testers to leave comments

 

Cons:

- There is some learning curve depending on the level of interactivity wanted from stakeholders

- Not ideal for text-heavy courses

- It doesn’t allow for real time collaboration

Prototyping Tool 2:  Adobe XD

Link: https://www.adobe.com/ca/products/xd.html

Pros:

+ Able to add interactivity and triggers into the prototype to give a realistic sense of the experience

+ Able to work collaboratively on the prototype

 

Cons:

- As you cannot build an eLearning in Adobe XD it can be a lengthy process for just a prototype

- It is not designed for building eLearnings or full learning experiences so there are limitations in what you can prototype

 

Prototyping tool 2: Figma (Haven't used this one yet but it seems to be really popular)
pros:
 + Realtime collaboration - Just hit refresh and see everyone’s changes
 + It’s an all in one tool (design, prototype, hand off)
 
 cons:
- Cloud based – need internet connection
- You need decent RAM and a good graphics card – if sharing files with someone who is not a designer they may not have the right specs to properly view them. (lagging/loading issues)

Pros:
+ User friendly and does not have much of a learning curve
+ Many people are familiar with PowerPoint 
+ Fairly easy to share files
+ Does not require internet and works on any platform/operating system
+ Allows for the development of low, medium and high fidelity prototypes
+ Various customizable design elements

Cons:
- Less collaborative in nature and difficult to consolidate feedback from various sources
- Must be purchased (desktop application)
- Its main purpose is not specifically for prototyping
- Lacks sophisticated branching logic and can be difficult to simulate complex interactions 

Pros:
+ Supports enhanced design teamwork and collaboration with the ability to collaborate in real-time and supports in-app commenting

+ Fairly user friendly and easy to share files
+ Works on any platform/operating system (browser-based)
+ Free starter account
+ One of its main purposes is prototyping

+ Facilitates the development of low, medium and high fidelity prototypes
+ Various graphical elements and customizable design features (i.e., colours, fonts, shapes, icons, images, etc.)
+ Option to include various third-party plugins

Cons:
- A bit of a learning curve and stakeholders/clients might not be familiar with Figma
- Not as many training resources available as other tools
- More oriented towards high-fidelity prototypes as it does not offer pre-made components for low-fidelity prototypes
- Unable to use without internet/offline and requires a Graphic Card and RAM 

Pros: 

+ Free trial available
+ Subscriptions start at $69/month
+ Great for medium-high fidelity protoypes
+ Easy to use
+ Variety of templates to choose from
+ Interactive features for testers, including flip cards, activities, hot spots, linked scenes
+ Can embed videos
+ Can share with testers through a direct link (no registration required) 
+ Includes a library of stock images to choose within the tool
+ Do not need to download additional software
+ Can be used to create final product

 

Cons:

- Collaborative editing is only available with most expensive subscription
- Testers are not able to add comments directly within the tool
- Cloud based (require internet connection)
- Need to choose from slide layouts available (not customizable)

Prototyping Tool #2:  proto.io

https://proto.io/

Pros:

+ 15 day free trial
+ Subscriptions start at $24/month
+ Mix-and-match ready-made, customizable templates to create your prototype and wireframes 
+ Easy to share prototype with testers
+ Can integrate with Sketch, Figma, Adobe XD
+ Can export as PDF or PNG or publish through a link
+ Library of graphics, icons, sound effects, animated icons

 

Cons:

- Some prototyping workflows are complicated
- May take up too much time to develop a prototype as there is a steep learning curve
- Used to create high-fidelity prototypes
- Unable to collaborate with others in real-time

 

 

- Web-based (easily accessible due to browser application)

- Free starter membership

-  Everything is stored in the Cloud (automatic saving and synching)

-  Good for co-editing (google docs level collaboration, team libraries)

-  Smart animations for prototyping (sliding tabs, pull to refresh, hamburger menu)

-  Plug ins like Autoflow and Figmotion make it possible to illustrate user flow and create animations

-  Runs on Mac OS, Windows, Chrome OS and Linux

-  Files are saved as URLS  easy sharing (others can be invited to view, edit or collaborate) 

 

-  Free trial has a limit of 3 projects 

-  Need an internet connection (offline option is limited)

 

 

- Works well with other Adobe apps including Illustrator and Photoshop 

-  Good for prototyping (lots of interactions, like speech play 

-  Free membership

-  Can bookmark different versions (beneficial for co-editing when designers are working on different versions

-  Ability for users to define 2 interactions per element (e.g. click and hover)

-  Desktop and mobile app 

-  Supports website wireframing

-  Makes voice audio recording possible 

 

-  Limited features for free membership

-  Only runs on Windows and Mac OS 

-  Not as intuitive when selecting multiple elements 

-  Designers have to create either an offline or an online file (can’t simply open the online file and create an offline copy with one simple click)

-  No real-time collaboration 

 

 

 

·        Free Forever – and only free, no upgrade needed, what you see is what you get   

o   Intuitive format makes Vectr easy to pick up and use without any experience 

o   Draw custom shapes with the pen tool or free form pencil tool; or you can also select pre-loaded shapes or upload external content 

o   Several tutorials available – caution, there are 2 versions of Vectr and both are fully functional, but if you feel you need the tutorials, go for the old version of Vectr, as the new version shows the tutorials are in production 

·        Plays well with others 

o   Content can be exported to png, jpg, and svg and because this is a vector design tool, the images will be clean, crisp, clear, and scalable if you want to use any of your custom creations in your final design

o   You use Vectr from your browser, so it will work for both Mac and Windows  

·        Share content in real time 

o   Vectr has a really neat feature that allows you to send a link to someone, so they can watch you work in real time; ideal for ideation and/or editing with colleagues or even a great way to include stakeholders in the design process, if they are so inclined 

·        Prototyping is not the intended purpose of the tool 

o   There are no templated designs; so you have to pull your inspiration from outside sources 

o   Since this is vector creation software, there is no option to create clickable or animated content to demonstrate or re-create the final user experience 

·        There is no such thing as free

o   The tool is ad heavy with a portion of your work screen dedicated to ads that are regularly refreshing  

Recommended Use: Low-Fidelity Design Creation 

·        The fact that there are no templated designs could be a ‘con’ for someone new to design, seeking structured support, but an experienced designer wanting to explore their creativity, could consider the absence of structure a ‘pro’

·        In either case, Vectr is essentially a digital equivalent to a pen and paper prototype and will only yield Low-Fidelity prototypes as the tool options are very basic and as noted, there is no option to add in or create any clickable or animated content, similar to a pen and paper designed prototype, but with the added benefit of being able to pull in some of the colors, images, and themes from your style guide 

·        Also, the unique ‘watch in real-time’ feature, which allows you to share your Vectr work board via a link with anyone, so they can observe your process in real-time, could make this tool a really fun way to ideate on a Low-Fidelity prototype during preliminary brainstorming sessions and while you cannot add clickable or animated content, some of the pre-loaded vectors include action buttons for video, audio, etc; which could be used as placeholders while you ideate in a group early on in your design journey 

 

·        Free Forever – the free version includes: 

o   Unlimited projects and viewers 

o   Design templates and tools for web and mobile designs 

o   Interactive input forms

o   Unlimited wireframes, pages, and users with no limits, codes, or cost, for web and mobile app wire framing 

o   Content can be exported to png,jpg, and svg

o   The 15 day trial includes the advanced features, so you can determine what suits your needs best

o   Tutorials – not just for the software either, JUSTINMIND offers great design content in general, including this gem The Ultimate Guide to Prototyping

·        Plays well with others 

o   Even with the Free version - JUSTINMIND can be integrated into Sketch, Adobe XD, and Figma and you can easily cut and past content between the platforms 

o   Available for MacOS and Windows  

·        The pricing is reasonable with 4 options: 

o   Free with the features above 

o   Standard for $9/month if you pay for 1 year and with advanced features for individuals and teams

o   Professional for $19/month if you pay for 1 year with more advanced features including the ability to export documents and HTML along with JIRA and AzureDevops integration 

o   Enterprise allows for use on internal servers with LDAP and SAML integration and the development of multiple administration accounts 

·        Free version has feature limitations – to publish, export, or add enhanced design features you must subscribe. For example:

o   Limited Design Elements – the free version does not allow the creation of clickable content, transitions, animations, etc  

o   Publish/Export – the free version only allows the export of png, which was does not allow you to publish your wireframe in an HTML to share with users or stakeholders

o   These limitations may impact your ability to share/test the actual ‘user experience’ of your content, which could create inefficiency in your design process later on, especially if your prototype design concepts do not actually work once you transfer your concept into you ed tech tool   

Recommended Use: Mid-Fidelity Design Creation 

·        The free version of JUSTINMIND allows you to create high quality shareable png,jpg, or svg wireframe/storyboard pictures of your design concept

·        However, what limits the free version of this tool to the Mid-Fidelity category are the design limitations on creating clickable content and adding transitions/animations which could limit your ability to accurately share/test the end user experience as well as the actually functionality of your design concepts if you are designing any type of e-based solution that is meant to be interactive. 

·        If you are short on timelines and working on an interactive e-based solution, you may wish to upgrade to the Standard or Professional subscriptions to unlock the advance features to really test your concept. If you are working on an info graphic or the early iterations of proof of concept, then the Free version may serve you well and be useful tool, for your iterative tool box.  

 

+Browser-based so you can access from anywhere- not limited to your own device.

+ Collaboration is easy and seamless, especially when you are sharing projects with different stakeholders who can access the project to view and comment in real time through a single link.  

+ The learning curve for those new to design and prototyping software is low as it is not complicated to get started and there are lessons and exercises available to learn as the user is doing

+Free for students and educators; free version is available for up to 3 projects;; Cost for full version is lower than competitors

+Figma uses vector networks (connect multiple lines to a single point) which is unique compared to other apps

+ From my experience in the web design side,Figma does make it pretty easy to design for a responsive web, and the auto layout feature is great

- Not available offline (beta desktop available)

- It is limited on the devices it can properly run on ( 4GB of RAM and an Intel HD 3000 (or similar) Graphic Card), so if you do not have the tech specs to run the app, then you are out of luck. 

+Available to work with local files offline; can sync to CC and connect to user’s library

+If you have experience using other Adobe CC apps, the learning curve for Adobe XD is minimal.

+Integration with other Adobe CC apps, like Photoshop and Illustrator

+Auto-animate feature

- If you are not an Adobe CC aficionado, then there will be more of a learning curve.

- While you can collaborate with others in real time, the downside is that when one user saves their file, the other user will have to sync. Some changes between the two versions may be lost.

No free option available (Trial Only)

Figma and Adobe XD share a number of similar great features. For those who have not used a prototyping tool before, both apps provide great self help training tools to help in getting started. I would say that those with more experience using Adobe products would enjoy XD because it has the same look and feel of all Adobe products, but Figma is a great option for those who are looking not just to collaborate with other team members but share the work with various stakeholders. 

 

Invision Freehand is part of the Invision suite of applications. A comprehensive prototyping software supporting the process of designing. There are various templates for Brainstorming, Whiteboards, Creating flow charts and diagrams, Prototyping, workflows and developing roadmaps.

It is fast and easy to create a live prototype. One can add transitions test buttons and analyze the layout on a mock-up interface. 

Main features of Invision:

·        Code-free design prototyping tools: pre-build templates, freehand drawing and animation 

·        Design sharing and presentation: real-time meetings and whiteboarding

·        Design organization and collaboration: mind mapping, marker colours to indicate who is designing

·        Design feedback and comment on specific content

·        User testing and research

·        Integration testing: export whiteboards to other software

Pros

·        Simple and accessible- easy for people of all technical levels

·        Great Learning tools- Number of tutorials and resources to learn

·        Scalable-can be used by individuals and enterprises

·        Free plan

·        Great for collaboration and feedback- easy review comments, pdf sharing

·        Multiple Options of Integration- can be integrated with Slack, Sketch, Microsoft Teams and Adobe

·        Keeps version history of the product design

·        Prototypes can be fully animated and can be used for demos and testing

 

Cons

·        Integrations can be unreliable- sometimes integration with other software is problematic

·        Not fully collaborative- Comments can be provided but does not allow real-time editing

 
The design tool isn't incorporated- No browser-based access. Only available on Mac and Windows.

 Pricing:

Free version

$7.95 per user per month (billed annually) 
 $9.95 per user per month (billed monthly)

Enterprise:

Cost tailored to business with discounts available: charged per user
 (between $25-$35 per user per month)

 

A familiar tool, widely used, easily accessible. When it comes to Prototyping, here are the pros and cons of PowerPoint

 Pros: 

·        Easily available -Mac and Windows 

·        Easy to learn

·        I think for Face to face learning and blended solutions it is the perfect prototyping tool. Stakeholders are familiar with PowerPoint

·        Can do storyboarding easily-Smart Art and imbibed shapes and designs help

Cons:

·        For e-learning, one cannot add the branching scenarios

·        Can’t have complex interactions, review mechanisms

Prototyping Tool #1: Canva Free version

PROS:

- We can start from scratches or use pre-existing templates

- Free version is having a huge library of images and other elements to create high quality presentations and posters

- It gives option to upload own images, videos, and audios

- Created designs can be downloaded in any file format

- As I am using Sway for the content deliverable, I use mp4 files as they render in the content greatly

- Canva is a user-friendly tool and tutorials with various tutorials all available in one place

- Canva allows sharing your images directly to some social networks

 

CONS:

- Images of the same theme are limited so you must plan well your presentations 

- Fonts used in Canva cannot be found in Power Point

- Animation in free version are limited 

- Canva has photo editor features, however its options are limited comparing to tools such as Photoshop can.

- User experience on a desktop computer is better that using the mobile app

Prototyping Tool #2: Power Point

PROS:

- Tool that most users have experience with

- Free for O365 users

- Great source of images, icons, shapes

- Shapes and pretty much everything can be edited, resized, reshaped, and customized

- Allows creating pretty much everything (animations, interactive activities)

- Can be previewed at anytime

- Many YouTube free tutorials demonstrating creation of complex presentations

CONS:

- Creating complex designs is time consuming especially for users not having much experience

- Not intuitive

- In Sway PPT files can only be added as links. This requires storing PPT files in Cloud and adding sharing permissions to the audience
- In some LMS', PPT files render as PDFs and as such any dynamic presentations or audios are not playing as intended

 

 

 

 

 

 

- Easy to integrate layered and flat graphics (ie. jpeg vs svg) 

- Can export read-only formats that still allow for stakeholders to understand user interactivity

- Generally ubiquitous and no monthly fee 

- Can be used to prototype a variety of LX 

Cons:
- Some animations can appear very cheesy at first. There is a learning curve to understanding how to use the animations effectively - or at least there was for me - but once you do, they can be impressive. 
- If you’re not working from a template, the design time can be long starting from scratch

What is it? A collaborative video storyboarding app that could be used for prototyping video learning content. 

Pros:
- Online sharing, commenting and role-based access (in paid versions) 

- 3-100 users depending on subscription ($29/month - $100/month) 

- 800,000+ stock images and icons 

- Can export in variety of forms including 
like 1) .doc script (ie. a table with: frame, action, text, sound) 2) storyboard PDF (visually quite attractive), 3) video “Animatic” that flashes through each board

- Overall a surprising short learning curve 

- Only suitable for video prototyping

- “Free version” exists but does not allow you to export the full version in certain formats. However you can “present” in the program itself)