1. THE RIGHT WAY TO WIREFRAME
Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.html
Russ Unger | @russu

2. We don’t show
OUR WORK

3. DESIGNERS
Do It

4. DESIGNERS
Do It

5. DEVELOPERS
Do It

6. DEVELOPERS
Do It

7. WHAT ABOUT UX?

8. We don’t show
OUR WORK

9. “My work is proprietary.”
MINE, TOO.

10. Have you ever seen
A WIREFRAME FROM...

11. Peter Morville

12. al Navigation Default state
store
009 Version 1.0 logo search 2
Jesse James Garrett 1 cart
n HBR today on current account
blogs books authors HBS downloads
page highlights timely content from the blogs, magazine, hbr magazine
3
s sections. explore hbr
4
ea expand your knowledge build your expertise discover new approaches
provides a focal point for all e-commerce related links.
page allows users to find aggregated links to content from Partially expanded state
uthors across blogs, magazine, and books sections.
drawer
store
logo search
andable area encourages and facilitates exploration of cart
y subject. today on current account
blogs books authors HBS downloads
your knowledge hbr magazine
features editorially selected sub-categories from the current Strategy Decision making
explore hbr Business processes
ategory in search results. Leadership Interpersonal skills Management by objectives
Organizational change Project management Quality management
Jesse James Garret
ur expertise
Information & technology Managing uncertainty Forecasting
features editorially selected sub-categories from the current Global business Time management Knowledge management
ment Skills” category in search results. 5 7
new approaches
expand your knowledge build your expertise discover new approaches
6
features editorially selected sub-categories from the current
Methodologies” category in search results.
nks Fully expanded state
ks drive users interested in exploring further to dedicated store
ages. logo search
cart
today on current account
blogs books authors HBS downloads
hbr magazine
explore hbr
more topics » more skills » more methods »
8
Strategy Decision making Business processes
Leadership Interpersonal skills Management by objectives
Organizational change Project management Quality management
Information & technology Managing uncertainty Forecasting
Global business Time management Knowledge management
expand your knowledge build your expertise discover new approaches
sign | Harvard Business Review

13. “I’ve never done a wireframe*”
*
Jared Spool

14. What is the best approach?
WIREFRAMING OR PROTOTYPING

15. “Now that I’m a consumer of wireframes, I
want to see prototypes!”
Christina Wodtke | @cwodtke

16. “Now that I’m a consumer of wireframes, I
want to see prototypes!”
Christina Wodtke | @cwodtke
“You can’t say that works
for everyone just because it works for
you now!”
Me | @russu

17. “Can, too!” “Cannot!”
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”

18. sigh.

19. I <3 and...

20. They are just Communication Tools.
Arguing about wireframes vs. prototypes is
MISSING THE POINT

21. It was time to
NUT UP OR SHUT UP

22. 4 DESIGNERS

23. Russ Will Fred Todd

24. What is the best approach?
WIREFRAMING OR PROTOTYPING

25. Balsamiq HTML &
Omnigraffle Axure RP
Mockups Fireworks
Wireframes Prototypes

26. Three
RULES

27. Three
RULES
- EVERYONE uses a different tool
- EVERYTHING is documented
- NO TALKING to each other

28. The
CASE STUDY

29. “If we can give $5 to a stranger
at a coffee shop, why can’t we do
that for healthcare?”
Tori Tuncan
98 Loans for a total of
$76,289

30. www.
LEND4HEALTH.COM

31. whew.

32. Design the path for funding a loan.
The
OBJECTIVE

33. How it’s done
TODAY
- user reviews profiles/needs in the blog format
- user determines amount they can loan
- user contacts lend4health
- lend4health connects user and loan recipient
- lend4health supplies loan agreement
- user funds loan via paypal
- lender repays funds via paypal per agreement
- lender supplies updates to child’s progress to lend4health and lender
lend4health updates progress on website
- continues until loan is paid back

34. whew.

35. The
APPROACH

36. Gabby Hon
@gabbyhon

37. User & Company
RESEARCH

38. User
PERSONAS

39. This is how
I DID IT

40. Requirements
ANALYSIS

41. Persona
CONSIDERATION

42. Information
ARCHITECTURE

43. Information
ARCHITECTURE

44. Angela: Loan Funder
USER JOURNEY
Angela Reviews
Angela arrives at Angela Searches for a
Details of Loan
Lend4Health.com Loan to Fund
com/photos/ Request
http://www.flickr.
06/2912606267/
(0.0.0.0) (1.0.0.0)
11762156@N (1.1.0.0)

45. Pencil & Paper
SKETCHING
Lend4Health.com
Search Loans to Fund Loan Details
Home Page
(1.0.0.0) (1.1.0.0)
(0.0.0.0)

46. Quantity over quality
15 SKETCHES / 3 SCREENS

47. The Original
PRESENTATION

48. Balsamiq Mockups
WIREFRAMING
Lend4Health.com
Search Loans to Fund Loan Details
Home Page
(1.0.0.0) (1.1.0.0)
(0.0.0.0)

49. Brad Simpson
@simplybrad

50. Brad Simpson
VISUAL DESIGN
Lend4Health.com
Search Loans to Fund Loan Details
Home Page
(1.0.0.0) (1.1.0.0)
(0.0.0.0)

51. Lend4Health.com
LOAN DETAILS

52. Pretty Cool.

53. Here’s the
ENTIRE PROCESS

54. Four Designers
LOTS OF OVERLAP

55. Information
ARCHITECTURE

56. Information
ARCHITECTURE

57. Information
ARCHITECTURE

58. Pencil & Paper
SKETCHING

59. Pencil & Paper
SKETCHING

60. Pencil & Paper
SKETCHING

61. Pencil & Paper
SKETCHING

62. Visual
DESIGN

63. Visual
DESIGN

64. Visual
DESIGN

65. Visual
DESIGN

66. Online
VIDEOS
http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN

67. Changing Times &
NEW CONSIDERATIONS

68. Responsive
DESIGN
Ethan Marcotte
@beep

69. Responsive
DESIGN
Ethan Marcotte
@beep

70. Responsive
DESIGN
Ethan Marcotte
@beep

71. Biggest, Smallest, “Just Right”
GOLDILOCKS
Matthew Milan Source: Wireframes Magazine
http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/
@mmilan

72. Responsive Way
TO WIREFRAME

73. Responsive Way
TO WIREFRAME

74. Responsive Way
TO WIREFRAME

75. Mobile
FIRST
Image Source © Dustin Kirk ¦ http://www.dustinkirk.com/tag/luke-wroblewski/

76. Localization &
LANGUAGES

77. What’s
NEXT?

78. So
WHAT?

79. The primary
CHALLENGES
- UNABLE to talk/collaborate
- RESEARCH handed to us
- NO FORMAL usability testing
- DEVELOPER was unknown

80. Core
PRINCIPLES
- SKETCHING (a lot) is THINKING (a lot)
- CRITIQUE is extremely essential
- BEST TOOL: the one you know
Find Your Right Way Here!

81. THANK YOU!
Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.html
Russ Unger | @russu