paper to-prototype
TRANSCRIPT
FROM PAPER TO PROTOTYPEAchieving a Lean and Iterative Design Process
Develop Denver08.07.2015
Monday, August 10, 15
ABOUT MEAndrew Baker
Design TechnologistKarsh Hagan
Monday, August 10, 15
Concept + Strategy
UX
Visual Design & Art Direction
DESIGN TECHNOLOGIST?
Prototyping
Front-End Development
Monday, August 10, 15
WHY THE WEIRD TITLES?
Monday, August 10, 15
WHY THE WEIRD TITLES?
1st developer
Monday, August 10, 15
WHY THE WEIRD TITLES?
1st developer
2nd hire in interactive dept.
Monday, August 10, 15
‘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
‘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
‘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
‘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
‘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
•Small, interdisciplinary teams
•Client transparency
•Technology and process agnostic*
•Figuring shit out
ALAS, WE HAVE COME A LONG WAY
Monday, August 10, 15
SMALL INTERDISCIPLINARY TEAMS
Visual Designer
Lead Developer
Design TechnologistProject Manager
Experience PlannerAccount Strategist
Monday, August 10, 15
depends on core requirements
OUR EVOLVING PROCESS
Client expectationsTimelineScope
Monday, August 10, 15
Monday, August 10, 15
A TRADITIONAL WATERFALL DESIGN PROCESS
Monday, August 10, 15
meet plan work (in isolation)
SILOS OF EXPERTISE
UX spec Design comps Prototype/build
Monday, August 10, 15
A LEAN DESIGN PROCESS
Monday, August 10, 15
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
Monday, August 10, 15
PHASE 1 (DISCOVERY) TOOLS & TEAM
Brand DocumentationPaperWhiteboard
Key StakeholdersFull Internal Team Users
Monday, August 10, 15
Phase 2: UX Strategy and Design
• Detailed personas
• User/task flows (features, not pages)
• Wireframes
THE LEAN DESIGN PROCESS
Monday, August 10, 15
Monday, August 10, 15
PHASE 2 (UX) TOOLS & TEAM
KeynoteUX Tools*Illustrator
DesignerExperience Planner Technologist
*UX pin, Invision, Gliffy, Axure, Paper prototypesMonday, August 10, 15
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
Monday, August 10, 15
PHASE 3 (DESIGN) TOOLS & TEAM
PaperSketchIllustrator/Photoshop
Designer Technologist
Monday, August 10, 15
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
Monday, August 10, 15
PHASE 3 TOOLS & TEAM
Browser/Dev ToolsCodepenText Editor
DesignerLead Dev Technologist
Monday, August 10, 15
Phase 4: QA and Deploy
• Cross-browser and device test
• Debug
• Deploy
THE LEAN DESIGN PROCESS
Monday, August 10, 15
PHASE 4 (DEPLOY) TOOLS & TEAM
Google SheetsTrelloBrowserStack
Project Manager Technologist Lead Developer
Monday, August 10, 15
Monday, August 10, 15
WHEN NOT TO....
Monday, August 10, 15
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
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
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
THE LEAN DESIGN ARGUMENT
Monday, August 10, 15
Design vs. Code
Design & Code
Monday, August 10, 15
DESIGN vs. CODE = FRAMEWORK PROLIFERATION
Monday, August 10, 15
DESIGN VS CODE = BAD PRACTICE
Monday, August 10, 15
DESIGN & CODE = MAGIC
Monday, August 10, 15
THE REASONS
Monday, August 10, 15
#1 - INTERACTIVITY
Monday, August 10, 15
#2 - UI ANIMATION
Monday, August 10, 15
#2 - ELASTIC ART BOARD
Monday, August 10, 15
#3 - DESIGN SYSTEM THINKING
Monday, August 10, 15
#4 - TYPOGRAPHY RENDERING
Monday, August 10, 15
#5 - PROGRESS AND PRODUCTIVITY
Monday, August 10, 15
#6 - TESTING YOUR DESIGNS
Monday, August 10, 15
#7 - LESS DETAILED DOCUMENTATION
Monday, August 10, 15
#7 - LESS DETAILED DOCUMENTATION
Monday, August 10, 15
#8 - DESIGN WITH DATA
Monday, August 10, 15
#9 - USER EXPERIENCE IS THE RESPONSIBILITY OF EVERYONE ON THE TEAM
Monday, August 10, 15
THE TOOLS
Monday, August 10, 15
TEXT EDITOR & BUILD TOOLS
Monday, August 10, 15
CODEKIT
Monday, August 10, 15
CODEPEN
Monday, August 10, 15
FRAMER.JS
Monday, August 10, 15
ATOMIC.IO
Monday, August 10, 15
AFTER EFFECTS
Monday, August 10, 15
KEY INSIGHTS
Monday, August 10, 15
WE CAN SKETCH WITH TECHNOLOGY
Monday, August 10, 15
WE CAN SKETCH WITH TECHNOLOGY
STATIC MOCKUPS DONT CUT IN ANYMORE
Monday, August 10, 15
WE CAN SKETCH WITH TECHNOLOGY
STATIC MOCKUPS DONT CUT IN ANYMORE
CREATIVITY IS NOT A PRODUCT OF THE TOOL
Monday, August 10, 15
THANK YOU
@agbbaker
andrewbaker
andrewgbaker
@agbbaker
Monday, August 10, 15