Download - Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience
![Page 1: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/1.jpg)
(P)
SKETCHING, WIREFRAMING, PROTOTYPING(P)HILIPP SCHRÖDER
FRONTEND CONFERENCE 20126.9.2012
![Page 2: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/2.jpg)
How to Be Agile and Avoid Half-Baked User Experience
SKETCHING, WIREFRAMING, PROTOTYPING
![Page 3: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/3.jpg)
@pips1TWITTER, ANYONE?
![Page 4: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/4.jpg)
"TWTTR SKETCH", CC BY JACK DORSEY ON FLICKR
INITIAL SKETCH OF TWITTER
![Page 5: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/5.jpg)
"THE TWITTERVERSE V0.9", CC BY B_D_SOLIS ON FLICKR
TWITTER ECO-SYSTEM
![Page 6: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/6.jpg)
TRENDS
![Page 7: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/7.jpg)
WHAT IS THIS AGILE THING THAT EVERYBODY IS TALKING ABOUT, REALLY?
![Page 8: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/8.jpg)
➡ Individuals and interactions over processes and tools
➡ Working software over comprehensive documentation
➡ Customer collaboration over contract negotiation
➡ Responding to change over following a plan
AGILE MANIFESTO
HTTP://AGILEMANIFESTO.ORG/
![Page 9: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/9.jpg)
HAT TIP: ANDERSRAMSAY.COMIMAGE: CC BY NC ND SANGUDO ON FLICKR
TRADITIONAL RELAY RACE
Team members run alone.
Collaboration is not built into the game.
![Page 10: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/10.jpg)
HAT TIP: ANDERSRAMSAY.COMIMAGE: CC BY-SA GUFFEYGF ON FLICKR
AGILE RUGBY GAME
Intensive and continuous collaboration is core to the game.
Reach the goal line again and again to win the game.
![Page 11: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/11.jpg)
➡ All agile frameworks rely on Empirical Process Control.
➡ Traditional frameworks (and most current management approaches) rely heavily on Defined Process Control.
A CRUCIAL DIFFERENCE:PROCESS CONTROL
![Page 12: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/12.jpg)
CHARLIE CHAPLIN IN “MODERN TIMES”
DEFINED PROCESS CONTROL
![Page 13: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/13.jpg)
WHY WATERFALL DOESN’T WORK FOR ME
![Page 14: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/14.jpg)
CC BY-NC-ND SHENGHUNG LIN ON FLICKR
RELAY RACES & “DEATH MARCHES”
![Page 15: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/15.jpg)
CC BY-NC YUAN2003 ON FLICKR
KNOW-HOW SILOS
![Page 16: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/16.jpg)
NO TEDIOUS SPEC WORK
![Page 17: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/17.jpg)
WHY AGILE DEVELOPMENT WORKS FOR ME
![Page 18: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/18.jpg)
1 ITERATION = 1 SPRINT = 2 WEEKS TO 1 MONTH
EMPIRICAL PROCESS CONTROL - AS EXEMPLIFIED BY SCRUM
24hrs
Sprint planning End of project
Delivery / Sprint review
Sprint retrospective
Product Backlog Development
Goal achieved / money run down
![Page 19: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/19.jpg)
... in order to quickly generate business value and develop software that satisfies user needs.
EVERY ITERATION, WE HAVE AN INCREMENT OF WORKING SOFTWARE
![Page 20: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/20.jpg)
... in order to continuously improve both.
EACH ITERATION, WE REVIEW THE PRODUCT (WHAT WE BUILT) & THE PROCESS (HOW WE WORK)
![Page 21: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/21.jpg)
WATERFALL AGILE
REDUCING UNCERTAINTY
High Low
Hig
hLo
w
Means UncertaintyHow do we build it?
End
Unc
erta
inty
Wha
t do
we
build
?
High Low
Hig
hLo
w
Means UncertaintyHow do we build it?
End
Unc
erta
inty
Wha
t do
we
build
?
![Page 22: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/22.jpg)
Agile aims to enable “hyper productivity” through close collaboration, self-organization, empowerment and focussing of the team and the stakeholders
TEAM WORK TAKES THE CENTER STAGE IN AGILE
![Page 23: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/23.jpg)
➡ Peer to peer exchange of information➡ Collective learning➡ Collective responsibility (shared goal)
AGILE IS A PULL SYSTEM
![Page 24: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/24.jpg)
THE CURRENCY IN AGILE ISSHARED UNDERSTANDING
Shared understanding
Product Owner
Developer
DesignerTester
Scrum Master
![Page 25: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/25.jpg)
to improve efficiency & effectiveness➡ Keeping focus on (customer) value➡ Removing non valuable activities
(e.g. excessive documentation)➡ Optimizing the workflow & information flow to
achieve the shared goal➡ Attention to symptoms of overburden
(work with a sustainable pace)
LEAN THINKING
![Page 26: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/26.jpg)
➡ Communicate fast and light (sketching)➡ Work in small continuous iterations➡ Collaborate actively across roles/silos
(participatory design)
MERGING AGILE WITH UX DESIGN
![Page 27: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/27.jpg)
PARALLEL TRACKS, UX AHEAD OF DEVELOPMENT
UX research & ideation 3Collaborate on iteration 1
Refine design for iteration 2UX research & ideation 2
Refine design for iteration 1UX research & ideationCreate initial concepts
UX research & ideation 4Test iteration 1
Collaborate on iteration 2Refine design for iteration 3
Implement high dev low UI features Implement designs
Design 1b
Design 2b
Code
Test iteration 1 Provide input for iteration 4
Validate designProvide input for iteration 3
Validate designProvide input for iteration 2
Collaborate with designerProvide input for iteration 1-n
Customer data Customer data Customer data Customer data
Design 3b
Code
Design 1
Development environment setup
Design 2
Design 3
Iteration 0 Project initialisation
Iteration 1 Iteration 2Pre-project
Customer (Product Owner)
Designer
Developers
![Page 28: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/28.jpg)
THE ROLE OF DESIGN HAS CHANGED
![Page 29: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/29.jpg)
BESCHREIBUNG
AGILE ANTI-PATTERN:GENIUS DESIGN & THE "BIG REVEAL"
![Page 30: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/30.jpg)
DESIGNER'S ROLE IN AGILE: KEEPER OF THE VISION & FOREMOST FACILITATOR
Product Owner
UX Designer
UX Researcher
Developers
Customer Service Rep
Users
Visual Designer
![Page 31: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/31.jpg)
PROTOTYPING
![Page 32: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/32.jpg)
VISUALIZE AND SHARE CONCEPTS
![Page 33: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/33.jpg)
Ordered by visual & functional fidelity
MANY TOOLS AND APPROACHES FOR PROTOTYPING
Vis
ual F
idel
ity
Functional Fidelity
SketchPen & Paper
Interactive SketchesPaper Prototyping
Wireframe SketchPen & PaperBalsamiq
Interactive Wireframe SketchPaper PrototypingBalsamiq: Export to PDF or HTML
Proof of Concept PrototypeHTML (960 Grid System + JQuery)
"Clean" Wireframe / DiagramOmniGraffle
Interactive "Clean" WireframesAxure RP Pro
Rich Interactive "Clean" WireframesAxure RP Pro
Design CompPhotoshop or Illustrator
Interactive Design CompFireworks
"Production Ready" PrototypeHAML + SCSS + JQuery
Hybrid Wireframe / Design CompsOmnigraffle + Photoshop
![Page 34: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/34.jpg)
➡ Audience➡ Intent➡ Familiarity and learnability➡ Cost➡ Collaboration➡ Distribution➡ Throwaway versus reusable
CRITERIA FOR PICKING THE RIGHT TOOL
SOURCE: TODD ZAKI WARFEL (2009): PROTOTYPING - A PRACTITIONER'S GUIDE, NEW YORK: ROSENFELD MEDIA
![Page 35: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/35.jpg)
Fast, cheap Slow, expensive
Slo
w, e
xpen
sive
Speed & CostPROTOTYPING
Vis
ual F
idel
ity
Functional Fidelity
SketchPen & Paper
Interactive SketchesPaper Prototyping
Wireframe SketchPen & PaperBalsamiq
Interactive Wireframe SketchPaper PrototypingBalsamiq: Export to PDF or HTML
Proof of Concept PrototypeHTML (960 Grid System + JQuery)
"Clean" Wireframe / DiagramOmniGraffle
Interactive "Clean" WireframesOmniGraffle Pro
Rich Interactive "Clean" WireframesAxure RP Pro
Design CompsPhotoshop or Illustrator
Interactive Design CompsFireworks
"Production Ready" PrototypeHAML + SCSS + JQuery
Hybrid Wireframe / Design CompsOmnigraffle + Photoshop
![Page 36: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/36.jpg)
➡ Shared communication➡ Working through a design➡ Selling an idea to stakeholders➡ Validating design➡ Gauging technical feasibility and value
USES OF PROTOTYPES
![Page 37: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/37.jpg)
Different tools are suitable for different usesUSES OF PROTOTYPES
Vis
ual F
idel
ity
Functional Fidelity
Sketch Interactive Sketches
Wireframe Sketch Interactive Wireframe Sketch
Proof of Concept Prototype
"Clean" Wireframe / Diagram Interactive "Clean" Wireframes Rich Interactive "Clean" Wireframes
Design Comps Interactive Design Comps "Production Ready" Prototype
Hybrid Wireframe / Design Comps
Creating a shared communication”Is this what you meant?”
Working through a designDoes the system have all the features required?Which UX concept works best?
Working through a designDoes the workflow make sense at a high level?
Validating UX design direction with stakeholdersEvaluating the usability of proposed designs for new systems
Gauging technical feasibility and valueExploring isolated interactions as a proof-of-conceptSelling an idea to your boss or team membersValidating the implementation of requirements with stakeholders
Selling an idea to stakeholders
Communicating UI design / distributing design documentationSupplementing printed documentation for offsite development teams
Validating UX designPerforming usability tests with non-savvy user groupsEvaluating the usability of proposed UX designs for an existing systemPerforming remote testing
![Page 38: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/38.jpg)
SKETCHING
![Page 39: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/39.jpg)
➡ Sketchiness invites critique.➡ With unfilled "holes", interpretation is
necessary, which leads to new ideas.Opposite: High Fidelity➡ A High Fidelity UI Mockup says
"I'm full of finished, mature ideas".
SKETCHINESS
![Page 40: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/40.jpg)
Sketching is useful...➡ as research tool➡ for working through a concept➡ for working through a design (wireframe sketch)➡ as shared communication➡ for validating UX design direction
SKETCHING USES
![Page 41: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/41.jpg)
SKETCHING AS RESEARCH TOOL
![Page 42: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/42.jpg)
SKETCHING FOR WORKING THROUGH A CONCEPT
![Page 43: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/43.jpg)
SKETCHING WIREFRAMES FOR WORKING THROUGH A DESIGN
![Page 44: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/44.jpg)
SKETCHING AS SHARED COMMUNICATION
SKETCHES BY STEFANO VANOTTI
![Page 45: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/45.jpg)
SKETCHING FOR VALIDATING UX DESIGN DIRECTION
![Page 46: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/46.jpg)
“CLEAN” WIREFRAME
Both widgets need to be of the same height...
![Page 47: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/47.jpg)
DIAGRAMS
![Page 48: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/48.jpg)
INTERACTIVE "CLEAN" WIREFRAME
![Page 49: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/49.jpg)
HYBRID WIREFRAME / DESIGN COMP
![Page 50: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/50.jpg)
LIVE SITEDESIGN COMP BY OLIVIER HEITZ
DESIGN COMP WORKING SOFTWARE
HIGH FIDELITY PROTOTYPES
![Page 51: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/51.jpg)
SOFTWARE INCREMENT ON TESTING SERVERANNOTATED SKETCH OF A WIDGET
SKETCH WORKING SOFTWARE
CROSS-FUNCTIONAL PAIRING: INTERACTION DESIGNER + FRONTEND DEVELOPER
![Page 52: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/52.jpg)
Why is this cool?➡ The sketch showed just enough intent as a
basis for estimating effort and as a starting point for implementation.
➡ No time was wasted for a detailed written specification (which can be misinterpretated).
➡ We both learned from each other during pairing and got a deeper understanding of the feature.
➡ The prototype was available for testing on the test server “immediately”, allowing feedback from real users quickly.
FROM SKETCH TO WORKING PROTOTYPE
![Page 53: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/53.jpg)
Since they are relatively time-intensive / expensive, create HiFi prototypes only if necessary:➡ If your audience is the client, users or an
external development team➡ Selling an idea➡ Usability testing➡ Detailed design specifications
WHEN TO CREATEHIGH FIDELITY PROTOTYPES?
![Page 54: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/54.jpg)
➡ Building software is a creative process. ➡ Designers have good tools for creativity. ➡ Adapt & learn!
TAKE AWAYS FOR DEVELOPERS
![Page 55: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/55.jpg)
Recognize and accept the creative process of software development.➡ Yes, it's messy.➡ Yes, there is a "looping circularity".
It's how we learn and improve.➡ Take work-in-progress for what it is.
TAKE AWAYS FOR PRODUCT MANAGERS
![Page 56: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/56.jpg)
➡ Keep focused on value - the actual user experience
➡ Remove non valuable activities - e.g. excessive documentation
➡ Be pragmatic - use whatever gets the job done➡ Visualize and share your work - invite valuable
critique
TAKE AWAYS FOR DESIGNERS (1)
![Page 57: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/57.jpg)
➡ Get feedback often - ➡ catch glaring mistakes early,➡ foster shared understanding and ➡ collective ownership
➡ Every encounter is an opportunity to learn➡ Every encounter is an opportunity to hone your
skill in persuasion :-)
TAKE AWAYS FOR DESIGNERS (2)
![Page 58: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/58.jpg)
If no design framework was established up-front, you will have late iterations for consistency.
DRAWBACKS / LIMITATIONS
![Page 59: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/59.jpg)
➡ Rails team @ ZHdK➡ Team π @ Liip
TEAM THANKS
![Page 61: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/61.jpg)
- Bill Buxton (2007): Sketching User Experiences - Getting the design right and the right design. San Francisco: Morgan Kaufmann Publishers.
- Todd Zaki Warfel (2009): Prototyping - A Practitioner's Guide, New York: Rosenfeld Media
- Fred Beecher (2009): Integrating Prototyping Into Your Design Process - Using appropriate fidelity for the situation, http://www.boxesandarrows.com/view/integrating, last accessed 2012-09-05
- Jakub Linowski: Interactive Sketching Notation, http://www.linowski.ca/sketching, last accessed 2012-09-05
FURTHER READING & RESOURCES
![Page 62: Sketching, Wireframing, Prototyping - How to Be Agile and Avoid Half-Baked User Experience](https://reader034.vdocuments.site/reader034/viewer/2022051108/544679ffafaf9f59178b46a8/html5/thumbnails/62.jpg)
- Kim Goodwin (2009): Designing for the Digital Age: How to Create Human-Centered Products and Services, Indianapolis: Wiley.
- Jeff Gothelf (2011): Lean UX: Getting Out Of The Deliverables Business. http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/, last accessed on 2012-09-07
RESOURCES MENTIONED IN QUESTIONS & ANSWERS