1. Essential Techniques for
Designing Delightful Web Sites
Christine Perfetti, Acquia Twitter: @cperfetti

2. What makes a delightful design?

3. What is a delightful design?
What makes a delightful design?
Emotional connection: Gives users great pleasure and joy
Delivers value and benefit: Accomplishes users’ goals and goes
beyond their basic expectations
• What it’s not:
• A magic bullet
• Bells and whistles
• Sizzle or sexiness

8. What goes wrong?

9. It’s not about the big idea
The best products and designs aren’t created by one
brilliant person or team
Success comes from:
Understand what users want to accomplish
Identify the pain points
Stumble and constructively fail
Measure, learn, and iterate

10. Essential Techniques for
Designing Delightful Web Sites

11. Focus on techniques and
tricks

12. Methodology! Process! Techniques! Tricks!

13. Test early and often

14. Traditional usability tests
A usability test involves
putting your users in front
of your product and
observing what they do

15. Not enough time
No resources and staff
No money No buy-in from management
Unsure where to start
Testing is too scientific
The Excuses

17. Running a test session
Greet the user
Introduce user to observers
Explain to user how the test will work
Give the user tasks to complete and observe problems
they experience
General Q&A
Debrief with observers

18. Start testing
anywhere

19. Test quickly

20. Quick and dirty technique for measuring content
pages
Takes less than 10 minutes to run
Measures if content pages quickly convey their
purpose
Trick: 5 second test

21. You want to post pictures online from your last vacation
You are concerned that the upload process will be
difficult
How confident are you that you can upload photos
quickly and easily?
Sharing Your Pictures Online

24. You want to post pictures online from your last vacation
You are concerned that the upload process will be
difficult
How confident are you that you can upload photos
quickly and easily?
Sharing Your Pictures Online

27. You want to post pictures online from your last vacation
You are concerned that the upload process will be
difficult
How confident are you that you can upload photos
quickly and easily?
Sharing Your Pictures Online

30. Not for the home page

31. Research Question
How do we measure the success of
the home page?

33. Trick: First Click Test
Useful method to assess where users first click on
your site’s home or entry page
Provide users with a specific task to complete when
they arrive at the site
By observing where users first click, it’s a clear
indicator whether they’ll eventually be successful

37. Start with the problem,
not the solution

38. Understand your users’ pain points

39. Visit users in their natural environment

40. Visit users in their natural environment

41. A field study is the best technique for gathering
information about users’ goals, needs, desires, and
motivations
What we learn
User frustration and problems
How technology fits into users’ life
Understanding of users’ goals and most important tasks
Discovery starts with field studies

42. Understanding of work environment
Tasks that users haven’t talked about
Pain points and user frustration
“Cheat sheets”
Evidence of technology that isn’t working for the user
What to look for

43. Understand the user
workflow and frustration

44. It’s about the experience, not the features

45. Observe your users’ workflow in a realistic way
Identify the frustration and pain points
Tackle the problem areas
Don’t redesign everything all at once
Chunk the work
Focus on the user’s journey

46. The 7-11 Milk Experiment

47. Mirrors the 7-11 Milk Experiment
Closely approximately a realistic scenario
Allows us to assess the usability of our designs and
identify the pain points
Compelled Shopping Study

61. The Journey Map

62. Back button
Pogosticking
Search
3 signs of failure

63. Involve all members of the
development team

64. Someone on the product team didn’t know something
they should have known
If they had known, they would have designed the
product differently
Anyone who has information that can inform design
decisions should be involved
The cause of all usability problems

65. Product management
Engineering
UX
Who should be on the product team?
Marketing
Support
Legal
Sales

68. Generate multiple
concepts and ideas

69. Two-day collaborative workshop with key representation
from Engineering, Marketing, Product, UX, Customer
Support, Sales
Present problem to tackle
Teams design in short time boxes
Present concepts
Critique
Iterate: Lather, rinse, repeat
Design Studio

72. Measure and learn early

73. “We’re building a what with what?”Heather O’Neill, Above the Fold
http://www.abovethefolddesign.com/blog/2010/08/24/from-paper-to-prototype/

74. Tests can happen early
• Paper prototype tests typically happen during the
first two weeks of development and involves all
team members
• Design is in flux
• Development team needs to try ideas and get
feedback quickly
• All team members can participate in the study
• Allows design teams to go through multiple design
iterations in a week

75. Building a paper prototype
• The paper prototype consists of:
• A “screen” (large cardboard or paper rectangle)
• Separate pieces of paper for each screen state,
drop-down menu, or pop-up
• One team member silently simulates the behavior of
the computer by placing pieces of paper in front of
the user

77. Paper Prototyping by Carolyn Snyder

78. Measure and learn
regularly:
URTH & SURF

81. Hire the right people

82. Communication is a core competency
“The most important baseline skill for any position is communication.We want you to be
able to explain what you mean; we want you to be articulate. If you don’t have excellent
communication skills it’s going to be very frustrating for you and for other people.”
Phil Libin, CEO, Evernote

83. Team player
Collaborative
Listen to others’ constraints
Receptive to feedback
Immersed in user research
Understands the problem
What we look for

84. Questions?
Twitter: @cperfetti
christine.perfetti@acquia.com