Zoe Guiraudon gave an introductory presentation on user experience design, wireframing, and prototyping. She discussed what user experience is, why it's important, and how designers use techniques like wireframing and prototyping to design for the user experience. Zoe explained the process from sketching initial ideas on paper to creating higher fidelity digital prototypes. She emphasized testing prototypes with users to evaluate things like usability and the overall user experience. Zoe also shared some of the tools she uses for wireframing and prototyping like Sketch, Marvel, and InVision.

1. @zoe_guiraudon
INTRO TO WIREFRAMING
AND PROTOTYPING
GENERAL ASSAMBLY @ GOOGLE CAMPUS

2. @zoe_guiraudon

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!

24. MASLOW’S HIERARCHY OF NEEDS

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

30. @zoe_guiraudon
WIREFRAMING

31. @zoe_guiraudon
!

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

38. @zoe_guiraudon
2 - WIREFRAMES
UP THE FIDELITY

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.

47. @zoe_guiraudon
THE TOOLS
I use…
Sketch

48. @zoe_guiraudon
THE TOOLS
But people also use…
Omnigraffle Illustrator InDesign Photoshop Affinity Designer

49. @zoe_guiraudon
PROTOTYPING

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?

52. @zoe_guiraudon
Design
TestLearn
Iteration Process
AND 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

61. @zoe_guiraudon
LEMErrS

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?

70. @zoe_guiraudon
WHAT IS THE MVP OF…
NO

71. @zoe_guiraudon
AN MVP IS THE PROTOTYPE
THAT WILL HELP YOUR USER TO
ACHIEVE THEIR GOAL.

72. @zoe_guiraudon
THE TOOLS
I use…
Marvel Invision POP

73. @zoe_guiraudon
THE TOOLS
But people also use…
Axure proto.io Flinto UXPin

74. @zoe_guiraudon
100 SHAPES
http://www.100shapes.com/
hello@100shapes.com
+44-203-7738175
CONTACT US:

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

76. @zoe_guiraudon
THANK YOU!
Q&A
ZOE GUIRAUDON
www.zoeguiraudon.com
@zoe_guiraudon