Experience Design

The Elements of Experience Design (XD)

Elements of Experience Design

Experience Design (XD) is the discipline of creating solutions that clearly and concisely present information and functionality to individuals based on their roles, situations, and needs. When the diverse elements of experience design are put together in organized, structured, and creative ways, the results are meaningful and actionable and for users.

The Goal of XD

The goal of Experience Design is to drive adoption, productivity, collaboration, profitability, and user satisfaction through sound techniques of solution definition and design.

Experience Design defines solutions that focus on understanding and gaining alignment around:

  • Solution vision
  • Tool capabilities
  • Target audience
  • User needs and objectives

XD designs solutions that present actionable information and meaningful functionality to users. Common artifacts include:

  • Interactive wire frames
  • Mockups
  • Style tiles
  • Visual design guidelines

XD Thinking

Experience Design techniques provide insights for designs that work for users. The XD discipline draws on approaches from many other disciplines, including psychology, sociology, engineering, biomechanics, industrial design, physiology, interaction design, visual design, user experience (UX), and user interface (UI) design. Here are a few examples that illustrate XD thinking.

  • Iterate early and often on interface design to validate and refine requirements.
  • Understand the tasks and goals of users through user research and empathetic design.
  • Make the tool do the work – fit the solution to the user, not the other way around.
  • People are good at some things, and machines are good at other things – optimize for both.
    • Humans are better at recognition than recall, so don’t make them remember a lot of details.
  • To err is human, so anticipate mistakes and design for smooth recovery.
  • No one’s goal is to use the computer.
    • Understand how user goals relate to their real-world needs.
  • Implement models that encourage adoption by the user.
  • Information is the currency of decision-makers.
    • Provide users with access to the right tools and information that empower making the right decision.

Benefits of the XD Approach

Here are some of the benefits of the Experience Design approach:

  • Analysis
    • More accurate and complete requirements and user stories
      • Identify and prioritize relevant, high-value features
      • Lower the cost of business
  • Stakeholder
    • Gain consensus faster
    • Get stakeholder adoption earlier in the design and development process
  • Development
    • Improve process efficiencies
    • Reduce rework
    • More regular two-way communications with development
  • User
    • Increase user engagement and satisfaction
    • Decrease end-user ramp-up and training time
    • Fewer phone calls to customer support

What XD Isn’t

Experience Design touches on many areas in different ways, so there are common misconceptions about what it is and is not.

  • Not: simply producing wireframes and designs
    • Wireframes and designs are an output of the XD process
    • Discovery, research, and analysis are foundational for good XD
  • Not: just capturing requirements
    • Requirements gathering is still primarily in the domain of the product owner and the Business Analyst (BA)
  • Not: one-size fits all
    • Users come in many shapes and sizes with their own motivations, needs, and objectives
    • The solution must work for this variety without sacrificing efficiency
  • Not: only a single discipline or department
    • XD thinking informs many aspects of the business that consider the end-user

Elements of XD

The Experience Design approach is comprised of three domains or elements.

  • Strategic Foundation of User Research and Product Discovery
  • Structural Interior of Information Architecture and Interaction Design
  • Structural Exterior of Visual Design

Elements of XD Graphic

Strategic Foundation of User Research and Product Discovery

Through user research and product discovery, XD studies how people use technology. User research provides insight into user capabilities, limitations, motivations, and desires. By focusing on how people interact with products, tools, and processes, XD can create user-centric solutions that are relevant to the people who use them. Research methodologies also identify and measure human performance, technology performance, and human-computer interaction.

Here are typical activities and outputs of the Research and Discovery element of XD.

Deliverable or Activity

Description

Journey Map

A timeline-based visualization of the process that users follow to reach an objective. The map can also include user motivations, expectations, thoughts, and emotions.

Surveys

A standardized set of questions used to collect data about a target audience. Information gathered from surveys is often used to gain quantitative-based insights.

Focus Groups

A moderator-facilitated interview of a small group of people who share key interests or objectives around a particular topic or activity.

Interviews

A structured conversation where a researcher asks a representative user questions.

Personas

An aggregate profile or sketch of representative users based on feedback and comments from actual users. The sketch describes problems the users want to solve as well as demographics.

Contextual Inquiry

An in-depth observational study set in the context of where users work or live. Interview questions are a mix of prepared and impromptu queries; the latter are based on what the researcher discovers during the visit.

Usability Testing

Evaluation of a solution by having representative users perform typical tasks with it. The solution can be a functional one or a prototype.

Heuristic Evaluation

An expert review of a solution using accepted usability and design principles as evaluation criteria.

Mental Modeling

Explanations or visualizations of a users’ interior thoughts, attitudes, and experiences about how things work.

Structural Interior of Information Architecture and Interaction Design

Information Architecture (IA) focuses on how to organize a website’s structure to make the site’s information easy to locate, understand, and act on. The IA discipline accomplishes this by attending to a web site’s organization, structure, features, hierarchy, nomenclature, and labeling to create a blueprint for mapping interaction patterns and paths. Interaction Design considers how users interact with the information and content on a web site to accomplish their goals. If IA looks at the “what” of a website’s information, Interaction Design looks at the “how” users work with the information.

Here are typical activities and outputs of the Information Architecture and Interaction Design element of XD.

Deliverable or Activity

Description

Data Visualization

The graphical representation of information and data as an infographic, chart, or other image. The visualization helps stakeholders interpret data and identify patterns.

Storyboards

An organized visualization that illustrates the intended path users will take through a workflow.

User Stories

A general description of a feature as seen from the user’s perspective. The user story summarizes how a feature delivers value to the user.

Process Design

A technique for organizing and breaking down a large solution into distinct, manageable components.

User Design Patterns

Reusable components or assemblies of the interface that are used to solve common or recurring problems in user interface design.

Card Sorting

A method for evaluating the information architecture of a solution by having representative users rely on cards to sort, organize, and label topics into categories that make sense to them.

Content Audit and Analysis

A process for systematically cataloging and analyzing a website’s content and performance. Content includes copy, digital assets, link strategies, and URL structures.

Taxonomy

A system for classifying content on a web site. A well-structured classification system improves the ability of users to navigate the site and locate specific information, both by browsing and by searching.

User Scenarios

A summary of the motivations and objectives that users have for using your solution.

Structural Exterior of Visual Design

The objective of Visual Design is to craft a visually compelling solution with a unified image that reinforces the brand. The discipline focuses on visual elements such as color, imagery, shapes, typography, lines, white space, and form to improve usability, increase user engagement, and elevate the user experience.

Here are typical activities and outputs of the Visual Design element of XD.

Deliverable or Activity

Description

Style Guides and Style Tiles

A detailed set of standards that ensures visual consistency across every touchpoint of your website. Components include layout, colors, typography, fonts, and other visual elements.

Branding

The comprehensive dimension of a user’s experience with your organization, which is not limited to interactions with your website. Branding includes logos and symbols, names and labels, reliable online interactions, and other visual components.

Page and Product Compositions

The arrangement of images, text, and other objects on a page that gives emphasis to the highest-priority elements and deemphasizes the secondary elements.

Motion Graphics

A type of animation derived from film-making that focuses on optimizing the use of movement in the design process.

Icons

Small graphics used to start applications, features, or files by clicking on them.

Infographics

A visual representation of complex information using elements such as images, diagrams, charts, and text to convey ideas at a glance.

Design Patterns

Standardized visual and interaction solutions adopted to solve recurring design challenges.

Typography

The arrangement and presentation of text in a manner consistent with the brand.

Photography

A snapshot of a scene used to communicate something important about a particular moment in time.

Logo Design

The fashioning of an image or symbol to readily identify and organization.

HTML

Hypertext Markup Language (HTML) is how designers create the structure of a web page.

CSS

Cascading Style Sheets (CSS) are how designers create the layout for a webpage. It includes colors, fonts, and layouts.

Conclusion

The foundational elements of XD are important to understand, especially as it relates to our users and what they need from our businesses in terms of useful information. For more context on our XD practice, contact our XD experts today.

Wendy Marques, Associate User Experience Director at Perficient, contributed to this article.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sean Romer, Senior Agency Manager

Sean Romer is a Senior Agency Manager in the Experience Design (XD) group. Sean’s premier Perficient blog article, “The Elements of Experience Design (XD),” draws on his more than 20 years of experience as an XD consultant across a variety of industries.

More from this Author

Subscribe to the Weekly Blog Digest:

Sign Up
Follow Us
TwitterLinkedinFacebookYoutubeInstagram