October 8, 2018 Using Marvel at Topcoder: A How-to Guide for Designers

Right now, there are plenty of prototyping tools on the market like Invision, Framer, etc. At Topcoder we’re working with and use Marvel to present your designs to Topcoder clients and export the specifications for developers (Marvel Handoff). The advantages of Marvel are:

• It adds a cool frame for preview purposes
• Supports different types of transitions and gestures
• Can sync with Dropbox
• Can export from Sketch directly to Marvel
• Multiple options to share and download a prototype
• Has the ability to create multiple teams
• Has different types of project frames: desktop, mobile, tablet, etc.
• Allows for a more “real-world” of your designs for the client
• Direct and efficient commenting and feedback

If it’s the first time you want to use Marvel you have to go to https://marvelapp.com/ and make an account. Almost all design challenges ask designers to add their work into Marvel so it’s important to do it right. Even more, 90% of clients are reviewing the designs from Marvel. The flow is this: the copilot gives a Marvel prototype (or more) to the designer, to which they will then add their screens, add hotspots and then share the prototype link in a note file, which will be included in the archive, that will then be submitted.   There are a couple of things to keep in mind when you want to use Marvel in design challenges:

1. Always ask the copilot for a Marvel prototype. This can be done either by email, forum, etc. – each copilot has their own preferences, which will be outlined in the challenge spec. You shouldn’t create your own Marvel prototype as all the challenge’s prototypes should be under the same project that the copilot is creating within Marvel.
2. When you ask for a Marvel prototype in the forum or by email, make sure to add your email address too. This helps the copilot to send your unique prototype link faster. When you email a copilot include your handle as well.
3. Add hotspots to help the customer understand how your pages connect, your intended user flows, and suggested functionality.
4. Add comments to better explain an idea, a concept, or how something should work.
5. When you submit, don’t forget to include your Marvel link in the notes.
6. Even if you add your designs in Marvel, you still MUST include them in the submission folder or else you will fail the screening process.

Below is a video tutorial to help when using Marvel: