Product Review: Justinmind Prototyper

January 4, 2010

Since our clients require an ideation phase before looking at a product’s visual design, I’ve been looking at a lot of wireframing and other prototyping tools lately. To find out more about prototyping tools, I’ve combed several mailing lists—such as SIGIA and IxDA—looking for discussions about the latest tools that are available to us. As a result of what I’ve found out, I’ve been exploring Justinmind Prototyper, a prototyping tool that serves the ideation process well and, more important, generates HTML code for the prototypes we create.

Champion Advertisement
Continue Reading…

Competitive Edge: HTML Wireframe Generation and More

Justinmind provides a number of benefits over the competition, as follows:

  • HTML wireframe generation—With the latest version of Justinmind, you can simplify your work by generating HTML for your prototype with just a click, then send it to your clients and share it with your colleagues. This feature provides Justinmind’s biggest competitive edge.
  • widget libraries—A feature that is unique to Justinmind is its widget libraries—otherwise known as reusable components within the industry. With these widget libraries, it is easy to include predesigned icons, templates, and HTML and Flash code in your prototypes. Figure 1 shows My Widgets.
  • simulations—You can create a complete simulation of your Web site or application, using just one application. Most prototyping tools like Balsamiq Mockups, FlairBuilder, Photoshop, and Illustrator only let you draw user interfaces, and creating wireframes in HTML/CSS takes too long. Justinmind lets you draw your wireframes, incorporating JPEG images from any design tool, and create a perfect simulation.
  • reusable components—What’s interesting about this prototyping tool is that you can either use existing components or create new, functional, reusable components, or widgets, that you can reuse in any of your projects, as shown in Figure 2. When creating prototypes, you’ll love how easy it is to drag and drop these components. And you can share your widgets and blog about them on your Web site.
  • conditional logic—With this feature, you can simulate state changes. For example, you can create a login screen that goes to the screen that appears only if a user’s password is correct and once the user has logged in.
  • data manipulation—The kind of data manipulation that is available in iRise seems advanced in Justinmind as well. You can manipulate data, filter, and search—all within your prototype. You can even use real data when creating forms.
  • collaboration—Overall, collaboration is improved in Justinmind. Requirements management lets you control who can comment on what and organize all the functions in a text document for your programmers. It’s a good tool for teamwork.
Figure 1My Widgets
My Widgets
Figure 2—Prototyping with reusable components
Prototyping with reusable components

Components of Justinmind Prototyper

The Visual Prototyper has three main sections.

  • User Interface—On this tab, you can create wireframes and mockups for ideation, brainstorming, and conceptualization. It lets you drag and drop the components for a design, which are also reusable later on. It also includes a simulation environment that allows you to see how your prototype would look on the Web.
  • Functional Scenarios—This tab lets you create flow diagrams, which facilitate your designing the information architecture for a Web site or the workflows for an application. It also lets you branch control flows down separate paths, using conditional logic.
  • Requirements—Uniquely, another great benefit this prototyping tool offers is that it helps you gather requirements end to end, on the Requirements tab shown in Figures 3 and 4. This helps you progress through requirements to page flows, which are then reflected in the user interface. Justinmind groups elements structurally, and you can maintain versions as you refine your designs. Competitors do not offer this feature.
Figure 3Requirements tab
Requirements tab
Figure 4—Capturing requirements you’ve gathered from your client
Capturing requirements

Justinmind Server

With Justinmind Server, you can store and deploy your various projects on a server for review. Justinmind Server also functions as a project space in which you can store all of your project files. It lets you invite people in various roles to view your prototypes. Whether for your clients or your own team, you can provide login IDs to the people who need access to prototypes. Plus, once you’ve deployed a prototype in Justinmind Server, you can conduct participatory design sessions, giving users access to the prototype.

Your Workflow in Justinmind Prototyper

Justinmind Prototyper lets you

  1. Create a list of functional requirements.
  2. Transform those requirements into an application wireframe.
  3. Create simulations, whether you are an analyst, consultant, or UX designer.
  4. Upload your simulation files to the Justinmind Server, generating a Web prototype.
  5. Publish your Web wireframe to share it with your client or team.
  6. Give your client or team members login access to your prototype, so they can review it and provide their suggestions.

Justinmind Prototyper is especially useful during the definition phases of a project. Designers can quickly churn out and deploy prototypes, simulating a Web environment. With the kind of flowcharts Justinmind generates, business analysts could gain from using it as well. And information architects should keep this tool handy if they don’t already have a tool that helps them capture requirements and create mockups, flowcharts, and page designs. Justinmind lets you create a navigation map, outlining the structure for your entire project, showing all of its screens and the connections from one screen to another.

Look Before You Leap

Before you go out and buy yourself this tool, I want to mention some of its shortcomings—that is, things that could be improved. What seems lacking is the amount of training information that is available for the application. Plus, compared to its competitors, its user base is smaller, so most people don’t know how to use the application. Although it’s relatively easy to learn, the lack of customer support is bewildering to a first timer. The Web site does provide some tutorials, a blog, and a Support Portal for customers, but for users to fully benefit from the extent and power of this tool, these areas need improvement.

Some features are hard to use. For example, the masters feature is completely incomprehensible on your first try. The latest version of the Prototyper offers drag-and-drop conditional logic. However, its users think building conditional logic is too complicated and feels like programming, so many don’t use what is one of the application’s most powerful tools.

The HTML code the Prototyper produces is not perfect, so Development still needs to create production-quality code. Someone who isn’t a CSS expert cannot understand the CSS code the application produces. Only a coder could decipher each line of code, which makes it difficult for a nondeveloper to create a Web site.

Fortunately, you don’t need to jump into purchasing this tool immediately. Download the free, trial version from the Justinmind Web site and experiment with it, then decide whether it’s right for you based on your needs. The application costs $550, including one year of support and a WebEx training session.

Comparing Justinmind to Other Prototyping Tools

After looking at tools like Balsamiq Mockups, FlairBuilder, OmniGraffle Professional, MockFlow, Visio, GIMP, iRise, and Axure RP, I think the latter two come close to Justinmind Prototyper’s capabilities. Only you can determine which prototyping application would best satisfy your needs. So, in addition to trying Justinmind Prototyper, I suggest you also check out these other prototyping applications:

  • Axure RP
  • Balsamiq Mockups
  • DesignerVista
  • Expression Blend
  • Fireworks
  • FlairBuilder
  • Flash Catalyst
  • GUI Design Studio
  • HotGloo
  • iPlotz
  • iRise
  • JustProto
  • MockFlow
  • OmniGraffle Professional

In my opinion, you should avoid these tools:

  • ForeUI
  • fluidIA
  • Lucid Spec
  • Pencil
  • pidoco
  • ProtoShare

I’ve created a comparison chart of the five applications I think you should definitely try, shown in Figure 5.

Figure 5—Five prototyping tools compared
5 prototyping tools compared
  • Axure RP lets many people work on a file at the same time, keeps a history of a project, and is easy to use.
  • Balsamiq Mockups links screens together, creating simple prototypes.
  • Fireworks provides flexibility in creating shapes and layered wireframes, and it’s easy for designers to work on the same file, if necessary.
  • iRise is serious about innovation and experimentation.
  • Justinmind Prototyper allows flexible interaction and helps with gathering business and user requirements.

Please feel free to comment on this review, which offers my personal judgment on Justinmind Prototyper and other prototyping applications. If you have something on your mind or a different opinion, pitch in with your comments. 

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