The $1 Prototype: A Modern Approach to Mobile UX Design and Rapid Innovation for

188 Pages·2015·9.73 MB·English

by  Greg Nudelman

THE $1 PROTOTYPE

A Modern Approach to
Mobile UX Design
and Rapid Innovation
for Material Design,
iOS8,
and RWD

By Greg Nudelman

DesignCaffeine Publications
San Francisco, California

Copyright © 2014 by
Greg Nudelman
Kindle Version 1.1
Table of Contents
Beginning
1. What is the $1 Prototype Mobile Design Methodology?
Case Study: Be a Hero!
2. How is the material in this book organized?
3. What do I need to get started with $1 Prototype methodology?

PART 1 ~ ENVISION
4. What do I need to draw in my storyboard?
5. How do I craft my storyboard? What tips do you have for making it
interesting and effective?
6. I’m stuck. Where do I start?
7. You encourage us to just storyboard our assumptions. Isn’t it better to do
some research first?
8. Why do you insist on using small square sticky notes for storyboards?
9. I got my storyboard. Now what?
Case Study: Mood Ring to MyStuff

PART 2 ~ PROTOTYPE
10. What should I strive for when designing my mobile experience?
11. Where do I start my mobile design?
Side Panel: List of Links Pattern
12. Are we really able to model a mobile experience effectively with a pack of
sticky notes?
Case Study: Commute Assist
13. Can you give an example of an app re-design done using sticky note
wireframes?
14. How do I design for Android Material Design?
Side Panel: Do I need a FAB (Floating Action Button)?
15. How do I design for iOS8?
16. How do I use $1 Prototype to design Responsive Websites?

PART 3 ~ TEST
17. Are you saying don’t do any usability testing?
18. When and where should I do my usability testing?
Case Study: Go Fetch!
19. What are the best practices for testing using sticky note wireframes?
20. How do I ask non-leading questions?
21. How do I test Google Material Design Transitions?
22. What if I already have a product implemented? Can I still use sticky note
prototypes for testing?

PART 4 ~ COLLABORATE
23. We use Agile development process. Do we still need the $1 Prototype
methodology?
24. What do you mean replace the kick-off meeting with a kick-off design
workshop? Is this just a fancy name?
25. Are you saying everyone should be a designer? I don’t like that. Sounds like
chaos.
26. What makes storyboards so special for mobile? What about using Personas
instead?
27. I still don’t understand why we need storyboards. I think the list of
requirements ought to be enough for anyone.
28. My team can’t agree on our first design.
29. What’s the best way to integrate $1 Prototype methodology into Agile
Scrum?
30. What kind of graphics software do you use in your design work?
31. My developers are demanding only high-definition wireframes and refuse to
look at my sticky notes. What do I do?
One Last Thing
Greg Nudelman is a Mobile and Tablet Experience Strategist, Fortune 500
Advisor, Author/Speaker and CEO of DesignCaffeine, Inc. For over 15 years he
has helped his clients, Intuit, Oracle, Cisco, eBay, USAA, Wells Fargo,
Safeway, Associated Press, Groupon (and many others), get multiple featured
apps and amass millions of satisfied customers. Internationally acclaimed design
workshop leader and accredited graduate course instructor, Greg has taught at
over 50 workshops, events, and university classes in 10 countries, and authored
four books on mobile UX design. Greg lives in the San Francisco Bay Area.

Also by Greg Nudelman:
• Android Design Patterns: Interaction Design Solutions for Developers (Wiley
2013)
• Padrões de Projeto para o Android Soluções de Projetos de Interação para
Desenvolvedores (Novatec, 2013)
• The Mobile Book (Smashing Media AG, 2013) • Designing Search: UX
Strategies for eCommerce Success (Wiley, 2011)

Author Online!
For 50+ design articles, free design courses, updates, and more visit:
www.DesignCaffeine.com
•
Copy Editor: Jim Driggers http://writingjim.com
Technical Editor: Cesar Brod http://brodtec.com
Video Producer: Lawrence Hannigan http://bit.ly/1dplarry
Art Consultant: Will Krause http://willkrause.com
Beginning

Your work should empower and inspire. That’s how important it is.

Sketching is the life-blood of any design process. I did a lot of visual thinking in
my Moleskine notebook and when I started doing mobile design, my approach
was much the same. Proudly, I labored behind closed doors, producing many
sketches like these, which made me feel very “designery”:
One day, I had to rush out the door to a client meeting and left my Moleskine
behind. At the meeting, I needed to quickly “think with my pen” to design a
mobile screen, so I grabbed the first available piece of paper lying on the table: a
pack of sticky notes. I was trying to be as quick as I can, so I drew the bare
minimum—just the page layout and controls. Imagine my astonishment, when
the company’s CEO (normally a reserved and dignified person—consummate
professional, whom I greatly respect) suddenly jumped up and, seizing my pack
of sticky notes in his hand, started vigorously gesticulating and tapping my
hand-drawn buttons with his thumb, saying “See! This is EXACTLY what I
mean!”:
“Eureka!”
I never imagined that an $800 iPhone, the pinnacle of human achievement, the
technological miracle of the 21st century . . . could be exceedingly well
approximated by a $1 pack of sticky notes coupled with an active imagination!
Since that memorable meeting, I had the privilege to speak at length with
Steve Krug, the author of Don’t Make Me Think (http://bit.ly/1dpdmmt3), who
was very receptive to my ideas and encouraged me to explore the concept
further. Mr. Krug’s interest in the early versions of my sticky note prototypes
and his encouragement five years ago eventually led to the book you hold in
your hands.
For the last five years I’ve had the privilege to present and teach at more than
50 events, workshops, and university courses in 10 countries. Throughout this
time, my initial lightweight mobile design technique has been challenged and
improved through many enthusiastic experiments and insightful questions from
the participants, as well as some intensive client work, which resulted in multiple
featured apps in both Apple App Store and Android Play Store. This book is the
result of those workshops and design sessions, so I want to thank the thousands
of people that came to my events—I’ve learned as much, if not more, from those
sessions as those that have attended them. In particular, I want to thank the
students of my San Francisco State University Agile Mobile UX Design
Certificate Course, who graciously consented to have their work featured as part
of this book: • Will Krause
• Adam Beu
• Anastasia Walia • Talya Carrie • Frances Liddell • Valerie Lord • Ken
Bousquet • Kate Chadd
• Darrin Jones • Leslie Keats • Patricia Larsen • Jacob Madsen • Deepti
Mande • Katherine Sawyer • Monica Zendig They’re the best collaborators
anyone can hope to have, and I’m proud of what they accomplished in just three
short weeks of class!
I also want to thank my sponsors who pre-ordered the book on Publishizer:
• Vitaly Polekhin • Guy Vincent
• Aaron Vargas • Bob Royce
• Louis Rouffineau • Tom Belunis
• Andrew Lawton • Anastasia Walia • Andrew Sandler • Anthony Hand •
Chris Noessel • Dan Keldsen
• David Hunkins • Eric Henderson Their generous financial support improved
everything that is good about the quality of the book: editing, art and video
production, and indeed made this book possible. Any and all mistakes are my
own.
•
My three previous books were more concerned with the What of design, such as
design patterns and pitfalls:
In contrast, the book you hold in your hands is much more about the How.
Instead of providing design patterns, this book combines the best of modern
mobile usability techniques with Agile development lifecycle and Lean business
practices. This combined methodology creates a practical, no-nonsense
lightweight UX design methodology I call “The $1 Prototype.”
This methodology can be used to quickly envision and design any mobile or
tablet product or service: from native and hybrid mobile and tablet apps to
responsive and mobile-optimized websites. CEOs, mCommerce Directors and
Product Managers as well as UX Professionals of all kinds should find the book
both useful and practical.
Another essential difference from my previous work, is how this book is
organized. I decided to use the Question and Answer format throughout the book
to create the feel of doing the design process as a workshop as well as to keep
the book concise and practical. My goal is to enable you to finish this book on
the flight from SFO to JFK and get off the plane full of new strategic ideas and
techniques you can put to work even before jet lag wears off. The Q&A format
should also help you easily revisit any topics you need at a later time.
Rather than try to convince you that UX design is valuable, I simply assume
you already know this. And if at times I speak forcefully, it is to cut through
layers of accumulated misunderstandings around UX and to help you get back to
the core of what’s really important: empowering and inspiring your customers,
while making a good living for you (and profit for your company’s
shareholders.)
If you’re currently a UX practitioner, this book will give you modern
techniques to apply UX principles with renewed vigor, efficiency and
confidence. If you’re new to UX design, this book will give you complete,
practical, mobile design processes that will immediately benefit you and your
team. This book does not aim to present anything particularly Earth-shattering.
Instead it’s a restating of the original UX principles for our modern, mobile age
Instead it’s a restating of the original UX principles for our modern, mobile age
—a rapid, lightweight, and resilient application of simple but profound
techniques that really work in the real world.
•
For updates to this book, design patterns, articles and free design courses, please
visit my company’s website at
www.DesignCaffeine.com

While there, be sure to sign up for my newsletter, Mobile and Tablet Design
Secrets, so you’ll know when I have anything new, including UX strategy
articles, design patterns and revisions of this book (http://bit.ly/1dpsecrets). At
DesignCaffeine, Inc., we’re a full-service boutique design and mobile consulting
company, providing everything from private training workshops for your team to
UX design and mobile development that will help you get featured in the Apple
App Store and Android Play Store. So if you need additional training, or any
help implementing the ideas in this book, don’t hesitate to drop us a line.
•
One last thing: beyond techniques and methodology, design is a highly spiritual
discipline. In my own practice, I’ve found Zen Buddhist awareness techniques to
be very helpful in everything from product visioning to usability testing. These
techniques have helped me recognize the spark of divinity in everyone, keep my
focus on awareness of other people’s needs, and off my own ego gratification.
So in some tiny measure, this book is also a spiritual guide to experience design.
I hope it will help you adopt the right attitude from the start: do your best, and
then let go. Otherwise, mobile design will just make you crazy. Take it from one
who has learned the hard way.