SlideShare a Scribd company logo
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

More Related Content

What's hot

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
Jens Hoffmann
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
Andrii 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 Design
Guy 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 Designers
Chris 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 Study
Ken 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 System
UXPA 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 Development
Henry Jacob
 
What the hype
What the hypeWhat the hype
What the hype
Željko Plesac
 
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
 
Projet Comet Adobe XD
Projet Comet Adobe XDProjet Comet Adobe XD
Projet Comet Adobe XD
Geoffrey Dorne
 
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
Thomas 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 design
Serena Doyle
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
Wenzhu Zou
 
Debdip's resume
Debdip's resumeDebdip's resume
Debdip's resume
DebdipBanerjee2
 
App concept schedule
App concept schedule App concept schedule
App concept schedule JohnLongworth
 
MSIB_Porto_Jonathan.pdf
MSIB_Porto_Jonathan.pdfMSIB_Porto_Jonathan.pdf
MSIB_Porto_Jonathan.pdf
NathanielJonathanFer
 
AR Prototyping Workshop
AR Prototyping WorkshopAR Prototyping Workshop
AR Prototyping Workshop
Brandon Schmittling
 

What's hot (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
 

Viewers also liked

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 Guide
Framebench
 
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
Rob 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-prototype
Andrew Baker
 
How to Visualize a Business
How to Visualize a BusinessHow to Visualize a Business
How to Visualize a Business
Business Innovation by Design
 
Low Fidelity Prototype
Low Fidelity PrototypeLow Fidelity Prototype
Low Fidelity Prototype
Negar Khalandi
 
St low fidelity prototype v2
St   low fidelity prototype v2St   low fidelity prototype v2
St low fidelity prototype v2
Luis Wong
 
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
Hyperdrive Agile Leadership (powered by Bratton & Company)
 
Practical Product Innovation - Sydney CTO Summit
Practical Product Innovation - Sydney CTO SummitPractical Product Innovation - Sydney CTO Summit
Practical Product Innovation - Sydney CTO Summit
Mike 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 University
Hans 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 Post
Arun 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 Science
Chris McQueen
 
Build Low Fidelity Wireframes
Build Low Fidelity WireframesBuild Low Fidelity Wireframes
Build Low Fidelity Wireframes
SV.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 Design
Hans Põldoja
 
Creating Low Fidelity Prototypes
Creating Low Fidelity PrototypesCreating Low Fidelity Prototypes
Creating Low Fidelity PrototypesValeria Gasik
 

Viewers also liked (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
 

Similar to 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 Android
Gabriel Bernardo Pereira
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping Workshop
NetSquared
 
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 earth
Grace 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*Pow
UIDesign Group
 
AI: Your Personal Intern
AI: Your Personal InternAI: Your Personal Intern
AI: Your Personal Intern
Joe Brinkman
 
Goto berlin 10-2014
Goto berlin 10-2014Goto berlin 10-2014
Goto berlin 10-2014
Courtney Hemphill
 
Full stack-web-design
Full stack-web-designFull stack-web-design
Full stack-web-design
Kevin Conboy
 
Integrated production agency
Integrated production agencyIntegrated production agency
Integrated production agency
Elena 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 Project
philipdurbin
 
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
Joshua Randall
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and Evaluation
Mark Billinghurst
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the Wild
Michele Ide-Smith
 
Parents
ParentsParents
Prodintec Design Area V040310
Prodintec Design Area V040310Prodintec Design Area V040310
Prodintec Design Area V040310
Victor Lopez Garcia
 
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
David Kay
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
Marcelo 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 Mockito
C4Media
 

Similar to 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
 

Recently uploaded

Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
VivekSinghShekhawat2
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
JeyaPerumal1
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
Arif0071
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
GTProductions1
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Brad Spiegel Macon GA
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
nirahealhty
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
Javier Lasa
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
Gal Baras
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
3ipehhoa
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
3ipehhoa
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
JungkooksNonexistent
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
laozhuseo02
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
Rogerio Filho
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
laozhuseo02
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 

Recently uploaded (20)

Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 

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