SlideShare ist ein Scribd-Unternehmen logo
1 von 76
Downloaden Sie, um offline zu lesen
@zoe_guiraudon
INTRO TO WIREFRAMING
AND PROTOTYPING
GENERAL ASSAMBLY @ GOOGLE CAMPUS
@zoe_guiraudon
@zoe_guiraudon
WHAT WILL YOU LEARN TODAY
INTRO TO UX WIREFRAMING PROTOTYPING
@zoe_guiraudon
WHO THE HELL IS SHE?
Zoe Guiraudon
www.zoeguiraudon.com
UX Designer at 100 Shapes
TA at General Assembly
@zoe_guiraudon
MY UX JOURNEY
Finished Uni
Yay!
Continue
Working In
Social Media
Found out
about GA
Al lot of ups and downs
but it was all worth it!
My GA
Experience
I Need a career
change!!!
Teaching
at GA
100 Shapes
ITV
Project
@zoe_guiraudon
INTRO TO USER EXPERIENCE DESIGN
WHAT IS
USER EXPERIENCE?
WHAT IS USER EXPERIENCE?
WE INTERACT WITH PRODUCTS, BOTH DIGITAL AND
PHYSICAL.
WE TRY TO ACCOMPLISH GOALS WHEN USING THESE
PRODUCTS. THIS LEADS US TO HAVING A USER
EXPERIENCE.
WHAT IS USER EXPERIENCE?
JESSE JAMES GARRET
“Experience design is the design
of anything independent of
medium, or across media, with
human experience as an explicit
outcome and human
engagement as an explicit goal.”
WHAT IS USER EXPERIENCE?
DONALD NORMAN
“User experience
encompasses all aspects of
the end-user’s interaction
with the company, its
services, and its products.”
WHAT IS USER EXPERIENCE?
THERE ARE SOME PRODUCTS THAT WE USE DAILY THAT
ARE POORLY DESIGNED AND OFTEN PROVIDE POOR
EXPERIENCES.
CLASS TITLE
TODAY’S CLASSWHAT IS USER EXPERIENCE?
EVERYDAY UX
WHAT IS USER EXPERIENCE?
HAVE A THINK - WHAT WAS THE EXPERIENCE LIKE
COMING TO THIS TALK?
• Transport
• Restaurants/coffee shops
• Architecture
• Sign posting
• Did you use any apps to guide you here?
WHAT IS USER EXPERIENCE?
CAN YOU THINK OF ANY
EXAMPLES OF GOOD OR
BAD EXPERIENCES?
UX COMES FROM PSYCHOLOGY
Thinking
Feeling
Instinct
UX COMES FROM PSYCHOLOGY
INTRO TO USER EXPERIENCE DESIGN
HOW DO WE “DESIGN”
THE USER EXPERIENCE?
DESIGNING THE USER EXPERIENCE
WHAT MOST PEOPLE THINK UX IS
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organising, and presenting statistics
Documentation of personas and findings
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information Architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copy writing
Presentation and speaking
Working tightly with programmers
Brainstorm coordination
Company culture evangelism
Communication to stakeholders
helloerik.com/ux-is-not-ui
DESIGNING THE USER EXPERIENCE
WHAT UX ACTUALLY IS
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organising, and presenting statistics
Documentation of personas and findings
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information Architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copy writing
Presentation and speaking
Working tightly with programmers
Brainstorm coordination
Company culture evangelism
Communication to stakeholders
helloerik.com/ux-is-not-ui
DESIGNING THE USER EXPERIENCE
THE FIELD OF USER EXPERIENCE IS CONCERNED WITH
IDENTIFYING A REAL-WORLD PROBLEM AND USING
DESIGN TO ATTEMPT TO SOLVE IT.
DESIGNING THE USER EXPERIENCE
USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE
NEEDS OF SPECIFIC TYPES OF USER
DESIGNING THE USER EXPERIENCE
Jesse James Garrett, 2000
Strategy
Scope
Structure
Skeleton
Surface
INTRO TO USER EXPERIENCE DESIGN
WHY IS UX SO
IMPORTANT?
WHY IS UX SO IMPORTANT?
AVOID FEATURITIS
Kathy Sierra, Creating Passionate Users, 2006
Number of features
Userhappiness
“Nice, but I wish it did more…”
“So glad they added this!”
“Cool!”
“I rule!”
“Guess I’d better read the manual”
“Where the f*** did they put that?!”
“Now I can’t even do the ONE
SIMPLE THING I bought this for.”
“I suck at this.”
Happy user peak
RAWR!
MASLOW’S HIERARCHY OF NEEDS
USER EXPERIENCE HIERARCHY OF NEEDS
Aarron Walter, Designing for Emotion 2011
Easy to learn to
perform basic tasks
Basic features that
meet user needs
Service and
functional reliability
Fun, joy and delight
WHO PRACTICES UX DESIGN?
Squad
Product
owner
UX’er
Tester
Business
Analyst
Developers
Front-end
developer
CROSS-DISCIPLINE TEAMS
Squad
Product
owner
UX’er
Tester
Business
Analyst
Developers
Front-end
developer
Squad
Product
owner
UX’er
Tester
Business
Analyst
Developers
Front-end
developer
@zoe_guiraudon
WHERE DO WIREFRAMING AND
PROTOTYPING FIT IN THE PROCESS?
@zoe_guiraudon
Research Insights PrototypeIdeation
Discover

Business Analysis
Brand Analysis
Competitive Analysis
Technical Research
User Survey
User Interview
Usability Testing
Define

Affinity Map
User Flows
User Journeys
Personas
Feature Prioritisation
Design

Design Studio
Sketching
Paper Prototype
Usability Testing
Iterations
Wireframing
Test, iterate, Validate
Deliver

Digital Prototype
Usability Testing
Iterations
Wireframing
Test, Iterate, Validate
Functional Prototype
@zoe_guiraudon
PrototypeIdeation
Design

Design Studio
Sketching
Paper Prototype
Usability Testing
Iterations
Wireframing
Test, iterate, Validate
Deliver

Digital Prototype
Usability Testing
Iterations
Wireframing
Test, Iterate, Validate
Functional Prototype
Design
TestLearn
Iteration Process
@zoe_guiraudon
WIREFRAMING
@zoe_guiraudon
!
@zoe_guiraudon
1 - ALWAY START WITH PAPER!
IDEAS ARE CHEAP, BUILDING
THING IS EXPENSIVE.
@zoe_guiraudon
CAN YOU DRAW A…
Triangle Circle Cross Rectangle
@zoe_guiraudon
LET’S PLAY A GAME…
CALLED UXIONARY
@zoe_guiraudon
PAPER SKETCHES
• Every idea needs user interface
translation
• Good to get the basic concept and
interaction down.
• Sketching always comes before
wireframing
• Sketching helps you brainstorm
ideas with clients
• Sketches can be basic and Still
communicate wonderfully
@zoe_guiraudon
PAPER SKETCHES
• Every idea needs user interface
translation
• Good to get the basic concept and
interaction down.
• Sketching always comes before
wireframing
• Sketching helps you brainstorm
ideas with clients
• Sketches can be basic and Still
communicate wonderfully
@zoe_guiraudon
PAPER SKETCHES
• Every idea needs user interface
translation
• Good to get the basic concept and
interaction down.
• Sketching always comes before
wireframing
• Sketching helps you brainstorm
ideas with clients
• Sketches can be basic and Still
communicate wonderfully
@zoe_guiraudon
2 - WIREFRAMES
UP THE FIDELITY
@zoe_guiraudon
WIREFRAMES
• Grayscale or monochrome
• Good to test interactions
• Good to test usability
• More tangible
• If well done it should make the
next step a “breeze”
@zoe_guiraudon
WIREFRAMES
• Grayscale or monochrome
• Good to test interactions
• Good to test usability
• More tangible
• If well done it should make the
next step a “breeze”
@zoe_guiraudon
WIREFRAMES
• Grayscale or monochrome
• Good to test interactions
• Good to test usability
• More tangible
• If well done it should make the
next step a “breeze”
@zoe_guiraudon
3 - MOCKUPS
UP UP THE FIDELITY
@zoe_guiraudon
MOCKUPS
• This is where you get the visual
design and branding in
• Great to communicate with
stakeholders
• Good to get design feedback
• Additional piece of insight when
testing: Look & Feel
@zoe_guiraudon
MOCKUPS
• This is where you get the visual
design and branding in
• Great to communicate with
stakeholders
• Good to get design feedback
• Additional piece of insight when
testing: Look & Feel
@zoe_guiraudon
MOCKUPS
• This is where you get the visual
design and branding in
• Great to communicate with
stakeholders
• Good to get design feedback
• Additional piece of insight when
testing: Look & Feel
@zoe_guiraudon
TO RECAP
http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
Sketch Wireframes Mockup CodeIdea
Getting a
basic
concept.
Refining the
concept
further.
Creating
visual
graphic &
content.
Developing
it in the web
browser.
@zoe_guiraudon
THE TOOLS
I use…
Sketch
@zoe_guiraudon
THE TOOLS
But people also use…
Omnigraffle Illustrator InDesign Photoshop Affinity Designer
@zoe_guiraudon
PROTOTYPING
@zoe_guiraudon
“IF A PICTURE IS WORTH 1,000
WORDS, A PROTOTYPE IS
WORTH 1,000 MEETINGS.”
WHY…
- Tom & David Kelly IDEO
@zoe_guiraudon
PrototypeIdeation
Design

Design Studio
Sketching
Paper Prototype
Usability Testing
Iterations
Wireframing
Test, iterate, Validate
Deliver

Digital Prototype
Usability Testing
Iterations
Wireframing
Test, Iterate, Validate
Functional Prototype
REMEMBER THIS?
@zoe_guiraudon
Design
TestLearn
Iteration Process
AND THIS?
@zoe_guiraudon
REMEMBER…
UX is not only
about the look
but also about
the human
interaction.
•To explore and refine
•To communicate and test
‣ Functionality
‣ Flow
‣ Interaction
‣ Animations
‣ Usability
WHY IS PROTOTYPING IMPORTANT?
PROTOTYPES ARE ALL ABOUT THE
USER.
WE TEST THE USABILITY OF OUR
DESIGNS.
• Learnability - How easy is it for users to accomplish basic tasks the
first time they encounter the design?
• Efficiency - Once users have learned the design, how quickly can they
perform tasks?
• Memorability - When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
• Error Management - How many errors do users make, how severe are
these errors, and how easily can they recover from the errors?
• Satisfaction - How pleasant is it to use the design?
PRINCIPLES OF USABILITY
• Learnability - How easy is it for users to accomplish basic tasks the
first time they encounter the design?
• Efficiency - Once users have learned the design, how quickly can they
perform tasks?
• Memorability - When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
• Error Management - How many errors do users make, how severe are
these errors, and how easily can they recover from the errors?
• Satisfaction - How pleasant is it to use the design?
PRINCIPLES OF USABILITY
• Learnability - How easy is it for users to accomplish basic tasks the
first time they encounter the design?
• Efficiency - Once users have learned the design, how quickly can they
perform tasks?
• Memorability - When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
• Error Management - How many errors do users make, how severe are
these errors, and how easily can they recover from the errors?
• Satisfaction - How pleasant is it to use the design?
PRINCIPLES OF USABILITY
• Learnability - How easy is it for users to accomplish basic tasks the
first time they encounter the design?
• Efficiency - Once users have learned the design, how quickly can they
perform tasks?
• Memorability - When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
• Error Management - How many errors do users make, how severe are
these errors, and how easily can they recover from the errors?
• Satisfaction - How pleasant is it to use the design?
PRINCIPLES OF USABILITY
• Learnability - How easy is it for users to accomplish basic tasks the
first time they encounter the design?
• Efficiency - Once users have learned the design, how quickly can they
perform tasks?
• Memorability - When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
• Error Management - How many errors do users make, how severe are
these errors, and how easily can they recover from the errors?
• Satisfaction - How pleasant is it to use the design?
PRINCIPLES OF USABILITY
@zoe_guiraudon
LEMErrS
USABILITY TESTING
CAN YOU THINK OF ANY SITES OR
APPS WHERE USABILITY TESTING
HASN’T BEEN THOROUGH?
@zoe_guiraudon
WHAT ARE DIFFERENT TYPES
OF PROTOTYPES?
@zoe_guiraudon
REMEMBER THIS?
http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
Sketch Wireframes Mockup CodeIdea
Getting a
basic
concept.
Refining the
concept
further.
Creating
visual
graphic &
content.
Developing
it in the web
browser.
@zoe_guiraudon
REMEMBER THIS?
Sketch Wireframes Mockup Code
Paper
Prototype
Digital /
Clickable
Prototype
Digital /
Clickable
Prototype
Functional
Prototype
@zoe_guiraudon
REMEMBER THIS?
Sketch Wireframes Mockup Code
Paper
Prototype
Digital /
Clickable
Prototype
Digital /
Clickable
Prototype
Functional
Prototype
Iteration Iteration Iteration
@zoe_guiraudon
IS PROTOTYPE AN MVP*?
* MINIMUM VIABLE PRODUCT
@zoe_guiraudon
WHAT IS THE MVP OF…
A CAR?
@zoe_guiraudon
WHAT IS THE MVP OF…
IS IT A
WHEEL?
@zoe_guiraudon
WHAT IS THE MVP OF…
NO
@zoe_guiraudon
AN MVP IS THE PROTOTYPE
THAT WILL HELP YOUR USER TO
ACHIEVE THEIR GOAL.
@zoe_guiraudon
THE TOOLS
I use…
Marvel Invision POP
@zoe_guiraudon
THE TOOLS
But people also use…
Axure proto.io Flinto UXPin
@zoe_guiraudon
100 SHAPES
http://www.100shapes.com/
hello@100shapes.com
+44-203-7738175
CONTACT US:
@zoe_guiraudon
GENERAL ASSEMBLY
IF YOU ARE INTERESTED IN STUDYING UX
UPCOMING COURSES:
Part Time - 10 weeks: July 26th - September 29th
Part Time - 1 week intensive: August 8th - August 13th
Full Time - UXDI: August 1st - October 7th
@zoe_guiraudon
THANK YOU!
Q&A
ZOE GUIRAUDON
www.zoeguiraudon.com
@zoe_guiraudon

Weitere ähnliche Inhalte

Was ist angesagt?

The Quest for the Ultimate UX Portfolio
The Quest for the Ultimate UX PortfolioThe Quest for the Ultimate UX Portfolio
The Quest for the Ultimate UX PortfolioPradeep Nayar
 
Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience DesignerVinay Mohanty
 
Sell yourselves better: What a UX employer looks for
Sell yourselves better: What a UX employer looks forSell yourselves better: What a UX employer looks for
Sell yourselves better: What a UX employer looks forJason Mesut
 
Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16Boaz Rossano
 
UX Skills That Pay The Bills
UX Skills That Pay The BillsUX Skills That Pay The Bills
UX Skills That Pay The Billschudders
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?Baris Erkol
 
Lean UX in the Enterprise
Lean UX in the EnterpriseLean UX in the Enterprise
Lean UX in the EnterpriseAustin Knight
 
Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAriana Koblitz
 
User Experience Basics for Product Management
User Experience Basics for Product ManagementUser Experience Basics for Product Management
User Experience Basics for Product ManagementRoger Hart
 
The Soft Skills That Get You Paid | UX Design
The Soft Skills That Get You Paid | UX DesignThe Soft Skills That Get You Paid | UX Design
The Soft Skills That Get You Paid | UX DesignLaith Wallace
 
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...BayUX
 
Designing user experience (ux) for digital products
Designing user experience (ux) for digital productsDesigning user experience (ux) for digital products
Designing user experience (ux) for digital productsVijay Morampudi
 
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyMax Soe
 

Was ist angesagt? (20)

The Quest for the Ultimate UX Portfolio
The Quest for the Ultimate UX PortfolioThe Quest for the Ultimate UX Portfolio
The Quest for the Ultimate UX Portfolio
 
Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience Designer
 
Sell yourselves better: What a UX employer looks for
Sell yourselves better: What a UX employer looks forSell yourselves better: What a UX employer looks for
Sell yourselves better: What a UX employer looks for
 
Lean UX
Lean UXLean UX
Lean UX
 
Building a UX Portfolio
Building a UX PortfolioBuilding a UX Portfolio
Building a UX Portfolio
 
Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16
 
Lean UX Workshop
Lean UX WorkshopLean UX Workshop
Lean UX Workshop
 
UX Skills That Pay The Bills
UX Skills That Pay The BillsUX Skills That Pay The Bills
UX Skills That Pay The Bills
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?
 
Lean UX in the Enterprise
Lean UX in the EnterpriseLean UX in the Enterprise
Lean UX in the Enterprise
 
UX workshop
UX workshopUX workshop
UX workshop
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the future
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
User Experience Basics for Product Management
User Experience Basics for Product ManagementUser Experience Basics for Product Management
User Experience Basics for Product Management
 
The Soft Skills That Get You Paid | UX Design
The Soft Skills That Get You Paid | UX DesignThe Soft Skills That Get You Paid | UX Design
The Soft Skills That Get You Paid | UX Design
 
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
 
Designing user experience (ux) for digital products
Designing user experience (ux) for digital productsDesigning user experience (ux) for digital products
Designing user experience (ux) for digital products
 
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st Century
 

Andere mochten auch

The Lean Startup and Agile: Match made in Heaven
The Lean Startup and Agile: Match made in HeavenThe Lean Startup and Agile: Match made in Heaven
The Lean Startup and Agile: Match made in HeavenStephen Forte
 
Running lean startup with agile 20130810
Running lean startup with agile 20130810Running lean startup with agile 20130810
Running lean startup with agile 20130810Kulawat Wongsaroj
 
Agile and the Lean Startup - E-nnovation conference
Agile and the Lean Startup - E-nnovation conferenceAgile and the Lean Startup - E-nnovation conference
Agile and the Lean Startup - E-nnovation conferenceProyectalis / Improvement21
 
Product Management and Lean Startup
Product Management and Lean StartupProduct Management and Lean Startup
Product Management and Lean StartupAllan Caeg
 
Product Management 101 Deck_sherlock (1)
Product Management 101 Deck_sherlock (1)Product Management 101 Deck_sherlock (1)
Product Management 101 Deck_sherlock (1)Alyssa Teuber
 
Prototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, PrototypesPrototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, PrototypesMarta Soncodi
 
Lean Startup Tools for Agile Product Teams
Lean Startup Tools for Agile Product TeamsLean Startup Tools for Agile Product Teams
Lean Startup Tools for Agile Product TeamsLitheSpeed
 
Introduction to Lean Analytics webinar (O'Reilly)
Introduction to Lean Analytics webinar (O'Reilly)Introduction to Lean Analytics webinar (O'Reilly)
Introduction to Lean Analytics webinar (O'Reilly)Lean Analytics
 
Прототипирование в дизайн-мышлении
Прототипирование в дизайн-мышлении Прототипирование в дизайн-мышлении
Прототипирование в дизайн-мышлении Lumiknows Consultancy
 
Сервис-дизайн. Гайд для разработчиков.
Сервис-дизайн. Гайд для разработчиков.Сервис-дизайн. Гайд для разработчиков.
Сервис-дизайн. Гайд для разработчиков.Wonderfull
 
2014 future of product management
2014 future of product management2014 future of product management
2014 future of product managementJanice Fraser
 
Базовая-формула-дизайн-мышления_lumiknows-2016
Базовая-формула-дизайн-мышления_lumiknows-2016Базовая-формула-дизайн-мышления_lumiknows-2016
Базовая-формула-дизайн-мышления_lumiknows-2016Lumiknows Consultancy
 
Процесс дизайн-мышления по методике Стэнфордской школы d.school
Процесс дизайн-мышления по методике Стэнфордской школы d.schoolПроцесс дизайн-мышления по методике Стэнфордской школы d.school
Процесс дизайн-мышления по методике Стэнфордской школы d.schoolIrina Kuteneva
 
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / RussianДизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / RussianWonderfull
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypesDr. V Vorvoreanu
 
Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...
Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...
Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...Dan Olsen
 

Andere mochten auch (20)

The Lean Startup and Agile: Match made in Heaven
The Lean Startup and Agile: Match made in HeavenThe Lean Startup and Agile: Match made in Heaven
The Lean Startup and Agile: Match made in Heaven
 
Running lean startup with agile 20130810
Running lean startup with agile 20130810Running lean startup with agile 20130810
Running lean startup with agile 20130810
 
Agile and the Lean Startup - E-nnovation conference
Agile and the Lean Startup - E-nnovation conferenceAgile and the Lean Startup - E-nnovation conference
Agile and the Lean Startup - E-nnovation conference
 
Product Management and Lean Startup
Product Management and Lean StartupProduct Management and Lean Startup
Product Management and Lean Startup
 
Pebble Watch Development
Pebble Watch DevelopmentPebble Watch Development
Pebble Watch Development
 
Product Management 101 Deck_sherlock (1)
Product Management 101 Deck_sherlock (1)Product Management 101 Deck_sherlock (1)
Product Management 101 Deck_sherlock (1)
 
Prototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, PrototypesPrototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, Prototypes
 
Lean Startup Tools for Agile Product Teams
Lean Startup Tools for Agile Product TeamsLean Startup Tools for Agile Product Teams
Lean Startup Tools for Agile Product Teams
 
Introduction to Lean Analytics webinar (O'Reilly)
Introduction to Lean Analytics webinar (O'Reilly)Introduction to Lean Analytics webinar (O'Reilly)
Introduction to Lean Analytics webinar (O'Reilly)
 
Прототипирование в дизайн-мышлении
Прототипирование в дизайн-мышлении Прототипирование в дизайн-мышлении
Прототипирование в дизайн-мышлении
 
Сервис-дизайн. Гайд для разработчиков.
Сервис-дизайн. Гайд для разработчиков.Сервис-дизайн. Гайд для разработчиков.
Сервис-дизайн. Гайд для разработчиков.
 
2014 future of product management
2014 future of product management2014 future of product management
2014 future of product management
 
Базовая-формула-дизайн-мышления_lumiknows-2016
Базовая-формула-дизайн-мышления_lumiknows-2016Базовая-формула-дизайн-мышления_lumiknows-2016
Базовая-формула-дизайн-мышления_lumiknows-2016
 
Процесс дизайн-мышления по методике Стэнфордской школы d.school
Процесс дизайн-мышления по методике Стэнфордской школы d.schoolПроцесс дизайн-мышления по методике Стэнфордской школы d.school
Процесс дизайн-мышления по методике Стэнфордской школы d.school
 
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / RussianДизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
 
The Lean Startup
The Lean StartupThe Lean Startup
The Lean Startup
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
 
Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...
Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...
Product Management by Numbers: Using Metrics To Optimize Your Product by Dan ...
 
Lean Startup for Agile Product Management
Lean Startup for Agile Product ManagementLean Startup for Agile Product Management
Lean Startup for Agile Product Management
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Ähnlich wie Wireframe and prototyping google Campus talk by Zoe Guiraudon

APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingEuropean Innovation Academy
 
UX, Agile and product management
UX, Agile and product managementUX, Agile and product management
UX, Agile and product managementPhil Barrett
 
Human Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and IndustryHuman Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and Industrystudiotelon
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Remote Usability - Indigo.Design
Remote Usability - Indigo.Design Remote Usability - Indigo.Design
Remote Usability - Indigo.Design Poojitha B
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - KeynotePhil Barrett
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panaceaMichael Meikson
 
UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1Sebastian Tory-Pratt
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Effective
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010EffectiveUI
 
Perfecting User Experience
Perfecting User ExperiencePerfecting User Experience
Perfecting User ExperienceJeremy Duimstra
 
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
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
 
Nailing Distributed Development With Effective Collaboration - Matt Ryall
Nailing Distributed Development With Effective Collaboration - Matt RyallNailing Distributed Development With Effective Collaboration - Matt Ryall
Nailing Distributed Development With Effective Collaboration - Matt RyallAtlassian
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and PrototypingKshitiz Anand
 
Matthijs Collard - UX-design: wat, wie en hoe?
Matthijs Collard - UX-design: wat, wie en hoe?Matthijs Collard - UX-design: wat, wie en hoe?
Matthijs Collard - UX-design: wat, wie en hoe?Hostnet bv
 

Ähnlich wie Wireframe and prototyping google Campus talk by Zoe Guiraudon (20)

APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
 
UX, Agile and product management
UX, Agile and product managementUX, Agile and product management
UX, Agile and product management
 
Human Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and IndustryHuman Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and Industry
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Remote Usability - Indigo.Design
Remote Usability - Indigo.Design Remote Usability - Indigo.Design
Remote Usability - Indigo.Design
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panacea
 
UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1
 
Ux design process
Ux design processUx design process
Ux design process
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010
 
Mobile Monday
Mobile MondayMobile Monday
Mobile Monday
 
Perfecting User Experience
Perfecting User ExperiencePerfecting User Experience
Perfecting User Experience
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the Wild
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
 
Nailing Distributed Development With Effective Collaboration - Matt Ryall
Nailing Distributed Development With Effective Collaboration - Matt RyallNailing Distributed Development With Effective Collaboration - Matt Ryall
Nailing Distributed Development With Effective Collaboration - Matt Ryall
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
 
Matthijs Collard - UX-design: wat, wie en hoe?
Matthijs Collard - UX-design: wat, wie en hoe?Matthijs Collard - UX-design: wat, wie en hoe?
Matthijs Collard - UX-design: wat, wie en hoe?
 

Kürzlich hochgeladen

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Kürzlich hochgeladen (19)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

Wireframe and prototyping google Campus talk by Zoe Guiraudon

  • 1. @zoe_guiraudon INTRO TO WIREFRAMING AND PROTOTYPING GENERAL ASSAMBLY @ GOOGLE CAMPUS
  • 3. @zoe_guiraudon WHAT WILL YOU LEARN TODAY INTRO TO UX WIREFRAMING PROTOTYPING
  • 4. @zoe_guiraudon WHO THE HELL IS SHE? Zoe Guiraudon www.zoeguiraudon.com UX Designer at 100 Shapes TA at General Assembly
  • 5. @zoe_guiraudon MY UX JOURNEY Finished Uni Yay! Continue Working In Social Media Found out about GA Al lot of ups and downs but it was all worth it! My GA Experience I Need a career change!!! Teaching at GA 100 Shapes ITV Project
  • 6. @zoe_guiraudon INTRO TO USER EXPERIENCE DESIGN WHAT IS USER EXPERIENCE?
  • 7. WHAT IS USER EXPERIENCE? WE INTERACT WITH PRODUCTS, BOTH DIGITAL AND PHYSICAL. WE TRY TO ACCOMPLISH GOALS WHEN USING THESE PRODUCTS. THIS LEADS US TO HAVING A USER EXPERIENCE.
  • 8. WHAT IS USER EXPERIENCE? JESSE JAMES GARRET “Experience design is the design of anything independent of medium, or across media, with human experience as an explicit outcome and human engagement as an explicit goal.”
  • 9. WHAT IS USER EXPERIENCE? DONALD NORMAN “User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
  • 10. WHAT IS USER EXPERIENCE? THERE ARE SOME PRODUCTS THAT WE USE DAILY THAT ARE POORLY DESIGNED AND OFTEN PROVIDE POOR EXPERIENCES.
  • 11. CLASS TITLE TODAY’S CLASSWHAT IS USER EXPERIENCE? EVERYDAY UX
  • 12. WHAT IS USER EXPERIENCE? HAVE A THINK - WHAT WAS THE EXPERIENCE LIKE COMING TO THIS TALK? • Transport • Restaurants/coffee shops • Architecture • Sign posting • Did you use any apps to guide you here?
  • 13. WHAT IS USER EXPERIENCE? CAN YOU THINK OF ANY EXAMPLES OF GOOD OR BAD EXPERIENCES?
  • 14. UX COMES FROM PSYCHOLOGY Thinking Feeling Instinct
  • 15. UX COMES FROM PSYCHOLOGY
  • 16. INTRO TO USER EXPERIENCE DESIGN HOW DO WE “DESIGN” THE USER EXPERIENCE?
  • 17. DESIGNING THE USER EXPERIENCE WHAT MOST PEOPLE THINK UX IS Field research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders helloerik.com/ux-is-not-ui
  • 18. DESIGNING THE USER EXPERIENCE WHAT UX ACTUALLY IS Field research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders helloerik.com/ux-is-not-ui
  • 19. DESIGNING THE USER EXPERIENCE THE FIELD OF USER EXPERIENCE IS CONCERNED WITH IDENTIFYING A REAL-WORLD PROBLEM AND USING DESIGN TO ATTEMPT TO SOLVE IT.
  • 20. DESIGNING THE USER EXPERIENCE USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER
  • 21. DESIGNING THE USER EXPERIENCE Jesse James Garrett, 2000 Strategy Scope Structure Skeleton Surface
  • 22. INTRO TO USER EXPERIENCE DESIGN WHY IS UX SO IMPORTANT?
  • 23. WHY IS UX SO IMPORTANT? AVOID FEATURITIS Kathy Sierra, Creating Passionate Users, 2006 Number of features Userhappiness “Nice, but I wish it did more…” “So glad they added this!” “Cool!” “I rule!” “Guess I’d better read the manual” “Where the f*** did they put that?!” “Now I can’t even do the ONE SIMPLE THING I bought this for.” “I suck at this.” Happy user peak RAWR!
  • 25. USER EXPERIENCE HIERARCHY OF NEEDS Aarron Walter, Designing for Emotion 2011 Easy to learn to perform basic tasks Basic features that meet user needs Service and functional reliability Fun, joy and delight
  • 26. WHO PRACTICES UX DESIGN? Squad Product owner UX’er Tester Business Analyst Developers Front-end developer CROSS-DISCIPLINE TEAMS Squad Product owner UX’er Tester Business Analyst Developers Front-end developer Squad Product owner UX’er Tester Business Analyst Developers Front-end developer
  • 27. @zoe_guiraudon WHERE DO WIREFRAMING AND PROTOTYPING FIT IN THE PROCESS?
  • 28. @zoe_guiraudon Research Insights PrototypeIdeation Discover
 Business Analysis Brand Analysis Competitive Analysis Technical Research User Survey User Interview Usability Testing Define
 Affinity Map User Flows User Journeys Personas Feature Prioritisation Design
 Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver
 Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype
  • 29. @zoe_guiraudon PrototypeIdeation Design
 Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver
 Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype Design TestLearn Iteration Process
  • 32. @zoe_guiraudon 1 - ALWAY START WITH PAPER! IDEAS ARE CHEAP, BUILDING THING IS EXPENSIVE.
  • 33. @zoe_guiraudon CAN YOU DRAW A… Triangle Circle Cross Rectangle
  • 34. @zoe_guiraudon LET’S PLAY A GAME… CALLED UXIONARY
  • 35. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
  • 36. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
  • 37. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
  • 39. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
  • 40. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
  • 41. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
  • 42. @zoe_guiraudon 3 - MOCKUPS UP UP THE FIDELITY
  • 43. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
  • 44. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
  • 45. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
  • 46. @zoe_guiraudon TO RECAP http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ Sketch Wireframes Mockup CodeIdea Getting a basic concept. Refining the concept further. Creating visual graphic & content. Developing it in the web browser.
  • 48. @zoe_guiraudon THE TOOLS But people also use… Omnigraffle Illustrator InDesign Photoshop Affinity Designer
  • 50. @zoe_guiraudon “IF A PICTURE IS WORTH 1,000 WORDS, A PROTOTYPE IS WORTH 1,000 MEETINGS.” WHY… - Tom & David Kelly IDEO
  • 51. @zoe_guiraudon PrototypeIdeation Design
 Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver
 Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype REMEMBER THIS?
  • 53. @zoe_guiraudon REMEMBER… UX is not only about the look but also about the human interaction.
  • 54. •To explore and refine •To communicate and test ‣ Functionality ‣ Flow ‣ Interaction ‣ Animations ‣ Usability WHY IS PROTOTYPING IMPORTANT?
  • 55. PROTOTYPES ARE ALL ABOUT THE USER. WE TEST THE USABILITY OF OUR DESIGNS.
  • 56. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  • 57. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  • 58. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  • 59. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  • 60. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  • 62. USABILITY TESTING CAN YOU THINK OF ANY SITES OR APPS WHERE USABILITY TESTING HASN’T BEEN THOROUGH?
  • 63. @zoe_guiraudon WHAT ARE DIFFERENT TYPES OF PROTOTYPES?
  • 64. @zoe_guiraudon REMEMBER THIS? http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ Sketch Wireframes Mockup CodeIdea Getting a basic concept. Refining the concept further. Creating visual graphic & content. Developing it in the web browser.
  • 65. @zoe_guiraudon REMEMBER THIS? Sketch Wireframes Mockup Code Paper Prototype Digital / Clickable Prototype Digital / Clickable Prototype Functional Prototype
  • 66. @zoe_guiraudon REMEMBER THIS? Sketch Wireframes Mockup Code Paper Prototype Digital / Clickable Prototype Digital / Clickable Prototype Functional Prototype Iteration Iteration Iteration
  • 67. @zoe_guiraudon IS PROTOTYPE AN MVP*? * MINIMUM VIABLE PRODUCT
  • 68. @zoe_guiraudon WHAT IS THE MVP OF… A CAR?
  • 69. @zoe_guiraudon WHAT IS THE MVP OF… IS IT A WHEEL?
  • 71. @zoe_guiraudon AN MVP IS THE PROTOTYPE THAT WILL HELP YOUR USER TO ACHIEVE THEIR GOAL.
  • 73. @zoe_guiraudon THE TOOLS But people also use… Axure proto.io Flinto UXPin
  • 75. @zoe_guiraudon GENERAL ASSEMBLY IF YOU ARE INTERESTED IN STUDYING UX UPCOMING COURSES: Part Time - 10 weeks: July 26th - September 29th Part Time - 1 week intensive: August 8th - August 13th Full Time - UXDI: August 1st - October 7th