Walking Wireframes, Methods for
Exploring the Mobile User Experience
Michael Jefferson
Principal Designer
frog design
325 Hudson Street, 7th floor
New York, NY 10012 USA
Michael.jefferson@frogdesign.com
Copyright is held by the author/owner(s).
CHI 2009, April 4 – April 9, 2009, Boston, MA, USA
ACM 978-1-60558-247-4/08/04.
Abstract
Mobile user experience research requires the
development of new methods and tools in order to add
context to the user experience. In developing desktop
and web-based applications, designers have had the
great fortune of user perspective just by being seated
at a computer. Processing power has migrated to
handheld devices, however we find ourselves relying on
tools and methods that are anchored to the computer
at our desk. From research to user testing, the frog
design team has worked to re-shape and re-think our
tools and methods to align with the mobile user
experience.
Keywords
Mobile UI, Prototyping, Mobile Research, Mobile
Usability
ACM Classification Keywords
H5.2. User Interfaces: Prototyping
Introduction
As a principal designer with frog New York, my role is
to bridge new and emerging technologies with user
needs and expectations. My approach is through user
centered design research, sketching [1] and
prototyping.

In the transition from research to design, I encounter a
breakdown or inadequacy in tools. Drawing and
prototyping tools like Flash, OmniGraffle and InDesign
offer great speed and flexibility, however, mobile
experiences require that we re-think how and when we
use them. Devices have broken away from the anchor
of the PC [1], so designers must do the same.
I will describe briefly five methods that have been
employed and continue to evolve.
 The Small Screen
 Paper Prototyping
 Walking Wireframes
 Video Simulation
 Multi-casting
The Small Screen
With mobile user experience, you don’t really know
what you are looking at until you view it on a small
screen in your hand. What has been missing for me is
a simple and efficient way to mirror the design on my
workstation monitor with a mobile device screen.
While there is no off the shelf answer for a small digital
monitor, a fast simple method is to simply draw on
paper. My colleague, Clay Wiedemann has used a
cardboard phone and roll of register receipt paper to
quickly get the feel for a layout or idea. Leland Rechis
of Google described a similar technique in a Usability
Professionals Association presentation on Creating Apps
for Mobile Devices [2]. I am still looking for the perfect
digital solution.
2
fig 2. Clay Wiedemann’s small screen
Paper Prototyping
Adding a small screen is one step towards better tools
but the real focus should be on finding the method that
will provide good data with the least amount of effort
[3]. What Rechis, Weidemann and others are doing
successfully in paper is identifying what problems there
are to solve and getting ideas to users as soon as
possible [3]. A recent client engagement involved
voice control and a multi-modal user interface. Even a
simple concept would take extensive resources and
time to create a functioning prototype. With paper and
the block phone, I was able to run through several
iterations, even making edits on the fly.
The challenge when working with paper is the linear
progression of screens. What if the participant tries to
go somewhere out of sequence? To address this, I
developed a deck of edge case screen state cards that I
could deal to participants showing what would be on
screen.
 3

consider these variables. The experience changes both

across devices and across environments. Carlos Gomez,
a colleague at frog, developed a quick and efficient
method for getting wireframes calibrated correctly for
device display and then serving those calibrated
wireframes from the PC or Mac to a device for viewing.

fig 3. Wood block phone with paper screen sequence

fig 5. Calibrating a devices display modes

Calibrating involves capturing screen shots from the

device to understand the implication of native menus,
button size and readability. Once a template has been
created, simple line renderings of screens, wireframes,
fig 4. Individual edge case screen state cards are produced to scale and exported as clickable HTML
files and served from a host computer over a wireless
network connection.
Walking Wireframes
Mobile device application development requires greater
attention to form factor and software constraints. With
desktop applications, we do not need to step back to
think about the shape of the monitor or where you sit
to view the monitor. With mobile devices we have to

fig 6. Wireframe displayed in device browser
You can take these wireframes for a walk and begin to
experience a layout in context. Early insights, similar
to the ones gained using paper are low resource, high
return methods for shaping the interaction model early
in the design process.
Video Simulation
With mobile user experiences, what is happening
around you has a direct effect on how you interact with
information. Recent collaborative work with Ben Rubin
of Ear Studio and sound designer David Lawrence of
Muse Garden Recording resulted in a new tool for
understanding the environmental demands on an
application. We were in the early concept phase of an
application that would use earcons or sound cues to
assist the user in hands-free operation. With visual
design in the early sketching stage, we opted to record
on video a simulation of a user interacting with the
proposed application. This simulation was then used to
4
score sample sounds for review. The video also
provided early insight on the following:
 Required level of attention
 Environmental conflict and distraction
 True timing for completing a task
 An understanding of what both what it felt like as a
user and as an observer of a user.
fig 7. Subtitled video used in sound design
Multi-casting
Mobile experiences are personal, and require new
methods for conducting usability tests. The screens are
small, physical relationship is close and it is difficult for
anyone but the participant to be able to see the
experience. A promising solution to the issue is to
multi-cast the user experience from one device to
many.

A recent application required the design of a Wizard-of-
Oz environment where a human operator in another
room would determine what screen states or responses
a participant would see on their phone. An artifact of
the design was the client server architecture that
allowed multiple phones to see what was on screen. A
MacBook with a wireless signal allowed several phones
to log in to a URL for a mirror display of what the user
was experiencing. Stakeholders observing test sessions
could hold a phone in hand and view the live screen
states as they happened. The portability of this system
opens opportunities to conduct testing in more realistic
environments, such as a café, a train, or on the street.
5
Conclusion
The five methods described are simple steps towards
addressing a great challenge. By re-thinking some of
the tools and processes that have been developed for
the desktop environment, we can begin to improve the
mobile user experience.
Example citations
[1] Buxton, B. Sketching User Experiences.
Mogan Kaufmann, San Francisco, CA, USA, 2007
[2] User Experience at Google NYC: Creating Apps for
Mobile Devices
http://www.nycupa.org/pastevent_07_0410.html.
[3] C, Snyder, Paper Prototyping: The Fast and Easy
Way to Design and Refine User Interfaces.
http://www.paperprototyping.com/