Many readers have asked about how I produced the prototypes used in the articles. I’ve been meaning to write about the tools and techniques I use as a freelance UX designer, and, given the interest in prototyping, I’ve decided to write a series of short tutorials about the this aspect of my workflow.

The UX Process

If you’re anything like me, a significant proportion of your time is spent communicating ideas about Users, UI and Information Architecture with clients, coworkers and management. Among the artifacts produced as part of any good product development process there are

  • User Stories

Let’s look at effective prototyping.

Effective Prototyping Is

Effective prototyping is fast. It’s about communicating just enough about the intended product so that

  • Clients can make judgements about how their brief has been interpreted

Effective Prototyping Isn't

A professional user experience designer must understand the product development life-cycle, and they must be disciplined enough not to introduce unnecessary and costly (in terms of time and therefore money) elements into the prototyping process.

Prototyping is not the time to get distracted by

  • Graphic design

If you find yourself spending

  • …just a few more minutes getting the kerning of this heading right.

Then you need to stop and reassess which part of the product development life-cycle you’re currently engaged with.

Prototypes are, by their very nature, disposable. Treating them as such will enhance your ability to contribute to effective product development.

Prototyping Tools

You don’t need to use a prototyping application to do good prototyping. The quickest way to get ideas down is to use paper and pencil.

The benefits of paper prototyping

  • Anyone can do it. The barrier to entry is almost non-existent

The Downsides

  • Not as easy to share as digital prototypes

Paper prototyping is an awesome place to start. At some point though, you’re probably going to want to introduce digital prototyping.

Characteristics of a Good Prototyping Tool

Whichever prototyping tool you choose (and there are many), your chosen application should be:

  • Efficient
    Time is money. If you’re wrestling with your software you’re wasting time and this will eventually hurt your bottom line.

Prototype Fidelity

The truth is, there is no one tool to rule them all. Depending on your project scope, you may need low, medium or high fidelity prototyping.

  • Low Fidelity
    Pencil+Paper

It’s unusual that an early stage project requires high fidelity prototyping. It may be a symptom of poor project management, which unfortunately can’t always be avoided by those of us in the trenches.

To be clear, tools such as FramerJS, After Effetcs and Atomic.io, are awesome, but they don’t belong at the early prototyping stage of product development. You should only begin to incorporate motion design into the picture once the high level IA and user flows have been well established.

Which Fidelity Should I Use?

Always, always, always go with the lowest fidelity you can. Remember that

  • The purpose of prototyping is to communicate ideas.

The quicker you can get those ideas out and in front of stakeholders the better.

About UX-App

My personal (digital) tool of choice for rapid prototyping is UX-App. Let’s do a quick evaluation of this software using the 3 characteristics identified above

  1. Efficient

1. Efficient

I don’t want to wrestle with my software to be able to quickly build complex UIs. The first thing that drew me to UX-App was the comprehensive pre-built component suite.

Here’s an example of how to put together a simple Tab Control.

Image for post
Image for post
UX-App Tab Control Prototype

Here’s a clickable version you can check out.

There are over 60 pre-built components to choose from and they are all easy to use. The component suite alone has saved me countless hours over the past year. Whichever prototyping tool you choose, make sure that common UI controls such as Tab View, Carousel, Combo Box etc are included and easy to use.

2. Expressive

UX-App comes bundled with just about every common UI component your project might need. If, however, you need to prototype a novel or unique interaction then you can use the Code Editor to define any interaction you might dream up.

Here’s a very simple example from one of my previous articles.

Image for post
Image for post
Code Editor Example

Here’s a clickable version you can check out.

This interaction was achieved using the following instructions.

Image for post
Image for post
A Custom Interaction

UX-App uses a drag-and-drop interaction designer with which you can define a huge array of possible interactions. This is definitely getting into the intermediate skill level with regard to UX-App, however it is well worth the effort to master this powerful aspect of the application.

Here’s a quick demo to give you an idea of how interactions are created.

Image for post
Image for post
Creating an Interaction

Here’s a clickable version you can check out.

3. Effective Communication

A prototype is useless unless you can share it effectively. There are a number of ways to share your designs using UX-App. The designs I work with are

  • Shared directly with a client or other stakeholder on a screen or device

If I’m currently working as a sub-contractor for a larger organization, I’ll often be in direct contact with developers and/or designers which makes sharing a design by using the ‘Publish to Device’ functionality useful.

Image for post
Image for post
Publishing directly to a device

Otherwise if I need to get feedback on a design from a user I use the

  • Share → Via link

option to receive feedback via email(that tried and tested communication medium).

The examples I’ve been including in this article are generated using this method.

Image for post
Image for post
Sharing via link

You can also invite clients to a prototyping session. I’ve had mixed results with this. Some clients love being involved with the design process and, even though the client view that UX-App provides isn’t difficult to get your head around, some clients still prefer face-to-face or email communication.

In any event, it’s a nice feature to have and allows clients or other stakeholders to view a project and leave notes within the application.

Image for post
Image for post
Client Invitation

Summary

When it comes to early stage prototyping, speed trumps all. If you start to get bogged down in graphic design or precise animation timing then you run the risk of getting too attached to your prototype.

Whichever tool you choose, make sure that it allows you to communicate ideas as quickly as possible. For me UX-App hits just the right level of fidelity for much of the early stage prototyping that I do.

Coming Up…

I’ve been using UX-App for a while, and I’m looking forward to sharing some practical examples and tips in my next article.

Next week I’ll be exploring

  • Component Editing

Stay tuned!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store