paper to-prototype
TRANSCRIPT
![Page 1: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/1.jpg)
FROM PAPER TO PROTOTYPEAchieving a Lean and Iterative Design Process
Develop Denver08.07.2015
Monday, August 10, 15
![Page 2: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/2.jpg)
ABOUT MEAndrew Baker
Design TechnologistKarsh Hagan
Monday, August 10, 15
![Page 3: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/3.jpg)
Concept + Strategy
UX
Visual Design & Art Direction
DESIGN TECHNOLOGIST?
Prototyping
Front-End Development
Monday, August 10, 15
![Page 4: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/4.jpg)
WHY THE WEIRD TITLES?
Monday, August 10, 15
![Page 5: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/5.jpg)
WHY THE WEIRD TITLES?
1st developer
Monday, August 10, 15
![Page 6: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/6.jpg)
WHY THE WEIRD TITLES?
1st developer
2nd hire in interactive dept.
Monday, August 10, 15
![Page 7: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/7.jpg)
‘Alright Andrew, we’re a small team, so we may just have to figure shit out as we go. Lets make sure the user flow for this banner ad campaign is done by Friday’
1st DAY IN AGENCY LIFE
Monday, August 10, 15
![Page 8: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/8.jpg)
‘Alright Andrew, we’re a small team, so we may just have to figure shit out as we go. Lets make sure the user flow for this banner ad campaign is done by Friday’
1st DAY IN AGENCY LIFE
Monday, August 10, 15
![Page 9: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/9.jpg)
‘Alright Andrew, we’re a small team, so we may just have to figure shit out as we go. Lets make sure the user flow for this banner ad campaign is done by Friday’
1st DAY IN AGENCY LIFE
What is a user flow?
Monday, August 10, 15
![Page 10: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/10.jpg)
‘The landing page looks good...But after testing it looks like something may be happening to layout in IE6’
2nd WEEK.
Monday, August 10, 15
![Page 11: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/11.jpg)
‘The landing page looks good...But after testing it looks like something may be happening to layout in IE6’
2nd WEEK.
Monday, August 10, 15
![Page 12: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/12.jpg)
•Small, interdisciplinary teams
•Client transparency
•Technology and process agnostic*
•Figuring shit out
ALAS, WE HAVE COME A LONG WAY
Monday, August 10, 15
![Page 13: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/13.jpg)
SMALL INTERDISCIPLINARY TEAMS
Visual Designer
Lead Developer
Design TechnologistProject Manager
Experience PlannerAccount Strategist
Monday, August 10, 15
![Page 14: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/14.jpg)
depends on core requirements
OUR EVOLVING PROCESS
Client expectationsTimelineScope
Monday, August 10, 15
![Page 15: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/15.jpg)
Monday, August 10, 15
![Page 16: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/16.jpg)
A TRADITIONAL WATERFALL DESIGN PROCESS
Monday, August 10, 15
![Page 17: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/17.jpg)
meet plan work (in isolation)
SILOS OF EXPERTISE
UX spec Design comps Prototype/build
Monday, August 10, 15
![Page 18: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/18.jpg)
A LEAN DESIGN PROCESS
Monday, August 10, 15
![Page 19: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/19.jpg)
Phase 1: Discovery and Kickoff
• Research and interviews
• Requirements planning
• IA exercises (card sort)
• User flow
• Content Hierarchy
A LEAN DESIGN PROCESS
Monday, August 10, 15
![Page 20: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/20.jpg)
Monday, August 10, 15
![Page 21: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/21.jpg)
PHASE 1 (DISCOVERY) TOOLS & TEAM
Brand DocumentationPaperWhiteboard
Key StakeholdersFull Internal Team Users
Monday, August 10, 15
![Page 22: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/22.jpg)
Phase 2: UX Strategy and Design
• Detailed personas
• User/task flows (features, not pages)
• Wireframes
THE LEAN DESIGN PROCESS
Monday, August 10, 15
![Page 23: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/23.jpg)
Monday, August 10, 15
![Page 24: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/24.jpg)
PHASE 2 (UX) TOOLS & TEAM
KeynoteUX Tools*Illustrator
DesignerExperience Planner Technologist
*UX pin, Invision, Gliffy, Axure, Paper prototypesMonday, August 10, 15
![Page 25: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/25.jpg)
Phase 3: Art Direction and Initial Design
• Mood boards
• Primary page/view design
• Style Guide/UI Kit
THE LEAN DESIGN PROCESS
Monday, August 10, 15
![Page 26: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/26.jpg)
Monday, August 10, 15
![Page 27: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/27.jpg)
PHASE 3 (DESIGN) TOOLS & TEAM
PaperSketchIllustrator/Photoshop
Designer Technologist
Monday, August 10, 15
![Page 28: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/28.jpg)
Phase 3: Design and Build
• Build out front-end UI
• Use initial design comp/UI kit to guide styling
• Real Content
THE LEAN DESIGN PROCESS
Monday, August 10, 15
![Page 29: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/29.jpg)
Monday, August 10, 15
![Page 30: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/30.jpg)
PHASE 3 TOOLS & TEAM
Browser/Dev ToolsCodepenText Editor
DesignerLead Dev Technologist
Monday, August 10, 15
![Page 31: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/31.jpg)
Phase 4: QA and Deploy
• Cross-browser and device test
• Debug
• Deploy
THE LEAN DESIGN PROCESS
Monday, August 10, 15
![Page 32: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/32.jpg)
PHASE 4 (DEPLOY) TOOLS & TEAM
Google SheetsTrelloBrowserStack
Project Manager Technologist Lead Developer
Monday, August 10, 15
![Page 33: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/33.jpg)
Monday, August 10, 15
![Page 34: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/34.jpg)
WHEN NOT TO....
Monday, August 10, 15
![Page 35: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/35.jpg)
Client’s needs aren't suited
•large, bureaucratic approval process
•feature list in constant flux
•vision not well defined
WHEN NOT TO PUSH LEAN DESIGN
Monday, August 10, 15
![Page 36: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/36.jpg)
Client is highly visual
•highly polished design comps vs. working prototypes that may not have full visual realization
•feature list in constant flux
•vision not well defined
WHEN NOT TO....
Monday, August 10, 15
![Page 37: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/37.jpg)
Design is illustrative or textural
•Highly illustrative content will still be best achieved in Illustrator or similar tool
•Textures can be achieved in CSS but are difficult to realize without starting in a traditional design tool
WHEN NOT TO....
Monday, August 10, 15
![Page 38: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/38.jpg)
THE LEAN DESIGN ARGUMENT
Monday, August 10, 15
![Page 39: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/39.jpg)
Design vs. Code
Design & Code
Monday, August 10, 15
![Page 40: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/40.jpg)
DESIGN vs. CODE = FRAMEWORK PROLIFERATION
Monday, August 10, 15
![Page 41: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/41.jpg)
DESIGN VS CODE = BAD PRACTICE
Monday, August 10, 15
![Page 42: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/42.jpg)
DESIGN & CODE = MAGIC
Monday, August 10, 15
![Page 43: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/43.jpg)
THE REASONS
Monday, August 10, 15
![Page 44: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/44.jpg)
#1 - INTERACTIVITY
Monday, August 10, 15
![Page 45: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/45.jpg)
#2 - UI ANIMATION
Monday, August 10, 15
![Page 46: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/46.jpg)
#2 - ELASTIC ART BOARD
Monday, August 10, 15
![Page 47: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/47.jpg)
#3 - DESIGN SYSTEM THINKING
Monday, August 10, 15
![Page 48: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/48.jpg)
#4 - TYPOGRAPHY RENDERING
Monday, August 10, 15
![Page 49: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/49.jpg)
#5 - PROGRESS AND PRODUCTIVITY
Monday, August 10, 15
![Page 50: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/50.jpg)
#6 - TESTING YOUR DESIGNS
Monday, August 10, 15
![Page 51: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/51.jpg)
#7 - LESS DETAILED DOCUMENTATION
Monday, August 10, 15
![Page 52: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/52.jpg)
#7 - LESS DETAILED DOCUMENTATION
Monday, August 10, 15
![Page 53: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/53.jpg)
#8 - DESIGN WITH DATA
Monday, August 10, 15
![Page 54: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/54.jpg)
#9 - USER EXPERIENCE IS THE RESPONSIBILITY OF EVERYONE ON THE TEAM
Monday, August 10, 15
![Page 55: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/55.jpg)
THE TOOLS
Monday, August 10, 15
![Page 56: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/56.jpg)
TEXT EDITOR & BUILD TOOLS
Monday, August 10, 15
![Page 57: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/57.jpg)
CODEKIT
Monday, August 10, 15
![Page 58: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/58.jpg)
CODEPEN
Monday, August 10, 15
![Page 59: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/59.jpg)
FRAMER.JS
Monday, August 10, 15
![Page 60: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/60.jpg)
ATOMIC.IO
Monday, August 10, 15
![Page 61: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/61.jpg)
AFTER EFFECTS
Monday, August 10, 15
![Page 62: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/62.jpg)
KEY INSIGHTS
Monday, August 10, 15
![Page 63: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/63.jpg)
WE CAN SKETCH WITH TECHNOLOGY
Monday, August 10, 15
![Page 64: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/64.jpg)
WE CAN SKETCH WITH TECHNOLOGY
STATIC MOCKUPS DONT CUT IN ANYMORE
Monday, August 10, 15
![Page 65: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/65.jpg)
WE CAN SKETCH WITH TECHNOLOGY
STATIC MOCKUPS DONT CUT IN ANYMORE
CREATIVITY IS NOT A PRODUCT OF THE TOOL
Monday, August 10, 15
![Page 66: Paper to-prototype](https://reader036.vdocument.in/reader036/viewer/2022062523/58ed5e6f1a28abbf398b4697/html5/thumbnails/66.jpg)
THANK YOU
@agbbaker
andrewbaker
andrewgbaker
@agbbaker
Monday, August 10, 15