User Experience and Diagrams

What often fascinates me about formulating user experience is essentially that in order to think out of the box, we have to exist in the box….or sphere…or honeycomb, you get the point. It makes sense though. Consider this – in Holger Maassen’s post on “UX Design-Planning Not One-man Show” he writes “experiences are momentary and brief – sometimes they are part of a multi-layered process or they are on their own.”

Experiences are momentary and brief – if we consider this fact alone today, it begins to provide context as to the sensitivity we must have as we make our approach into creating powerful moments in time. Explore Peter Morville‘s “honeycomb”.honeycombThere are a multitude of qualities that the process should adhere to but value / ROI is the center. Peter explains this center facet of the user experience: “Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.”

honeycomb – Peter Morville (P.Morville – Facets of the User Experience)

Probably one of the most widely used and respected user-experience diagrams was created by Jesse James Garrett. It could be found here. Jesse James Garrett said: “User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” (J.J.Garrett – The Elements of User Experience).

Here is a list of User Experience Diagrams posted by Luke Wroblewski in his interface design blog Functioning Form here


“The Elements of User Experience (PDF)
Conceptual model of the considerations involved in designing successful user experiences for Web sites. -Jesse James Garrett

User Experience Cycle (PDF)
The user experience is not one simple action -it is an interconnected cycle of attempting to satisfy hopes, dreams, needs, and desires. -Jess McMullin

Designing the User Experience
This poster illustrates the path to more usable products. -Usability Professionals’ Association

User-Centered Design Process (PDF)
Collateral created to communicate the SCM User Experience Group’s design process and how it fits within the PeopleSoft development cycle. – John J. Stickley

The User Experience Cosmos (PDF)
A Cartesian representation of our field. As in ancient maps, this is a rather subjective and personal representation of the territory. -Javier Cañada

User Experience Diagram Rationalization
In the spirit of convergence, the user experience diagram rationalization brings together the goals, processes, and disciplines that are responsible for great products. -LukeW

The Experience Cube
These six spectra can be plotted on a diagram in order to place typical interfaces and products and reveal their relationships to each other by these attributes. -Nathan Shedroff

User Experience Curriculum Diagram
Good UX crosses, technical (information and technology), reflective (testing and psychological) stuff, creative (design and emotion), sales (marketing and business) and social network boundaries without even trying. -Tom Smith

Design Process (PDF)
Experience Design Flow (PDF)
Poster sized maps showing the steps and deliverables through the UI/IA/UX project lifecycle. Maps various activities and deliverables against project roles and indicates major milestones. – Erin Malone

Insight-Driven UCD Process
This is a basic process framework for user-centered design in small, fast teams. -Challis Hodge

Dating example for Information Architecture (PDF)
Poster illustrating the stages of IA process (and comparing to dating relationship) – Miyuki Shimbo

Importance of User Experience
A concept map of general usability and user experience concepts. -Experience Dynamics

Interface Design Skill-set Diagram
This diagram has often helped me to explain my role and value proposition as an interface designer and product strategist. -LukeW

Definition of user experience
A tool for brainstorming and defining “goodness” of user experience for a product. – Niko Nyman

Experience Map
The “Experience Map” is an attempt to illustrate what an “ideal” scenario might look like when planning, architecting and designing an interactive experience. -Logic+Emotion” [1]

[1] Functioning Form – User Experience Diagrams.” LukeW Interface Designs | Web Application & Rich Internet Application Design. 03 May 2009 <>.

2 Responses to “User Experience and Diagrams”

  1. This looked like a wonderful set of resources, but sadly most of the links are now dead.

    • bradz says:

      Pete, thanks for the heads up and sorry for such a long delay in reposting. All the links should be fixed now. The realization is that there are so much more out there so I will be posting another set soon. Feel free to suggest any and thanks for reading / responding.


Leave a Reply