SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
Studio XID

Exceptionally Intelligent Design
Lean Prototyping:
Prototyping for
Lean UX Process
Jan 23rd, Tony Kim
studioXID all right reserved 2015copyright C
Tony Kim, 김수
2
• Studio XID 

CEO, Captain Design
• Google 

Interaction Designer
• Naver China

UX Manager

• KAIST

Industrial Design
studioXID all right reserved 2015copyright C
What I have done…
3
2006 2007 2008 2009 2010 2011 2012 2013 2014
Researcher Designer Captain
studioXID all right reserved 2015copyright C4
Original source: http://disney.wikia.com/wiki/Captain_America/Gallery
Captain Design
Prototype
studioXID all right reserved 2015copyright C
Sort of Prototype
• Fidelity: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• Working: Static vs. Working (Interactive)

• Consumption: Throwaway vs. Evolutionary

• Object: Behavioral (Skin) vs. Structural (Bone)
6
studioXID all right reserved 2015copyright C
Comparison with other
deliverables
7 Source: http://grahamtodman.co.uk/blog/category/sketches/
Sketch
studioXID all right reserved 2015copyright C
Comparison with other
deliverables
8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php
Wireframe
studioXID all right reserved 2015copyright C
Comparison with other
deliverables
9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/
Storyboard
studioXID all right reserved 2015copyright C
Comparison with other
deliverables
10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php
Mockup, Design
studioXID all right reserved 2015copyright C
Prototype on UX process
• Fidelity: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• Working: Static vs. Working (Interactive)

• Consumption: Throwaway vs. Evolutionary

• Object: Behavioral (Skin) vs. Structural (Bone)
12
Welcome to 

Lean UX world!
studioXID all right reserved 2015copyright C
Lean UX Process
14 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/
studioXID all right reserved 2015copyright C
Lean UX Process
15 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
studioXID all right reserved 2015copyright C
Lean vs. Waterfall
16 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/
studioXID all right reserved 2015copyright C
Everyone goes to Lean!
17
Lean Waterfall
Source: Result from 1:1 interviews on June, July in 2014
studioXID all right reserved 2015copyright C
Deliverable on Lean UX
18 Source: Result from 1:1 interviews on June, July in 2014
“We don’t make
wireframes at all.”
studioXID all right reserved 2015copyright C
Deliverables at Google
19
Concept definition

Feature definition

User scenario

Wireframe

Mockup

Prototype
PM
Designer
Planner, 

IxD
VisD
studioXID all right reserved 2015copyright C
Deliverables at Google
20
Sketch

(Lo-Fi)
Mockup

(Hi-Fi)
Prototype

(Hi-Fi)
studioXID all right reserved 2015copyright C
Deliverables at Google
22
studioXID all right reserved 2015copyright C
Project scope at Google
23 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
studioXID all right reserved 2015copyright C
Prototype at Google
• Prototype for One-bit feature
• Support Collaboration
• Communication Media

• Internal Comm.

• Feedback from customers
24
Issues on Prototyping
studioXID all right reserved 2015copyright C
Design Paradigm shifts…
26
Page base
Interaction
Object base
Interaction
Sensor aid
Interaction
• By Apple
• Page transition
• Page level hierarchy
• By Google
• Layer concept
• Z-index
• By Facebook
• Contextual input
• Sensor signal
Clear
Interaction

= Selling Point
Facebook Paper
Interaction

= Identity
Microinteraction

= Differentiation
Facebook Paper
studioXID all right reserved 2015copyright C
Hard to explain on 2D
30 Source: Wireframe for Naver Japanese dictionary handwriting feature
studioXID all right reserved 2015copyright C
Any Solution? Prototype!
• “86% of designers feel it is more difficult to
design interaction than user interface.”*

• Any Tools?
31 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008
studioXID all right reserved 2015copyright C
Prototyping Tools
32
Limited
Interactions
Sophisticated
Interactions
Sensor aid
Interactions
Wireframing Tool Prototyping Tool
Communication Tool
studioXID all right reserved 2015copyright C
Origami
33 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
studioXID all right reserved 2015copyright C
Framer
34 Source: http://framerjs.com/static/images/home/ss-framer.jpg
studioXID all right reserved 2015copyright C
Pixate
35 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
SNAP
Closed Beta: April, 2015
TIPS for Prototyping
studioXID all right reserved 2015copyright C
Anatomy of Interaction
38 Source: http://microinteractions.com/what-is-a-microinteraction/
studioXID all right reserved 2015copyright C39 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf
studioXID all right reserved 2015copyright C
Heart of Smooth Movement:
Acceleration
40 Source: http://cubic-bezier.com/
Recap
studioXID all right reserved 2015copyright C
How to do Lean Prototyping
• One-bite project 

• Forget documentation. Draw it. Make it.

• Prototype by yourself, then Share with others.

• Start roughly, then Do more iterations until Perfect.

• Choose a tool, which support Mid-Fi & Hi-Fi. 

(or, 1 Graphic tool + 1 Prototyping tool)

• Anatomy of Interaction
42
谢谢。
Tony Kim | CEO, Caption Design of Studio XID | tony.kim@studioxid.com

Weitere ähnliche Inhalte

Was ist angesagt?

UX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMSUX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMSJens Hoffmann
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axureAndrii Rusakov
 
A Brief Introduction to Design Hacking + Generative Design
A Brief Introduction to Design Hacking + Generative DesignA Brief Introduction to Design Hacking + Generative Design
A Brief Introduction to Design Hacking + Generative DesignGuy Haviv
 
Prototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersPrototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersChris Griffith
 
Consistency vs Flexibility in Design Systems : A GE Case Study
Consistency vs Flexibility in Design Systems : A GE Case StudyConsistency vs Flexibility in Design Systems : A GE Case Study
Consistency vs Flexibility in Design Systems : A GE Case StudyKen Skistimas
 
Evaluative commentary part 5
Evaluative commentary part 5Evaluative commentary part 5
Evaluative commentary part 5antonie22
 
Purpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language SystemPurpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language SystemUXPA Boston
 
Nascent tawkon ux design process
Nascent   tawkon ux design processNascent   tawkon ux design process
Nascent tawkon ux design processnascent
 
Design Driven Development
Design Driven DevelopmentDesign Driven Development
Design Driven DevelopmentHenry Jacob
 
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing NorthernUX
 
High Fidelity UI Prototyping - Because JPG Attachments S*ck
High Fidelity UI Prototyping - Because JPG Attachments S*ckHigh Fidelity UI Prototyping - Because JPG Attachments S*ck
High Fidelity UI Prototyping - Because JPG Attachments S*ckThomas Fogarasy
 
Improve UX with proactive and reactive design
Improve UX with proactive and reactive designImprove UX with proactive and reactive design
Improve UX with proactive and reactive designSerena Doyle
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu ZouWenzhu Zou
 
App concept schedule
App concept schedule App concept schedule
App concept schedule JohnLongworth
 

Was ist angesagt? (19)

UX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMSUX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMS
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
 
A Brief Introduction to Design Hacking + Generative Design
A Brief Introduction to Design Hacking + Generative DesignA Brief Introduction to Design Hacking + Generative Design
A Brief Introduction to Design Hacking + Generative Design
 
Prototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersPrototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for Designers
 
Consistency vs Flexibility in Design Systems : A GE Case Study
Consistency vs Flexibility in Design Systems : A GE Case StudyConsistency vs Flexibility in Design Systems : A GE Case Study
Consistency vs Flexibility in Design Systems : A GE Case Study
 
Evaluative commentary part 5
Evaluative commentary part 5Evaluative commentary part 5
Evaluative commentary part 5
 
Purpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language SystemPurpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language System
 
Nascent tawkon ux design process
Nascent   tawkon ux design processNascent   tawkon ux design process
Nascent tawkon ux design process
 
Design Driven Development
Design Driven DevelopmentDesign Driven Development
Design Driven Development
 
What the hype
What the hypeWhat the hype
What the hype
 
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
 
Projet Comet Adobe XD
Projet Comet Adobe XDProjet Comet Adobe XD
Projet Comet Adobe XD
 
High Fidelity UI Prototyping - Because JPG Attachments S*ck
High Fidelity UI Prototyping - Because JPG Attachments S*ckHigh Fidelity UI Prototyping - Because JPG Attachments S*ck
High Fidelity UI Prototyping - Because JPG Attachments S*ck
 
Improve UX with proactive and reactive design
Improve UX with proactive and reactive designImprove UX with proactive and reactive design
Improve UX with proactive and reactive design
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
 
Debdip's resume
Debdip's resumeDebdip's resume
Debdip's resume
 
App concept schedule
App concept schedule App concept schedule
App concept schedule
 
MSIB_Porto_Jonathan.pdf
MSIB_Porto_Jonathan.pdfMSIB_Porto_Jonathan.pdf
MSIB_Porto_Jonathan.pdf
 
AR Prototyping Workshop
AR Prototyping WorkshopAR Prototyping Workshop
AR Prototyping Workshop
 

Andere mochten auch

Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneursAmir Khella
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideFramebench
 
Sketching UX: Low-Fidelity Method; High-Fidelity Results
Sketching UX: Low-Fidelity Method; High-Fidelity ResultsSketching UX: Low-Fidelity Method; High-Fidelity Results
Sketching UX: Low-Fidelity Method; High-Fidelity ResultsRob Fitzgibbon
 
Write awesome personalized donor thank you emails using GlobalGiving and Face...
Write awesome personalized donor thank you emails using GlobalGiving and Face...Write awesome personalized donor thank you emails using GlobalGiving and Face...
Write awesome personalized donor thank you emails using GlobalGiving and Face...Marc Maxson / GlobalGiving
 
Paper to-prototype
Paper to-prototypePaper to-prototype
Paper to-prototypeAndrew Baker
 
Low Fidelity Prototype
Low Fidelity PrototypeLow Fidelity Prototype
Low Fidelity PrototypeNegar Khalandi
 
St low fidelity prototype v2
St   low fidelity prototype v2St   low fidelity prototype v2
St low fidelity prototype v2Luis Wong
 
Practical Product Innovation - Sydney CTO Summit
Practical Product Innovation - Sydney CTO SummitPractical Product Innovation - Sydney CTO Summit
Practical Product Innovation - Sydney CTO SummitMike Biggs GAICD
 
Blog-based courses in higher education: experience from Tallinn University
Blog-based courses in higher education: experience from Tallinn UniversityBlog-based courses in higher education: experience from Tallinn University
Blog-based courses in higher education: experience from Tallinn UniversityHans Põldoja
 
Design Thinking in Praxis - Future of Digital Festival- General Assembly with...
Design Thinking in Praxis - Future of Digital Festival- General Assembly with...Design Thinking in Praxis - Future of Digital Festival- General Assembly with...
Design Thinking in Praxis - Future of Digital Festival- General Assembly with...Mike Biggs GAICD
 
Open Source Thinking Tools in Digital Product Design- VIBE WIRE
Open Source Thinking Tools in Digital Product Design- VIBE WIRE Open Source Thinking Tools in Digital Product Design- VIBE WIRE
Open Source Thinking Tools in Digital Product Design- VIBE WIRE Mike Biggs GAICD
 
How To Write An Awesome Blog Post
How To Write An Awesome Blog PostHow To Write An Awesome Blog Post
How To Write An Awesome Blog PostArun Basil Lal
 
Paper to prototype, or.... How I learned to stop worrying and love Science
Paper to prototype, or.... How I learned to stop worrying and love SciencePaper to prototype, or.... How I learned to stop worrying and love Science
Paper to prototype, or.... How I learned to stop worrying and love ScienceChris McQueen
 
Build Low Fidelity Wireframes
Build Low Fidelity WireframesBuild Low Fidelity Wireframes
Build Low Fidelity WireframesSV.CO
 
John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...
John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...
John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...Startup AddVenture by CCC Startups
 
Personas in Interaction Design
Personas in Interaction DesignPersonas in Interaction Design
Personas in Interaction DesignHans Põldoja
 
Creating Low Fidelity Prototypes
Creating Low Fidelity PrototypesCreating Low Fidelity Prototypes
Creating Low Fidelity PrototypesValeria Gasik
 

Andere mochten auch (20)

Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
GBL
GBLGBL
GBL
 
Sketching UX: Low-Fidelity Method; High-Fidelity Results
Sketching UX: Low-Fidelity Method; High-Fidelity ResultsSketching UX: Low-Fidelity Method; High-Fidelity Results
Sketching UX: Low-Fidelity Method; High-Fidelity Results
 
Write awesome personalized donor thank you emails using GlobalGiving and Face...
Write awesome personalized donor thank you emails using GlobalGiving and Face...Write awesome personalized donor thank you emails using GlobalGiving and Face...
Write awesome personalized donor thank you emails using GlobalGiving and Face...
 
Paper to-prototype
Paper to-prototypePaper to-prototype
Paper to-prototype
 
How to Visualize a Business
How to Visualize a BusinessHow to Visualize a Business
How to Visualize a Business
 
Low Fidelity Prototype
Low Fidelity PrototypeLow Fidelity Prototype
Low Fidelity Prototype
 
St low fidelity prototype v2
St   low fidelity prototype v2St   low fidelity prototype v2
St low fidelity prototype v2
 
AgileCamp Silicon Valley 2015: One Dollar Prototype
AgileCamp Silicon Valley 2015: One Dollar PrototypeAgileCamp Silicon Valley 2015: One Dollar Prototype
AgileCamp Silicon Valley 2015: One Dollar Prototype
 
Practical Product Innovation - Sydney CTO Summit
Practical Product Innovation - Sydney CTO SummitPractical Product Innovation - Sydney CTO Summit
Practical Product Innovation - Sydney CTO Summit
 
Blog-based courses in higher education: experience from Tallinn University
Blog-based courses in higher education: experience from Tallinn UniversityBlog-based courses in higher education: experience from Tallinn University
Blog-based courses in higher education: experience from Tallinn University
 
Design Thinking in Praxis - Future of Digital Festival- General Assembly with...
Design Thinking in Praxis - Future of Digital Festival- General Assembly with...Design Thinking in Praxis - Future of Digital Festival- General Assembly with...
Design Thinking in Praxis - Future of Digital Festival- General Assembly with...
 
Open Source Thinking Tools in Digital Product Design- VIBE WIRE
Open Source Thinking Tools in Digital Product Design- VIBE WIRE Open Source Thinking Tools in Digital Product Design- VIBE WIRE
Open Source Thinking Tools in Digital Product Design- VIBE WIRE
 
How To Write An Awesome Blog Post
How To Write An Awesome Blog PostHow To Write An Awesome Blog Post
How To Write An Awesome Blog Post
 
Paper to prototype, or.... How I learned to stop worrying and love Science
Paper to prototype, or.... How I learned to stop worrying and love SciencePaper to prototype, or.... How I learned to stop worrying and love Science
Paper to prototype, or.... How I learned to stop worrying and love Science
 
Build Low Fidelity Wireframes
Build Low Fidelity WireframesBuild Low Fidelity Wireframes
Build Low Fidelity Wireframes
 
John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...
John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...
John Biggs - How to Get the Word Out About Your Product - Startup AddVenture ...
 
Personas in Interaction Design
Personas in Interaction DesignPersonas in Interaction Design
Personas in Interaction Design
 
Creating Low Fidelity Prototypes
Creating Low Fidelity PrototypesCreating Low Fidelity Prototypes
Creating Low Fidelity Prototypes
 

Ähnlich wie Lean prototyping - Talk @ Alibaba UED

Exploring Google Gemini AI SDK for Android
Exploring Google Gemini AI SDK for AndroidExploring Google Gemini AI SDK for Android
Exploring Google Gemini AI SDK for AndroidGabriel Bernardo Pereira
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopNetSquared
 
Designing Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFDesigning Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFBoris Friedrich Milkowski
 
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earthPittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earthGrace Jansen
 
IDEO Product Development Presentation Team 4_Final
IDEO Product Development Presentation Team 4_FinalIDEO Product Development Presentation Team 4_Final
IDEO Product Development Presentation Team 4_FinalKaren He
 
Prototyping For Early Validation by Michael Hawley, Mad*Pow
Prototyping For Early Validation by Michael Hawley, Mad*PowPrototyping For Early Validation by Michael Hawley, Mad*Pow
Prototyping For Early Validation by Michael Hawley, Mad*PowUIDesign Group
 
AI: Your Personal Intern
AI: Your Personal InternAI: Your Personal Intern
AI: Your Personal InternJoe Brinkman
 
Full stack-web-design
Full stack-web-designFull stack-web-design
Full stack-web-designKevin Conboy
 
Integrated production agency
Integrated production agencyIntegrated production agency
Integrated production agencyElena Robinson
 
How to Run a Successful Open Source Java EE Project
How to Run a Successful Open Source Java EE ProjectHow to Run a Successful Open Source Java EE Project
How to Run a Successful Open Source Java EE Projectphilipdurbin
 
24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, Ugly24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, UglyJoshua Randall
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationMark Billinghurst
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the WildMichele Ide-Smith
 
Drag and Drop UI Development with React Native
Drag and Drop UI Development with React NativeDrag and Drop UI Development with React Native
Drag and Drop UI Development with React NativeDavid Kay
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototypingMarcelo Graciolli
 
CI/CD: Lessons from LinkedIn and Mockito
CI/CD: Lessons from LinkedIn and MockitoCI/CD: Lessons from LinkedIn and Mockito
CI/CD: Lessons from LinkedIn and MockitoC4Media
 

Ähnlich wie Lean prototyping - Talk @ Alibaba UED (20)

Exploring Google Gemini AI SDK for Android
Exploring Google Gemini AI SDK for AndroidExploring Google Gemini AI SDK for Android
Exploring Google Gemini AI SDK for Android
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping Workshop
 
Agile Ucd
Agile UcdAgile Ucd
Agile Ucd
 
Designing Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFDesigning Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SF
 
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earthPittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
 
IDEO Product Development Presentation Team 4_Final
IDEO Product Development Presentation Team 4_FinalIDEO Product Development Presentation Team 4_Final
IDEO Product Development Presentation Team 4_Final
 
Prototyping For Early Validation by Michael Hawley, Mad*Pow
Prototyping For Early Validation by Michael Hawley, Mad*PowPrototyping For Early Validation by Michael Hawley, Mad*Pow
Prototyping For Early Validation by Michael Hawley, Mad*Pow
 
AI: Your Personal Intern
AI: Your Personal InternAI: Your Personal Intern
AI: Your Personal Intern
 
Goto berlin 10-2014
Goto berlin 10-2014Goto berlin 10-2014
Goto berlin 10-2014
 
Full stack-web-design
Full stack-web-designFull stack-web-design
Full stack-web-design
 
Integrated production agency
Integrated production agencyIntegrated production agency
Integrated production agency
 
How to Run a Successful Open Source Java EE Project
How to Run a Successful Open Source Java EE ProjectHow to Run a Successful Open Source Java EE Project
How to Run a Successful Open Source Java EE Project
 
24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, Ugly24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, Ugly
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and Evaluation
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the Wild
 
Parents
ParentsParents
Parents
 
Prodintec Design Area V040310
Prodintec Design Area V040310Prodintec Design Area V040310
Prodintec Design Area V040310
 
Drag and Drop UI Development with React Native
Drag and Drop UI Development with React NativeDrag and Drop UI Development with React Native
Drag and Drop UI Development with React Native
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
CI/CD: Lessons from LinkedIn and Mockito
CI/CD: Lessons from LinkedIn and MockitoCI/CD: Lessons from LinkedIn and Mockito
CI/CD: Lessons from LinkedIn and Mockito
 

Kürzlich hochgeladen

Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 

Kürzlich hochgeladen (17)

Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 

Lean prototyping - Talk @ Alibaba UED

  • 1. Studio XID Exceptionally Intelligent Design Lean Prototyping: Prototyping for Lean UX Process Jan 23rd, Tony Kim
  • 2. studioXID all right reserved 2015copyright C Tony Kim, 김수 2 • Studio XID 
 CEO, Captain Design • Google 
 Interaction Designer • Naver China
 UX Manager • KAIST
 Industrial Design
  • 3. studioXID all right reserved 2015copyright C What I have done… 3 2006 2007 2008 2009 2010 2011 2012 2013 2014 Researcher Designer Captain
  • 4. studioXID all right reserved 2015copyright C4 Original source: http://disney.wikia.com/wiki/Captain_America/Gallery Captain Design
  • 6. studioXID all right reserved 2015copyright C Sort of Prototype • Fidelity: Lo-Fi vs. Mid-Fi vs. Hi-Fi • Working: Static vs. Working (Interactive) • Consumption: Throwaway vs. Evolutionary • Object: Behavioral (Skin) vs. Structural (Bone) 6
  • 7. studioXID all right reserved 2015copyright C Comparison with other deliverables 7 Source: http://grahamtodman.co.uk/blog/category/sketches/ Sketch
  • 8. studioXID all right reserved 2015copyright C Comparison with other deliverables 8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php Wireframe
  • 9. studioXID all right reserved 2015copyright C Comparison with other deliverables 9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/ Storyboard
  • 10. studioXID all right reserved 2015copyright C Comparison with other deliverables 10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php Mockup, Design
  • 11.
  • 12. studioXID all right reserved 2015copyright C Prototype on UX process • Fidelity: Lo-Fi vs. Mid-Fi vs. Hi-Fi • Working: Static vs. Working (Interactive) • Consumption: Throwaway vs. Evolutionary • Object: Behavioral (Skin) vs. Structural (Bone) 12
  • 13. Welcome to Lean UX world!
  • 14. studioXID all right reserved 2015copyright C Lean UX Process 14 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/
  • 15. studioXID all right reserved 2015copyright C Lean UX Process 15 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
  • 16. studioXID all right reserved 2015copyright C Lean vs. Waterfall 16 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/
  • 17. studioXID all right reserved 2015copyright C Everyone goes to Lean! 17 Lean Waterfall Source: Result from 1:1 interviews on June, July in 2014
  • 18. studioXID all right reserved 2015copyright C Deliverable on Lean UX 18 Source: Result from 1:1 interviews on June, July in 2014 “We don’t make wireframes at all.”
  • 19. studioXID all right reserved 2015copyright C Deliverables at Google 19 Concept definition Feature definition User scenario Wireframe Mockup Prototype PM Designer Planner, IxD VisD
  • 20. studioXID all right reserved 2015copyright C Deliverables at Google 20 Sketch (Lo-Fi) Mockup (Hi-Fi) Prototype (Hi-Fi)
  • 21.
  • 22. studioXID all right reserved 2015copyright C Deliverables at Google 22
  • 23. studioXID all right reserved 2015copyright C Project scope at Google 23 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
  • 24. studioXID all right reserved 2015copyright C Prototype at Google • Prototype for One-bit feature • Support Collaboration • Communication Media • Internal Comm. • Feedback from customers 24
  • 26. studioXID all right reserved 2015copyright C Design Paradigm shifts… 26 Page base Interaction Object base Interaction Sensor aid Interaction • By Apple • Page transition • Page level hierarchy • By Google • Layer concept • Z-index • By Facebook • Contextual input • Sensor signal
  • 30. studioXID all right reserved 2015copyright C Hard to explain on 2D 30 Source: Wireframe for Naver Japanese dictionary handwriting feature
  • 31. studioXID all right reserved 2015copyright C Any Solution? Prototype! • “86% of designers feel it is more difficult to design interaction than user interface.”* • Any Tools? 31 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008
  • 32. studioXID all right reserved 2015copyright C Prototyping Tools 32 Limited Interactions Sophisticated Interactions Sensor aid Interactions Wireframing Tool Prototyping Tool Communication Tool
  • 33. studioXID all right reserved 2015copyright C Origami 33 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
  • 34. studioXID all right reserved 2015copyright C Framer 34 Source: http://framerjs.com/static/images/home/ss-framer.jpg
  • 35. studioXID all right reserved 2015copyright C Pixate 35 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
  • 38. studioXID all right reserved 2015copyright C Anatomy of Interaction 38 Source: http://microinteractions.com/what-is-a-microinteraction/
  • 39. studioXID all right reserved 2015copyright C39 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf
  • 40. studioXID all right reserved 2015copyright C Heart of Smooth Movement: Acceleration 40 Source: http://cubic-bezier.com/
  • 41. Recap
  • 42. studioXID all right reserved 2015copyright C How to do Lean Prototyping • One-bite project • Forget documentation. Draw it. Make it. • Prototype by yourself, then Share with others. • Start roughly, then Do more iterations until Perfect. • Choose a tool, which support Mid-Fi & Hi-Fi. 
 (or, 1 Graphic tool + 1 Prototyping tool) • Anatomy of Interaction 42
  • 43. 谢谢。 Tony Kim | CEO, Caption Design of Studio XID | tony.kim@studioxid.com