John Biebel UX and Experience Design

What is Experience Design?

The Basics of UX and XD

The terms User Experience Design, Experience Design, and Interaction Design are becoming more and more common these days, but what exactly do they mean? When I’m asked this question, there are two ways I like to answer: a quick and ready example, and a deeper dive into the theory. Let’s begin with the former - an easy example that will help us get a familiar and helpful notion in our minds.

Most objects that pass through our hands have been designed before they were built: Someone at some point considered, “How should this be made?” Something as simple (or as complex) as a key, for example, has experience design embedded in it. First it began with some design requirements: To create a means by which a door, box, or latch can be fastened, and only opened by people who had express permission. Some other requirements could be, “It must be lightweight, something that can be carried in one’s pocket,” or “It must be reproducible, so that multiple users can have their own copy to use at will,” “It must be complex enough that it isn’t too easy to reproduce, hence rendering the key useless.” These requirements define what the design needs to accomplish.

SkeletonKeySingle.png

Different elements contribute to help inform what this design will eventually be. Who will need to use it? (The question of “Who?” is often answered by a UX tool known as a persona.) How often? What does “success” for the design look like? Many of these questions are investigated by a research team who find out important data about the existing problem: in this case, keeping doors closed and locked, but making the process of opening and re-locking them easier. A UX designer or XD practitioner would take these assets (problem statements, requirements, research) and add the element of design; what the final look and form of the solution will be. 

Put together, these UX pieces and stages should address the following concerns:

Why: Attitudes and motivations (Why do I need a key? What does a key do for me?)

What: Features and functionality (This is what a key does, and it works like this.)

How: Design, appearance, accessibility (The key manipulates the lock, looks like this, and can be used by most people either by sight or feel.)

It’s a fairly good assumption that the earliest locks and keys may not have been the smoothest or most reliable, so refinements were made. This was done through usability testing, noting “bugs” in the design, making adjustments to the design, and creating new versions of the key so that it would work better. Looking down at a key in your hand, it’s interesting to see that the basic design of the key is quite successful as it has remained only subtly changed over the years. It still functions much the same way as it did from the first metal keys made in the Tenth Century in what is now England.

KeysOnRing.jpg

Much like a larger and more complex system of design, the lock and key are a great example of a small bit of UX that exists within a much larger system: for instance, a door within a building of many doors, each with its own lock and key, with entrances and exits, part of an array of passages for a user to move throughout. Potentially, another user controls that passage by the use of those keys. Soon, many keys would be needed, kept on a large key ring - and a new role would be created (“The Keeper of the Keys”). What we’re describing is not unlike certain modern data security systems in which an administrator manages the access for many users through one dashboard or portal, where passwords or multiple authentication tasks take the place of keys. 

In this example, experience design is woven throughout, marked in particular by a designer’s empathy for the user. All people who are part of the process, from the researcher to the product manager, the writer to the designer, must embody a feeling of empathy for the problem that the user is trying to solve, or the task he or she is trying to complete. We gain empathy by looking as closely at the problem or task as possible, listening to what the user has to say, and designing with all of this data in mind as we move forward toward a solution.

I like to begin discussions of design with concrete, physical objects (because they’re easy for us to experience), but UX / XD is often associated with digital experiences these days. Most systems, processes, and procedures we encounter digitally are the result of extensive UX design. All of the above considerations are put into the making of a quality experience that supports a user, a learner, a shopper, or a reader, from their first entry into a system until they have left it, hopefully having fulfilled a task and learned in the process. Well-designed systems should be so intuitive and natural that they’re described as “invisible” because users hardly even know they’re there.

What are the processes and tools that experience designers use?

There are many activities that experience designers use to help create a thorough solution to a final product. Here are some, a number of which will be discussed in greater detail in future blogs:

Personas: Fictional characters who represent common user types. These are used to help create empathy for the user, his or her “story,” concerns, realities, hopes, ambitions, and needs.

Storyboards: A narrative, linear group of images with words that tell a story for a user’s actions, problems, and possible solutions.

Journey maps: A detailed diagram of steps, processes, and decisions that a user takes to arrive at a specific endpoint. It’s important to note that these are not places where “design” begins, but where designers define what the current landscape looks like. Opportunities for design can be identified while a journey map is being created.

User flows: A different version of journey map, user flows describes a current process (usually in an application) that follows what someone does to complete a task. They can also serve as an audit of a current application or process. User flows can vary in length or detail, but will often be used with a journey map to analyze current and ideal workflow experiences.

Diagrams (prototypes, sitemaps, wireframes): These different kinds of diagrams communicate how a final application will look, operate, and sit organizationally within a larger system. They are also intended for different audiences. Wireframes are usually used to prove out an idea for first-round design within UX and Product. Prototypes are usually used for testing and for demonstrating functions for Engineering. 

Analytics and usage reporting: When a design is finally released for learners to use, getting data back about how it is actually perceived, performing, and how users are interacting with it is essential as feedback toward iterating on future initiatives.

Case example: search, browse, facet, find:

Websites and experiences that give you information in quick, well-organized, meaningful ways are those that have put the user at the center of the design. Of the many features that you can find in a well-experience-designed application, search-and-browse is one of the most important. Really well-designed searches have made companies like Google and Amazon the powerful entities that they are today. Research has found that users often have two distinct paths when trying to find something (paths that can often intersect): searching for a specific term or item, and the ability to browse for something of which they’re not quite sure. This has been tackled very well by some online retailers, who, for example, provide faceted search experiences where a user can do a basic search, and then narrow down the results of that search into a more and more specific group of results. 

In the following example from gilt.com, a user has made a selection from the top menu for Men’s Shoes. He can then slowly whittle his general viewable list of available items by type (in this case Boots) and size (11), and then when this group has been displayed, other options are available along the top row for Brand and Color. Within less than 15 seconds, this user has taken a list of 1,669 items and narrowed it down to a more relevant 55.

GiltShoesMen.png

The technical means by which this is done involve tools of the UX designer’s trade: vertical menus, indented submenus, drop-down menus, check boxes, tiles or cards, scrolling pages with pagination (page numbering) to help the system load new images without overloading the search engine. So many functions are happening all at one time, but the designer strives to present this in such a way that it seems nearly invisible to the user; a group of actions that together create a smooth process for finding exactly the right pair of shoes in a timely manner.

This may be, perhaps, one of the most appealing aspects of the Experience Designer’s job - the fact that so much of what he or she does is virtually unseen by the end-user but enjoyed by the fact that it is unseen, or seamless. We become the scene movers, the curtain raisers on a stage that may contain some actors that take bows, but much of the magic that enables it to happen is carefully orchestrated by an extensive toolbox.