How rapid prototyping evolves the process for mobile UX professionals, clients, and users

Slow down. What’s all this talk about rapid prototyping?

Depending on your industry, rapid prototyping can mean different things. But to a mobile user experience (UX) professional, it means your job is now worlds better. Seriously, gone are the days when you have to marshal static wireframes in an attempt to (poorly) convey how a mobile app or website will work.

What’s wrong with static wireframes?

Static wireframes are…well, they’re static. It can be very hard for anyone who didn’t create them to interpret them and to really get the gist of how the finished application will work. They often go hand-in-hand with copious annotations, which might be great documentation but can make the review process quite cumbersome for clients. I think we can all agree: It doesn’t quite represent a typical user experience to have to read through annotations while you use an application.

That’s why we’ve started using Axure RP Pro to produce interactive wireframe and design prototypes. The difference is blowing our mind. To be clear, with this new approach, we are not cutting out the critical steps of documenting app content and process requirements, priority of content, functionality, and navigation. And we’re still using our full “bag of tricks” to produce the caliber of design our clients expect (not limiting ourselves to Axure’s somewhat limited styling options). But the Axure prototyping approach does afford some nice ways to streamline our efforts and otherwise evolve our UX process. Here are just a few ways:

Evolving the process for mobile UX professionals

You can view your work on your phone very early in the process!

This means you can detect glitches in your approach sooner rather than later, which means you can revamp before you’re too far down the wrong path. When you tap through a wireframe via a prototype on your phone, you can much more readily intuit if something in your flow isn’t quite right, and you can address it promptly. It’s really helpful to be able to more easily visualize where “the fold” falls, too.

Your team can work on the same files at the same time!

One of the sweet features that we are just starting to take advantage of is being able to share files with coworkers. It’s easy to create a shared file (provided you have access to a shared drive somewhere), and through a somewhat-Dreamweaver-like check-in/check-out process for individual screens of your app (or pages of your site), you can work on the same file at the same time.

You can make and use custom type styles!

This one really deserves three exclamation points, IMO. We used to use Visio, and you had to hand-style each piece of text you put into the wireframe, if you didn’t have a usable stencil item for it. Axure lets you create a style and then reuse it as you create new text elements (and when you edit the style, the changes will apply to all type with that style applied – YES!). My one wish is that Axure would let you make derivative styles, so you easily could make an H3 based on an H2, based on an H1, and so forth. Ok, and my second wish is that you could apply all-caps as a style.

You can save yourself some of the painstaking annotations!

Remember the maxim from high school English to “show, don’t tell”? Making an interactive prototype lets you do just that. I can’t lie – I’m still writing a lot of annotations. After all, there will always be important functional requirements to impart to others on your internal team and to document for the client. And while you could spend the time working out the logic to produce complicated dynamic results, it may be more expedient to just write certain annotations, and leave it to a skilled programmer to generate the code. But what you won’t need to do is spend time annotating a lot of the basic interactions!

You can demo designs as an interactive prototype, too!

It doesn’t have to stop with wireframe prototypes. We are producing design prototypes, too, which not only are useful for the client, but I’ve found they also improve my personal creative, iterative process. For now, I’ve stuck to bringing Photoshop slices into Axure as images, rather than using Axure’s design tools to produce page elements. I realize this has some process limitations, but I like the Photoshop control this gives me. With this approach, I can still get a preview of how my font sizes look on an actual phone, whether my button sizing feels right, and once again, where “the fold” falls. If things are not to my satisfaction, I can immediately tweak them in Photoshop and easily update the image in Axure until I get the prototype where I want it. And with Axure’s “Image Map” widget capability, I can still turn my sliced images into interactive screens.

What’s evolving for clients?

Clients can view the app on a phone very early in the process!

Let me just say this about our first client to view wireframes as an interactive prototype: they were beside themselves. They could really see what they were going to be getting! And they could take it back and demo it to colleagues without having to do a lot of explaining. That makes them look good to their supervisors, and what client doesn’t like that?

Clients can easily provide feedback!

At least with Axure, there’s a super-easy way for clients to provide feedback – on a discussion tab, available on the desktop view of the prototype, which the client can access via a link (which you can password-protect, by the way). And there’s a discussion tab for each screen of your app, so clients don’t have to waste time pasting links into an email to try to explain where their comments apply. It also lets multiple clients comment at the same time, and tracks who says what. After our clients provide feedback, I can print out all of the comments, easily tell what screen they relate to, and even write response comments.

I’m not saying we’re doing away with direct client presentations and feedback conversations. No way – the immediate reaction and feedback to an initial presentation is priceless. But these ways of capturing client feedback after-the-fact are proving really useful to us.

There are fewer deliverables to manage!

Having the interface, requirements, and feedback all in one place is a very nice thing to be able to offer a client. Enough said.

Most importantly, how will users benefit from the evolution?

Better user experience!

Of course the rapid interactive prototyping process will not be visible to end users, but the results will be. Your app will be much stronger from having been viewed on a mobile phone so early (and often) throughout the process by lots of internal and client stakeholders. This means you get a bunch of testers who can provide valuable feedback that will no doubt result in a better user experience. That sounds like evolution to me.

So, how will the process continue to evolve?

Evolving our process is an integral part of the Q way of doing business. We will keep an eye out as Axure develops and rolls out new features and versions, as mobile (and desktop web) UX practices evolve in the industry, and as needs and expectations evolve among our clients. For the moment, we hope to see evolution in how Axure facilitates prototyping of responsive design solutions (to date, it doesn’t seem that Axure has a solid way of handling responsiveness). But for now, Axure’s features are going a long way to helping us evolve our process.