Top

Product Review: Mobile Prototyping and Testing with Justinmind

October 8, 2012

Almost three years ago, I wrote a review of Justinmind Prototyper as a user-interface design platform. While that review focused on Web application prototyping, in this review, I’ll describe Justinmind Prototyper’s support for mobile application prototyping and assess how well Prototyper integrates with usability testing applications.

As UX professionals, we often use prototyping tools to create low-fidelity and high-fidelity wireframes at different stages of an application design process. Stakeholders need to be able to participate in the creation of those prototypes and review and provide feedback on them. More important, we need to test applications with the help of prototyping tools. However, most prototyping tools lack effective responsiveness where mobile application design, gestural interactions, and usability testing come into play.

Champion Advertisement
Continue Reading…

Justinmind’s Target Users

Justinmind Prototyper is one of the few prototyping tools that addresses the creation of highly interactive prototypes by UX designers who are not coders. Although Prototyper produces HTML code, it does not require any programming skills. UX designers can create prototypes and simulations of their designs without having to invest in a Web developer to create their code. And they can share these prototypes and simulations with stakeholders.

Why Justinmind Prototyper?

Justinmind Prototyper lets you create prototypes of applications for mobile devices, test them, and publish them online, so you can share them with clients. I’ve found that the latest version of this prototyping platform offers greater value with respect to mobile design and testing, as follows:

  • annotation—With Prototyper, you and your team members can easily add notes and comments to prototypes throughout an iterative design process. Stakeholders can capture their observations directly on a prototype’s screens and components. You can also download their comments so you can iteratively improve your design concept. Comments are automatically linked to wireframe components.
  • shared libraries—Prototyper lets you create your own widget libraries and share them with other users. You can update a widget library at any time. Since other users have access to these libraries, they can stay involved and contribute to an iterative design process.
  • requirements gathering—You can gather requirements in a specifications document that is built into the prototyping platform. This capability is extremely useful because you can integrate requirements, feedback, and comments in a single document, so you don’t need to produce multiple documents for signoff.
  • HTML export and online publishing—With Prototyper, you can simulate your application designs’ interactivity, so clients can view them running online. This facilitates your doing workshops, brainstorming sessions, and design reviews in real time. If you create an application prototype at the start of a project, you can involve users from the beginning, get their opinions, and validate your design. The more key stakeholders who get involved early, the more successful your overall project will be. By iterating your design prototype and resolving design issues prior to implementation, you can reduce the number of final adjustments your development team must make to the application’s actual code. With Prototyper, all authorized key users can access the prototypes on the Internet. They can collaborate, test, and comment on the prototypes using their Web browser. This capability also lets you integrate your online prototypes with usability testing tools and do mobile and remote usability testing.

Mobile Design and Usability Testing

In this section, I’ll describe the capabilities that make Justinmind Prototyper particularly useful for the design and testing of mobile applications.

Concept Creation and Gesture Simulation

In addition to providing a library of mobile widgets for prototyping user-interface concepts, the latest version of Justinmind Prototyper lets you simulate gestures—including swiping—with ease, as shown in Figure 1. Prototyper provides several techniques for adding animations during the concept-creation phase. By enabling you to prototype gestures at any stage in your design lifecycle, Prototyper helps you to be creative and effective at the same time. Prototyper can simulate gestures either on your computer or by rendering your prototype on a device, making it ready for testing.

Figure 1—Mobile gestures that Justinmind Prototyper supports

Mobile gestures that Justinmind Prototyper supports

Mobile Usability Testing

One of the greatest features of Justinmind Prototyper is its ability to build prototypes for testing on mobile devices such as iPhone, iPad, or Android devices. First, you publish prototypes to the cloud, making them available to mobile devices. Then, with a single click of a button, you can integrate third-party usability testing tools to start testing your prototypes across devices, as shown in Figure 2.

Figure 2—Testing mobile application design concepts
Testing mobile application design concepts

Using this prototyping platform, you can prototype swipe, tap-and-hold, pinch, and rotate gestures in wireframes and prototypes—and even simulate changing the orientation of a device to landscape or portrait.

Remote Usability Testing

You can integrate tools like Keynote, UserZoom, Clicktale, Loop11, Userfly, Clixpy, Google Analytics, and Crazy Egg with Justinmind Prototyper.?Running usability tests using remote-testing tools lets you test your application prototypes in real-world settings that map to your users’ environments.

Creating Guidelines and Designing Patterns for Reuse

In addition to creating design concepts and testing them with a product’s target users, you can use Justinmind Prototyper to create branded guidelines and patterns for an organization. You can easily incorporate any corporate images into your prototypes, then either export them to HTML and publish them online or automatically generate an Open Office or Microsoft Word file containing all of your documentation. This makes it easy to maintain consistent documentation across projects and ensure key internal and external stakeholders are always on the same page.

This prototyping platform’s widget library includes patterns for the iOS and Android platforms. The library includes some sketchy widgets for concept creation, as well as higher fidelity widgets that you can use when creating prototypes for summative testing, as shown in Figure 3. Using Justinmind, it is easy to create prototypes employing design patterns that have been tested in the past. Just create your prototypes, test your designs, then reuse your tested patterns in your future projects. While your level of investment is higher in creating and testing patterns, there will be a reduced risk of usability issues’ cropping up when you reuse tested patterns.

Figure 3—Widgets for high-fidelity and low-fidelity designs
Widgets for high-fidelity and low-fidelity designs

Unique Value Proposition

Justinmind Prototyper’s unique value proposition is its ability to create highly interactive, low-fidelity and high-fidelity prototypes for mobile applications—as well as Web applications—simulate widgets’ behavior without coding, and save design patterns in a library for reuse. You can even simulate mobile gestures in your interactive prototypes. This ability to prototype gestures is especially important when you need to demonstrate mobile design concepts during a workshop or client meeting.

This prototyping platform can also simulate transactional data, allowing test participants to input data into form elements. For example, you could simulate an ecommerce checkout process for purchasing a product by creating a clickable prototype, then measure its efficiency during a usability testing session.

Justinmind Prototyper is more than just a tool for creating wireframes. This prototyping platform also helps you to integrate other processes such as requirements definition and usability testing, so you can validate your designs with users. Once you create an interactive mobile prototype, you can share it online and obtain feedback from stakeholders and users through a simulated or remote testing environment. The platform automatically generates your application’s code without your needing to have any programming knowledge and can also generate specifications documents.

Limitations

While Justinmind Prototyper provides considerable flexibility, first-timers will experience a learning curve in mastering the product’s user interface and prototyping environment. Experienced users may not find Prototyper the perfect end-to-end solution for creating concepts and testing applications, because of the following limitations:

  • installation required—To use Prototyper, you must install the application and updates on your computer, which takes time and a lot of hard-disk space. This also complicates your working in the application on different computers, at different locations.
  • uses jargon—It may take time for new users to understand and learn the jargon that Prototyper uses. For example, when using the product for the first time, terms like masters, containers, and data grids may be difficult to grasp.
  • not easy to use—Prototyper’s usability has a long way to go before it would provide a great user experience. There are several points where one can get lost in the application. For example, creating a clickable prototype sounds easier to accomplish than it actually is using Prototyper. It takes a while to thoroughly understand the user journey the application presents.
  • no support for custom widgets—Although Prototyper does let you drag and drop widgets to create low-fidelity and high-fidelity prototypes, it lacks a mature environment for prototyping design concepts when aesthetics come into play. Its stock high-fidelity widgets lack the custom look and feel that would be necessary to integrate them into high-fidelity prototypes of fully realized design concepts.
  • limited usability testing environment—This prototyping platform lacks a complete usability testing environment. It does not incorporate the user guides and test protocols that would enable a facilitator to efficiently and effectively conduct usability tests. Thus, this tools’ limitations would likely make it necessary for a facilitator to use other tools for planning a study and recruiting participants and integrate third-party testing tools with Prototyper.
  • overengineering—While Prototyper provides features that other prototyping tools on the market lack, it has become overly complex, and the application lacks seamless integration and consistency across its many features.

Conclusion

Justinmind Prototyper supports requirements gathering, wireframe creation, application simulation, and usability testing. You can use it to create interactive prototypes of both Web and mobile applications. As a bonus, Prototyper lets stakeholders and users provide feedback on your prototypes of mobile and Web applications. Thus, it incorporates all of the features that are necessary for a prototyping project. 

Senior Omni-Channel Commerce Consultant

London, UK

Afshan KirmaniWith over ten years of experience in customer experience, Afshan delivers ecommerce experiences based on omni-channel content and commerce solutions. She specializes in conversion-centric design, using behavioral psychology to persuade and drive conversions. Her projects focus on discovery and definition for content management and commerce platforms, and her design solutions have a proven track record of delivering growth in strategic accounts and revenue streams within global enterprises. Afshan has worked on Web sites and applications that take a mobile-first, responsive approach to produce designs that span hand-held devices, wearables, and retail kiosks. Her experience touches on social media, analytics, applications that leverage personalized content, and user experiences that optimize customer retention to increase sales.  Read More

Other Articles on Product Reviews

New on UXmatters