📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Learn with Marvel Product Tips & Tricks

Prototyping basics with Marvel

Posted 3 minutes ago by Jane Adojutelegan
Prototyping basics with Marvel

Prototyping is one of the earliest steps in the process of creating a product. With prototyping, a team can establish what a product should look like, how its end-users should interact with it and then validate these ideas before moving forward with development.

Without needing to commit to development resources, you and your team can test out ideas for websites and apps, and understand your users' needs and behaviours which can then be iterated to properly suit your end users. On top of that, it's great for demonstrating your ideas to stakeholders - including teammates, potential customers and even investors.

In this first of a three part series covering the basics of Marvel, we’ll be taking you through all things prototyping. With Marvel, you'll be able to create a feature-packed prototype which demonstrates exactly how your finished product should look and behave to your stakeholders!

Now, let's dive straight in!

Creating a prototype project

When you’re getting started, the "what", "who", "why" and "how" needs to be clearly defined.

What's the product going to be, who's it for and why would someone need to use it? As we're working with a prototype, we need to think about the steps that the end-user would take when they actually interact with the finished product - also called the user story.

Take an online retail app as an example. You’ll need to think about what the user will see and interact with on the home screen, what items will be available to buy, how will they go on to view and purchase the products? Once you've thought about the steps that a user should take while accessing your product, you can then start to actualise this by designing a prototype.

Within Marvel, you can create a prototype project for anything that will be viewed on a screen; an app, website, marketing assets and much more. There’s multiple device types available with the correct resolution including iPhone, iPad, Apple Watch, Android and Pixel ensuring that your prototype as realistic as possible.

Still stuck for inspiration? Many customers, from different industries, company sizes and needs, have all used Marvel! With our platform, our customers have demonstrated ideas for early stage start-ups (and got investors and new employees onboard), transformed existing products that had unfriendly UX, tested the look and feel of their product on devices currently on the market, worked with our easy-to-use platform to teach design in workshops and hackathons, created snappy presentations along with so much more!

Once you’re ready to create a project on Desktop, here are the steps you can follow:

  1. Go to your Dashboard
  2. Click the Create project
  3. Select Prototype and enter your project name and select a device
  4. Select Create project
  5. Choose to add designs in the Design Tool

Bringing your designs into Marvel

There are several options when bringing in your work to Marvel that suit different workflows when designing.

Some users prefer the feel of pen to paper when jotting down their initial designs and creating quick mockups, while others are more concerned with collaboration in real-time. Some may also be limited by the tools that other teams are already working with, or might need an option that they can use offline.

With Marvel, you’ll have a range of options when it comes to bringing in your designs:

Even without an internet connection, you can upload files from your phone offline and sync with your account once you’re connected. Enabling you to access your work anywhere.

To upload your images, you’ll need to:

  1. Go to your Dashboard
  2. Click the Create project
  3. Select Prototype and enter your project name and select a device
  4. Select Create project
  5. Click Add images, select Upload from computer. Alternatively, you can drag and drop your designs straight into the browser window to upload them to your project.

To add images on the app:

  1. Click Create project
  2. Tap the + button
  3. Select Camera
  4. Aim the camera at your sketch and tap the camera icon
  5. Repeat until you've taken pictures of all your sketches
  6. Tap the green check button
  7. Resize and crop any screens
  8. Tap the green button to save your images

Creating realistic interactions

Now you’ve added your designs to your prototype, you’ll need to give the illusion that the end-user is following the steps that they would in a coded app. In Marvel, 'hotspots' and 'transitions’ initiate the actions that give the illusion of movement throughout a prototype.

Hotspots are clickable areas which initiate an action that you’ve predetermined. With a hotspot, you can choose for an end-user to go to the next screen, or reveal a drop-down box, or even open a new page to an external website!

Transitions meanwhile make the interactions between hotspots look more realistic. For example, mobile users can move through the prototype by swiping through screens, or see a screen with new information fade into visibility.

It’s these movements that give the look and feel of a finished product. The more hotspots, transitions and other features used in a prototype, the more realistic the prototype is. With the use of the features available in our prototype editor, our users have been able to create carousels, sidebars that are scrollable, floating elements that remain static while the rest of the page scrolls, along with other great aspects of a prototype, without needing to code!

Adding hotspots and transitions

  1. Hover over any image that you've uploaded and click Prototype to enter the editor
  2. Once in the editor, click and drag over any area of the design to draw a hotspot
  3. Select the target image for the hotspot
  4. Select additional screen transitions and actions
  5. Click Play to interact with your prototype

Start gathering feedback

Now you’re ready to play and interact with your prototype as if it was a working product.

Quickly share your prototype with team members, clients or developers and review UX experiences, gain feedback, pitch ideas and much more.

Prototypes can be played in a desktop browser or within our apps so they can be used by the device they were designed for. Leading to more accurate and useful feedback on the UX.

Viewers can add and view comments within play mode. Ideal for capturing insights or providing any additional context needed when viewing the project.

When working with developers, all the code, spec and assets from Marvel or Sketch designs, can be viewed by selecting Handoff when in Play. Improving collaboration between teams and leading to faster development.

Playing your prototype

  1. From your project dashboard, hover over your project and click the play icon
  2. From your project click the green Play icon or hover over the screen you'd like to start from and click the play icon

In short, creating a prototype is an unmissable step in your design journey, and creating a prototype which is as close to your proposed end-product as possible, the more likely the team can find logistical pitfalls in the product and make improvements before building anything.

By using all the tools available with Marvel, you and your team can create a prototype that looks and feels like a real app or website and give your end-users more opportunity to interact with the prototype, get the feedback you need to make smart iterations to the prototype to build a better product.

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

Customer Support Manager at Marvel

Related Posts

We’re big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration. The beauty of starting on paper are the limitations forced on you by the medium. This often helps focus on what matters, not just for you, but for… Read More →

Did you know that once you’ve created a prototype in Marvel, you can embed it on any HTML web page or blog including WordPress, Medium, Wix, Squarespace and even Behance? Since we launched prototype embeds, we’ve seen them pop up everywhere, in almost every use-case from product marketing and sales to education. From Papa Johns to Duo and PWC, thousands… Read More →

“Shall we Zoom?” If you’re one of the millions of new Zoom and Google Meet or Hangouts users then this a question you’ll likely be hearing every day. Now that everyone from governments to schools are using Zoom or Google to move projects forward, we’ve put together this handy guide to using our new User Testing feature in combination with… Read More →