Validately sat down with Victor Conesa, VP of Product Management at JUSTINMIND, the wireframing and prototyping tool, for an in-depth discussion on how to collaborate with prototypes, best practices prototyping for mobile, and more. Validately is excited to team up with Justinmind. Validately’s tools will be available to Justinmind users in early 2016.


Collaboration is crucial to successful protoyping. What are best practices for collaborating and getting buy-in from stakeholders?

Prototypes serve as a communication tool. A lot of time and energy is invested in the software industry to describe how an app or a website should look. This is generally done through specification documents and diagrams, but very few people read them, and even fewer understand them.

In the end, the only thing each and every software project stakeholder (i.e. executives, Business Analysts, UX designers, developers etc.) understands is the final application or something that looks very much like it.

Use a single tool to enable an efficient and collaborative prototyping process. At each step of the prototyping process, a good prototyping tool should enable collaboration and make sure that everyone in the team and the stakeholders are on the same page. The cost of rework should never be underestimated.

A Shared Prototype should be created at the beginning of the design process, and the whole team should be able to edit and make changes to it simultaneously.

During and after the creation process, it’s key that the prototyping tool makes it quick and easy to publish and share the prototype online or on remote user testing tools. The prototypes should be available to view in any browser or device so that the simulation is always available for any type of reviewers to give feedback.

The project owner should have complete control over the people who can access and review it. Managing reviews and comments, and being able to link comments to any specific feature or requirement is important too. The tool should also organize these elements well so that no details get lost.

When the reviewing phase comes to an end, the web or app prototyping building cycle can re-start, enriched with feedback and comments from all the interested parties. Published projects should also be easy to replace with updated versions.

For all of these reasons, we created Justinmind, so that all project stakeholders could clearly communicate between each other, and define together the application or website they want to build. And that’s also why we focus so much on all the collaboration and teamwork features (such as shared prototypes, online reviewing and commenting, versioning) that make Justinmind a great collaborative prototyping platform.

Collaboration and teamwork features are even more important in our Enterprise version, you can contact us to find out more about it.

What are some tips for mobile prototyping?

Test what you’re doing in a real mobile device. Testing mobile gestures and visualizing your app in the right resolution is key. You can’t just imagine it and leave it up to fate. In Justinmind we dedicated a lot of time and effort to make sure that this step is simple, so that immediately after defining a web or app prototype, it can be tested on an actual device by anyone. Putting the prototype in the hands of real users in a real environment also helps to detect conceptual errors and inconsistencies in the apps or websites.

Validately’s tools will be available within Justinmind in early 2016.  Click here for a demo of Validately.

 

CONTINUE READING FOR MORE PROTOTYPING TIPS FROM VICTOR….

What’s the difference between wireframing, prototyping, and hi-fi simulating?

Although there are many people who mix the terms, usually a wireframe refers to a schematic representation of a page or screen that does not contain any type of design. It serves the purpose of validating the elements that will go into a given screen, their size, the way they’ll be distributed, and so on.Wireframing generally doesn’t imply any sort of interaction.

However, a wireframe can’t convey important design components. Grey boxes and lorem ipsum content can’t communicate how colors and contrasts will influence content, the visual impact of brand design, the visual weight of graphics element and the visual path created by colors, contrasts and components. Additionally, a wireframe can also look dull and little attractive to a client when the real design is meant to be very effective and impacting.

That’s where prototyping comes in. Prototyping is often used to display interaction and it includes design too. According to my view, a prototype should be something that allows to test the experience of a user with the software that is being designed. In the same way as a car prototype is a real car you can sit in and drive, a prototype of an application should be something very similar to a real app, which you can actually use and test the user experience with. A prototype is functional: you click, you go to another page; you fill a form, you get real data and use them. And much more.

Hi-fi simulation is a complement to all this: you have a fully interactive prototype when you can simulate and test it in high-fidelity, i.e. when you can convey a high-tech representation of the design concepts, resulting in partial to complete functionality, ideally on the actual device. You don’t have to explain, or trust your client’s capabilities of imagining an app or website: what he sees is what he gets.

 

When is the right time for wireframing vs. prototyping?

Wireframes may be useful in the early stages of a project as long as no interaction plays an important role in the represented screens. For example, when designing web sites, usually the weight of the design is more on the content than on how the user will interact with it (although this is something that is slowly changing because websites are getting increasingly interactive). So a wireframe can be useful to set a number of screen layouts without having to involve the graphic designer, describing the general content, and the basic layout and interactions.

However, if the screens have a lot of interaction, you should move to a prototyping phase. Imagine Facebook defined only with boxes and arrows, clearly not enough. High-fidelity prototyping lets you show relations and rich interactions with a “file” that works just as if it was the real website or app, reacting and interacting with the user.

A final step is validation and testing, performed through hi-fi simulation with real users and project stakeholders.

 

How does Justmind help with wireframing, prototyping, and hi-fi simulation?

Consider the following scenarios:

  • You’re a designer, and the programmer didn’t understand that tiny little detail that makes a huge difference to the final product.
  • You’re a coder and need to know exactly what to code, and not change it every other day.
  • You’re a UX Designer, and need to test everything, but it takes too long and it’s very expensive to get it all tested.

That’s where Justinmind comes in and makes a difference letting everyone involved in a project see, understand, approve and start working on the real, final version.  Justinmind is a WYSIWYG drag and drop tool that can be used both to draw wireframes and to build fully interactive prototypes.

Justinmind also integrates with the most popular design tools, and includes advanced navigation and simulation with real data, in order to create prototypes so realistic-looking that a user might not be able to differentiate them from a real application or website. Data simulation comes in particularly handy: there is nothing like data visualization to give you and your client a clear understanding of how the project is going to work.

This way, you can test your future app or website before starting to develop it, and with no coding skills. It’s drag and drop, by learning some basic commands and tricks, anyone can create some advanced navigation interactions.

As far as hi-fi simulation is concerned, in Justinmind you can simulate your prototypes in any browser, choosing actual devices’ simulators, where you can simulate mobile gestures too. Most importantly, through our app, it is possible to simulate on the actual devices.

 

How can I test my Just in Mind prototype? With whom should I be testing my prototype?

Justinmind is a very versatile and flexible tool, and you can perform all sorts of tests with it.

The Simulate button lets you work with the prototype directly on your browser and realize moderate testing remotely or in person, in an extremely easy way.

The advanced commenting system, the simulation features and the possibility to upload your prototypes online allow you to share your designs and let other users simulate and give feedback without the owner of the prototype needing to be there in person.

Also, since the simulation basically uses HTML5, it is possible to integrate the prototypes with testing tools, like Validately. And this can simply be done with a click from our online platform.

As far as who should test the prototypes: the more the better. Ideally, prototypes should be tested with potential users but it’s also very useful to test them with developers, and in general with anyone involved in the project, in order to make sure that the plan has been correctly understood by all contributors.