Prototyping tool

Marvel

Marvel is a web and mobile tool that allows you to quickly put together a prototype in the form of screens to which you can add basic interactivity and transitions. 


Good for:

  • Creating a prototype that feels almost real to users in a short amount of time.
  • Simple flows (click and swipe interactions and few screens) 
  • If you need to share the prototype with clients, users or anyone else thanks to Marvel's awesome sharing features.

Bad for:

  • Long/complex flow. It can become rather long to put together something that has a lot of moving parts.
  • Design that requires specific transition. A quick turn around is to use GIFs.

Level of Fidelity

MEDIUM to HIGH.

Marvel allows you to link any type of screen, so it can accomodate medium fidelity wireframes to high polished designs. 

Stage of development

Toolkit.png

How to use

First off decide what you want to test of your application. Marvel is easy and fast when you have few screen to navigate and link together. 

Create a new project in Marvel, select what device/resolution you want to test and import the screen you designed (Pro tip: if you use Sketch there is a plug in that allows you to send the screen you want directly to the project you created in Marvel).

After that Marvel’s interface is quite intuitive and easy to use. Create a ‘hotspot’  and set the destination by selecting the screen you want to load when the user clicks on it. You can create asynchronous flows but it can become hard to manage the process since Marvel uses a linear timeline panel to create the flow.

It is worth mentioning how Marvel handles sharing. Aside from sending links to whoever you want via email or SMS, Marvel allows you to 'dowload' your application directly on the home screen of your device making it looks like a real app sitting on your phone.

Timeframe

Learn

Marvel has a very simple interface which has been made easy to use. As a first time user you will rapidly be able to mock up something in a matter of minutes.

Use

As said before Marvel is as complex as you want it to be, so really the time of use is relative to what you are trying to achieve. Keep it simple for the best results in the least amount of time.

A simple linear timeline allows you define clickable spots which are then linked to the screen you need.

A simple linear timeline allows you define clickable spots which are then linked to the screen you need.

Marvel provides you with an great amount of screen resolutions to test your prototype.

Marvel provides you with an great amount of screen resolutions to test your prototype.

 

Examples

Advisors

Marvel has become a personal favourite here at Adaptive Lab. We use it in our many testing and it's so versatile that its been a go to tool for our UX Design and Service Design team.