A talk I gave to (mostly) business owners and developers at Jersey Shore Tech Meetup #22. In an effort to explain the application of design for considering the complete user experience, I walk the audience through the analog experience of making coffee and all the interface touchpoints along the way – including shopping at Trader Joe's. Then we walk through the process and see examples of what we do as User Experience professionals with some discussion on current trends in UX.

1. U X
!= UI Design
Jersey Shore @chrispalle
Tech Meetup #22 @wisdomandcraft
June 20, 2012 #jstm22 or #jstm
Show of hands:
Who’s dev?
Who’s biz?
Who’s design?

2. A Bit About Me
User Experience
Professional with 16 Years
Experience Creating
Digital Products
Recently went from a
“me shop” to “we shop”
(spiel for w+c hiring - “We hire for heart, teach for talent”) We’re looking for all levels, though.
Explain why we’re special:
Various capacities/roles
Various verticals

3. User Experience:
Not Just Another Pretty Interface
❖ UX and UI Design - Related; Not
the Same
❖ Activities UX professionals use
to uncover great ideas
❖ Considerations when working
with UX professionals
(Caveat: this talk is a prototype. Thanks for being my beta testers :-)

4. A Story from the Analog World
UX
We’re all familiar with popular, digital User Interfaces from the computers and phones we use, but to illustrate the key differences and how a UI supports the user experience, we’ll borrow from an
Analog experience.

5. Something Many of us can probably relate to: Making Coffee.

6. This actually started with a delightful little experience I had with a Trader Joe’s packaging. Decaf is “REALLY” mellow...

7. So, the Experience begins with me reaching for a tin of coffee on top of the refrigerator.

8. I then experience this brand touchpoint as I open the container to the get out my grounds.

9. Big healthy spoonful.

11. Pouring the coffee into the maker.

12. Booting up the brew...

13. I like to pour my milk in first. Doesn’t dirty a spoon and I don’t have to worry about stirring it.

14. After waiting a while, it’s ready to serve...

15. That’s not the whole story, though.
UX
My experience with brewing coffee starts before I even get the product home, though. This sets the stage for any number of conditions in which a customer can land on your property.
Let’s go to the pre-experience.

16. On my way to the store, I drive past a friend’s house (shout out to @erova).

17. Getting into the store is relatively simple. Oddly (maybe), this Trader Joe’s is next to office supply store.

18. Entering Trader Joe’s is a relatively common experience. Grab a cart or basket, enter into produce.

19. An unfortunate end-cap....
So, I’m looking for coffee... where is coffee normally?...

20. By the breakfast foods! Only... not at Trader Joe’s. Continuing to walk...

21. I find the SAMPLEs in the back of the store. Cool. Not what I’m looking for, but hey, nice to know this is here. Kind of a little surprise, actually. Next to Free samples of coffee is a cheese sampling
station (not shown). Nice little way to stamp a pleasant experience: Free
Continuing on...

22. Ah. Just to the right, the staple: Milk. This is in the back which is another common practice.
Still no sign of the coffee yet, though...

23. Ah, here it is! Wow, nice display...

24. Continuing in typical Trader Joe’s fashion, the packaging AND the display is delightful.
“Coffee that energizes you AND your wallet!” brilliant.. plus, the colors match.
Grab some whole bean and go...

25. Oh, nice! Grinders! How convenient- right here as I make my way to the cashier. Well played, Joe.

26. 1. Okay. So, Trader Joe’s is a bit uncommon, but this is where they come back to being common: impulse buys at the checkout...
2. Gummy Bears for the kids (it’s okay though because they’re actually Veggies)
3. Staying true to the Trader Joe’s Brand, you can get an eco-friendly bag for only a dollar!
4. Okay, this where they get really uncommon. Look at the carts... closely... where do they go?

27. Into the CASHIER! Customers don’t have to worry about managing my cart or bagging, etc. as I deal with my wallet. (that’s not me by the way)
I never noticed this about Trader Joe’s until this analysis, but this about the best Checkout Optimization I’ve ever seen. It’s totally subconscious, but it’s little delighters like this make for an
overall positive experience.

28. Samples Milk food
f
f f f f o
o o o o o
o o o o d
d d d d
registers food
Entrance
photo credit: Thomas Vander Wal - Used without permission *not to scale
(Deconstructed Floor Plan Wireframe)
Okay. Quiz time. You know how stores notoriously put the common items to the back, to make you walk through the store to see everything else, right?
Where do you think the put the coffee?

29. Samples Milk food
f
f f f f o
o o o o o
o o o o d
d d d d
registers
Entrance
photo credit: Thomas Vander Wal - Used without permission *not to scale
It’s in the FRONT ALLLL the way away from the door.
Look at the path you have to take. If you don’t know where you’re going, you wander everywhere because coffee is not in its typical spot – by breakfast foods and having the aisles on an angle,
invites the shopper to move through the store effective exploring close to a third by the time one finds the coffee.
That’s awesome, but what’s totally awesome is that even if you know where coffee is during subsequent visits, think a little more about those aisles. Having the aisles at an angle visually exposes
more to shoppers as they walk to the coffee.

30. Okay. So, back to our story.
That was an overall experience. Many touchpoints. Many of which Trader Joe’s has NO control over (that’s an important point to remember)
But this is story to show the differences between UX and UI Design.... so, how does this relate to User Interface design? Let’s step back through the experience again.

31. Opening Can - That’s a User Interface (UI).
Pulling out grounds - from the UI.

32. Opening my coffee maker - UI

33. Turning on the pot - Obvious UI.

34. Water filterer - UI
Pouring in to UI of coffee maker.

35. Milk carton UI, into mug another UI.

36. Coffee pot - UI.

37. And now....

38. I’m ready to go.

39. Back to Design in the
Digital World
❖ Trader Joe’s has no control over the total product
experience
❖ Different browsers and multi-channel experiences
❖ My experience is my own, nobody can “design it”
❖ Need to consider holistic (pre, during, post) experience
You can’t control what people experience before they get to your site or use your products, but this impacts the perception of your products and services.

40. An error before I finish?
Friends’ names on images
Just a couple samples I found when I was putting this story together.
See how Google is leveraging data to think holistically? It prioritized photos from my friends (and these were on Flickr!)

41. Activities: Strategies and Methods
UX
Okay. Since most everyone here knows what a User Interface is, what is UX??
Here’s my (quick) take... UX is a practice – an industry. The history of it is very short, but the roots run deep in design.
That said, it’s not something that can be designed. I’m designing this presentation, but your experience is very different than another person’s.
UX is strategic. It is art/design and science. UX is Extremely Multi-Disciplinary. We all “do” UX in someway or another.
We just have to unpack what you know, look at it together, and put it back together so you can see how your creative practice fits in the UX umbrella.

42. Goals of UX
Memorable Desirable
Useful
(valuable)
Easy-to-Use
(intuitive)
Let’s start with goals. What are we trying to ultimately accomplish with our designs?

43. Tensions in the
Environment
• People expect more performance from that
Human
wants & needs
which they consume (often times for a lower
price)
• Technology is challenged to meet performance
demands and pull on resources (or don’t
perform)
• Institutions want to change and improve Problems
processes, optimize technologies, and reduce
Institutional
costs & increase revenue - all of which pull on
people
rules & objectives
Technical
feasibility
Truly, where tensions exist, problems arise. So, a
consistent, comprehensive, measurable approach
is needed to find balance.
OKAY. Intro to the Environment Venn: Business, Technology, & Humans
Now, I know famous industrial design firm IDEO has something very similar, but I have a little different take on it.
We saw how pervasive technology had become so pervasive into Human life, this model helps us identify where to start looking for solutions.

44. Tensions in the
Environment
• People expect more performance from that
Human
wants & needs
which they consume (often times for a lower
price)
• Technology is challenged to meet performance
demands and pull on resources (or don’t here we
This is w roblem
perform) ep
frame th er paths
• Institutions want to change and improve to uncov us to
that lead s
processes, optimize technologies, and reduce solution
Institutional
costs & increase revenue - all of which pull on
people
rules & objectives
Technical
feasibility
Truly, where tensions exist, problems arise. So, a
consistent, comprehensive, measurable approach
is needed to find balance.
OKAY. Intro to the Environment Venn: Business, Technology, & Humans
Now, I know famous industrial design firm IDEO has something very similar, but I have a little different take on it.
We saw how pervasive technology had become so pervasive into Human life, this model helps us identify where to start looking for solutions.

45. Continuously Improving the UX
This is an illustration that I started working on about 3 years ago.
Most designers have a similar process. Wisdom + Craft uses the infinite loop metaphor to demonstrate continuous improvement.
Start with the Customer; make a hypothesis. Then go through all the steps. Sometimes these steps are 2 weeks, sometimes 2 hours, but they have be executed every time.
Ideating and Prototyping includes all Discovery Activities (hence all the colors)
The notion of “Sprints” is for Agile. Discovery is always working on what will be implemented 2 sprints out as we see....

46. UX + Agile
Sprint 0 Sprint 1 Sprint 2 Sprint 3
Release Planning
Implement Implement Implement
High Dev Cost & Sprint 1 Sprint 2 Developer Track
Low UI Cost Engineering & Implementation
Designs Designs
features
Discovery, Design for Design for Design for UX Design Track
Design, & Scoping Sprint 2 Sprint 3 Sprint 4 Ideation & Specification
Collaboration
With thorough collaboration Validate Validate
Research for Sprint 1 Release Sprint 2 Release
between business, marketing, Sprint 3 Release
UX Discovery Track
User Research & Planning
as Research for as Research for
design, and engineering teams, we
Sprint 4 Sprint 5
ensure production success.
Adapted from D. Sy & L.Miller - Autodesk
So, we must still coordinate all of these activities, but it needs to be threaded into the release cycles. Note: this works better as animation, but the important point is that Discovery is always
working on uncovering insights that will be (theoretically) released 2 Sprints out.

47. UX Discovery
So, what do “Discovery Activities” look like? Here is a small sampling...

48. Modes of Research
❖ Formative ❖ Exploratory
❖ Incremental, smaller studies to
help guide development and design ❖ After data is gathered,
intended to find
❖ E.g. Prototyping, market testing, interpretation
user acceptance
❖ Summative ❖ Generative
❖ Post-release, generally needs larger ❖ Creating models that inform
amount of data
❖ E.g. Establishing baselines,
ensuring broader, market
acceptance
Simplifying modalities of research..

49. “Lead with the Listen”
•Reviewing Analytics
•Stakeholder Interviews
•Contextual Inquiry
•Moderated Usability Testing
•Task Analysis
•Surveys
•Ethnographic Field Studies
•Split Testing
Only examples and not intended to be comprehensive. There are many more in practice.
Chant this: “Lead with the Listen, Lead with the Listen, Lead with the Listen”
Don’t ever forget it.

50. Listening & Observing
Review Analytics & KPIs
Get the KPIs. Ask for them. If there are no KPIs set, that’s a point of observation and should be including when drafting your problem articulation.

51. Listening & Observing
Moderated Usability Testing
Ethnographic Field Studies
Here are some examples of Contextual Inquiry activities,
Typically, we’re just gathering data. For ethnography, We’ll develop a guide that helps us stay focused.
In usability Testing, we’re usually looking for significantly problematic issues. If the test moderated, this usually involves giving instructions and asking questions. Biases can be introduced. So,
moderators need to be skilled in soft-skills to keep the participant as close to the real-world as possible.
What are we observing? This could be processes that are taking too many steps, too long, or unable to complete. There’s usually a blend of quantitative and qualitatives measures.

52. Fun with Data!
•Rapid Assessments
•Heuristic Evaluations
•Landscape Analysis
•Design Studios
•Affinity Mapping
•Participatory Design
•Card-Sorting
•Content Inventory/Audit
•Whiteboarding
•Empathy Mapping
Only examples and not intended to be comprehensive. There are many more in practice.
Let’s have fun with data!

53. Exploring & Interpreting
Notes:
Various workshop activities, Affinity Mapping on the Right
Participatory Design Workshop (Design Studio) on the left.
Use cards and Empathy map for generative research. (foreshadowing to our assignment this week)
This bottom photo is at message first, in which we were getting ready to have a massive exploratory session... you might be able to see the paper on the side walls as well. Using long stretches of
butcher paper like this is good because we can roll it up take it to a client, or if we’re at a client’s place, we can roll it up and bring it back to our workshop/studio.

54. Exploring & Interpreting
Card Sort
Card Sort
This is from a navigation and content audit of about 15 similar Web properties that had some overlap. Client wanted to homogenize all properties and eliminate special considerations of brand
particulars. Note, that sounds sophisticated, but it was a bad idea. Users rejected it.

55. •Problem Articulation
•(Re)Vision Casting
•Experience Principles
•Scenarios & Narratives
•User Journeys
•Personae
•Concept + Logic Models
•Thematic Lenses
•Visualizations
•Validation
Only examples and not intended to be comprehensive. There are many more in practice.
After exploration and interpretation, two things need to happen: we need to create models or illustrations that inform business and we need to validate. If we validate that there is in fact a
problem we need to

56. Modeling & Informing
Thematic Lens
Concept Visualization
Notes:

57. Modeling & Informing
Current-State Future-State
Vision Casting

58. Modeling & Informing
Personae Scenarios & Narratives
Only examples and not intended to be comprehensive. There are many more in practice.
Personae and Narratives

59. Modeling & Informing
Personas, Narratives, User Journeys

60. UX
Design
You should not be past 24 mins.
So, what does the practice look like?

61. Design for User Experience
❖Lead with Vision
❖ What does success look
like?
❖Design from
❖ What are the business Information
goals?
❖ Personas
❖Moving Forward ❖ Concept Models
❖ We know who our users are.
❖ Voice of the Customer
❖ What outside resources do
we need?
❖ What are our competitors
doing?

62. •Sketching & Iterating
•Participatory Design Sessions
•Design Critiquing
•High-Level Wires
•Low-Fidelity or Paper Prototypes
•High-Level User Flows
•Hallway User Testing
•Draft Site Maps
•Content Drafting
Only examples and not intended to be comprehensive. There are many more in practice.
The point of this stage is to get prototypes out quickly
Iterating is important (include in visual)

63. Progression of Ideas
❖Ideation
❖ All ideas are welcome
❖ Ideas are not final, but a start
❖Prototyping
❖ Combine similar ideas
❖ Decide on ideas to move forward with
Presentation Notes:
Both of these need to happen in this stage of the UX Design Process
Without ideas, no starting point
Without prototyping, no forward movement

64. Ideation/Prototyping Principles
❖ Fail quickly, recover (learn)
quickly
❖ Don’t make final decisions too
early
❖ Explore multiple ideas, none too
much
❖ Perfect is the enemy of good
❖ GET OUTSIDE

65. UI Sketching
Sketching.....

66. Ideation/Prototyping Principles
More sketching and paper prototyping. The one with the grid overtop

68. iPhone mock-up templates. Used in a workshop with everyone sketching their ideas on how the UI should work.

69. http://Konigi.com
iPhone mock-up templates. Used in a workshop with everyone sketching their ideas on how the UI should work.

70. High-Level Wireframes. No details, no annotations. Best used as talking point in a series.

71. Ideation/Prototyping Principles
HTML HIGH-FIDELITY Prototypes built in Axure.

72. •Storytelling in the Context of
Business Scenarios
•Presentations
•Stakeholder Reviews
•Putting Ideas Forward
•Product Roadmaps
•Concept Documents
Only examples and not intended to be comprehensive. There are many more in practice.
Concepts don’t have to look good, just need to tell a good story
Few artifacts, more dialogue
Business context - scenarios

73. Telling the Story
❖Proposing
❖ Making suggestions
❖ Clients, investors, teammates
❖Prioritizing
❖ Levels of importance
❖ Alignment with business goals
Both steps are required
Presenting potential solutions to articulated problems
Decide what solutions to pursue first based on relative impact of the problems they solve
Proposing > Imposing
Propose, don’t demand
Prioritize each step

74. •Feature Set Details
•User Stories (Agile)
•Functional Specifications
(Waterfall)
•High-Fidelity Wires
(+Annotations)
•Final Copywriting
•Detailed Site Maps and User
Flows
•Branding Detail
Only examples and not intended to be comprehensive. There are many more in practice.

75. Building the Roadmap
Specify
❖What resources are needed?
❖How it will be built? Which
technologies?
❖Timelines
❖Articulating functional specs or
User Stories
Detail
❖ Fine-tune visuals and verbiage
❖ Steps in User Flows
❖ User interface annotations
Put together a Plan to get there!
In this stage, we decide on detail action steps and resources on how to create our product. It’s not usually a single document, but rather a collection of documents.

76. Building the Roadmap
HEre are some User Flows. detailing the steps in an intended user experience.

77. Detailed Wireframe

78. Detailed Wireframe

79. Detailed Design

80. •Development Teams
•Collaborative Working
•User Acceptance Testing
•Performance Management
Only examples and not intended to be comprehensive. There are many more in practice.
In this stage, we actually build the product
Work with developers
Help users get comfortable with changes

81. •Listening Process
•Feedback Loops
•Analytics & Metrics
•Continuous Improvement
Only examples and not intended to be comprehensive. There are many more in practice.
In this stage, we release the product and monitor success
Use analytics to measure results
Analyze results to inform future improvements

82. UX
Considerations when
Working with Professionals
You should be at about half-hour mark
You want to think about what you really need.

83. Disciplines of User Experience
Strategy, Operations, & Management
Discovery Design
The Interface
Cognitive & Social Sciences
Service Design
User Research
Communications
Usability Testing
Information Architecture
Business Analysis
Branding & Aesthetics
Analytics & Statistics Engineering
These while we’re thinking about the different disciplines.

84. Main Take-Aways
❖ User Interface Design is only one aspect of UX
❖ “Experience” is owned by the user; cannot be “designed”
❖ The process is ultimately about framing problems and
uncovering solutions
❖ We’re all “User Experience” practitioners when we uncover
who our audience is and craft something for them.

85. UX
Thanks!
@chrispalle
chris.palle@wisdomandcraft.com

86. UX
RUA or Q&A?

87. UX
Current Trends in the Field

88. Current Trends & Future Innovations
The Interface
❖ Ubiquitous Computing
(ubicomp)
❖ Pervasive Technology - many
digital touch points
❖ Mobile Phones, Tablets,
Ebook Readers
❖ Augmented Reality
❖ Context-Aware Computing

89. Current Trends & Future Innovations
The Interface
❖ Gestural Input
❖ Touch - Tactile, Haptic
Feedback
❖ Wii, XBox Kinect
❖ Search (Findability)- Yes, this
is still trendy
❖ Education Technology
❖ Affective Computing

90. Current Trends & Future Innovations
User Research
❖ Context is Everything
❖ Gender HCI
❖ Social & Cultural Implications
❖ Research Tools
❖ Remote Usability Testing
Understanding the users’ contexts and their motivations, attitudes, preferences to propose new ideas
Gender HCI - focuses on the differences of how men and women interface technology

91. Current Trends & Future Innovations
Hyper-connectivity
❖ Network Science
❖ Semantic Web
❖ The Web of Data
❖ Natural Language Processing
❖ The Web of Things
❖ Social Business
Machines are able to act more intelligently and contextually as everything becomes connected,
your car, your alarm clock, your refridgerator.
Machines are able to record and interpret information in more natural way.
Going back to Ubicomp
Social businesses leveraging social technology to operate. Think of this as Facebook behind the firewall.

92. Current Trends & Future Innovations
Communications
❖ Information Visualization
❖ Content Strategy
❖ Branding Strategy
❖ Social Media
As mentioned throughout this presentation, COMMUNICATION plays a huge role in the user experience.
Talk about: Feedback Loops.
Governance of our communications is considering the end-user experience

93. Current Trends & Future Innovations
Business Empathy
❖ Management and Leadership in ❖ End-User Development
UX
❖ Defining Return on Design
Investment
❖ Cross-Channel Design and
Management
❖ Improvements in Process
❖ Agile, Lean (“borrowed” from
Manufacturing) Rapid
Prototyping
This is important because as UX becomes a strategic play for organizations, UX needs to grow up.
In fact, and we’ll get into this in the later modules, user-centered design is no longer enough and it’s naïve to forget about the organizations and people who have to implement designs.
Again, thinking about ubicomp, we need a way to manage all those channels
We’re also seeing trends in improving our process, which we’re going to look next .
but we’re identifying ways to iterate our design thinking more rapidly, by releasing smaller productions and involving the end-user, or co-creating, with our audiences.

94. UX Thanks!
Assignment
Look at the list of disciplines and current trends and write an essay on the topic that’s most interesting to you.
The Five Fives
In the course material, You’ll find the Five Fives. These are five People; Books; Blogs: Posts, Articles or Presentations, and Conferences