The Most Gnarly
UX Design
Methods & Deliverables!

Your comprehensive guide to the tools, methods, and magic that designers wield!

By Fabricio Teixeira | 12 min read · Jan 18, 2021

Email MeEmail Me! New! Share This Epicness!

What's Inside This Awesome Page?

Get ready to dive deep into the most common tools, methods, processes, and deliverables that designers use to create the digital awesomeness you love!

This is an updated version of a list published a few years ago. It's better than ever!

Community Divider

Service Blueprint

A map that displays all the touchpoints of the consumer with your brand, as well as the key internal processes involved in it. Useful to visualize the path followed by consumers across multiple channels and how you could improve that flow.

Related links:

Divider

Consumer Journey Map

A diagram that explores the multiple (sometimes invisible) steps taken by consumers as they engage with a service. Allows designers to frame the consumer’s motivations and needs in each step of the journey, creating design solutions that are appropriate for each.

Related links:

Divider

Personas

A relatable snapshot of the target audience that highlights demographics, behaviors, needs, and motivations through the creation of a fictional character. Personas make it easier for designers and digital teams to create empathy with consumers throughout the design process.

Related links:

Heart Divider

Ecosystem Map

A visualization of the company’s digital properties, the connections between them, and their purpose in the overall marketing strategy. Gives you insights around how to leverage new and existing assets to achieve the brand’s business goals.

Related links:

Computer Divider

Competitive Audit

A comprehensive analysis of competitor products that maps out their existing features in a comparable way. Helps you understand industry standards and identify opportunities to innovate in a given area.

Related links:

Alert Divider

Value Proposition

A reductive process in the early stages of product definition that maps out the key aspects of it: what it is, who it is for, and when/where it will be used. Helps the team narrow down and create consensus around what the product will be.

Related links:

Spot Divider

Stakeholders Interviews

Scripts for interviewing key stakeholders in a project, both internal and external, to gather insights about their goals. It helps prioritize features and define key performance indicators (KPIs).

Related links:

Notepad Divider

Key Performance Indicators

Pre-stabilished criteria to measure progress toward strategic goals or the maintenance of operational goals. KPIs help inform design decisions along the way and are an indispensable tool to measure the impact of your design efforts.

Related links:

Progress Divider

Brainstorming

The collective process of generating constraint-free ideas that respond to a given creative brief. Allows the team to visualize a broad range of design solutions before deciding which one to stick with.

Related links:

Funky Divider

Moodboards

A collaborative collection of images and references that will eventually evolve into a product’s visual style guide. Allows designers and clients to align on a look for the product before investing too much time in it.

Related links:

Divider

Storyboards

A comic strip that illustrates the series of actions that consumers take while using the product. Translates functionalities into real-life situations, helping designers create empathy with the consumer while having a first look at the product scope.

Related links:

Mc Hammer Divider

User Flow

A visual representation of the user’s flow to complete tasks within the product. It’s the user perspective of the site organization, making it easier to identify which steps could be improved or redesigned.

Related links:

Walk Divider

Task Analysis

A breakdown of the required information and actions needed to achieve a task. Helps designers and developers understand the current system and its information flows. Makes it possible to allocate tasks appropriately within the new system.

Related links:

Computer Divider

Taxonomies

An exploration around multiple ways to categorize content and data: topics in a news site, product categories in an e-commerce, etc. Assists designers in defining the content structure to support the user’s and the organization’s goals.

Related links:

Divider

Content Audit

The activity of listing all content available on a website. This list will come in handy at various stages of the project: see the big picture, define the content strategy, and check the details of each page.

Related links:

Notepad Divider

Heuristic Analysis

A detailed analysis of a product that highlights good and bad practices, using known interaction design principles as guidelines. Helps you visualize the current state of the product in terms of usability, efficiency, and effectiveness of the experience.

Related links:

Hacker Divider

Sitemap

One of the most classic IA deliverables: consists of a diagram of the website’s pages organized hierarchically. It makes it easy to visualize the basic structure and navigation of a website.

Related links:

Divider

Product/Feature Roadmap

A product’s evolution plan with prioritized features. It could be a spreadsheet, a diagram, a fully documented backlog, or a simple series of sticky notes. Shares the product strategy with the team and the road that needs to be taken to achieve its vision.

Related links:

Progress Divider

Use Cases and Scenarios

A comprehensive list of scenarios that happen when users are interacting with the product: logged in, not logged in, first visit etc. Ensures that all possible actions are thoroughly considered, as well as the system behavior in each scenario.

Related links:

Computer Divider

Metrics Analysis

Analysis of the numbers provided by an analytics tool or your own database about how the user interacts with your product: clicks, navigation time, search queries, etc. Metrics can also “uncover the unexpected”, surfacing behaviors that are not explicit in qualitative user tests.

Related links:

Web Trips Divider

User Interviews & Focus Groups

A panel of people discussing a specific topic or question. Teaches about the users’ feelings, opinions, and even language. Useful when the target audience is new or unknown to the team.

Related links:

Community Divider

Quantitative Surveys

Questions that provide numbers as result. Quick and relatively inexpensive way of measuring user satisfaction and collecting feedback about the product. It could highlight the need for deeper qualitative tests and research.

Related links:

Divider

Usability Testing

One-to-one interviews in which the user is asked to perform a series of tasks in a prototype or a product. Validates and collects feedback on flows, design, and features.

Related links:

Computer Divider

Card Sorting

A technique that consists of asking users to group content and functionalities into open or closed categories. Gives you input on content hierarchy, organization, and flow.

Related links:

Divider

A/B Test

Offering alternative versions of your product to different users and comparing the results to find out which one performs better. Great for optimizing funnels and landing pages.

Related links:

Spot Divider

Eyetracking

A technology that analyzes the user’s eye movements across the interface. Provides data about what keeps users interested on the screen and how their reading flow could be optimized by design.

Related links:

Hot Divider

Accessibility Analysis

A study to measure if the website can be used by everyone — including people with vision, listening, motion, cognitive, and other types of disability.

Related links:

Divider

Sketches

A quick way of visualizing a new interface by using paper and pen, or a digital software. Sketches are useful to quickly validate product concepts and design approaches both with team members and users.

Related links:

Computer Divider

Wireframes

A low-fidelity visual blueprint that represents the page structure, as well as its hierarchy and key elements. Useful to discuss ideas with team members and clients, and to assist the work of designers and developers, before going into high-fidelity, pixel-perfect deliverables.

Related links:

Divider

Prototypes

A prototype is a simulation of the website navigation and features, commonly using clickable wireframes or mockups. It’s a quick way to test and validate product flows, visuals, and experience before fully developing the product.

Related links:

Progress Divider

Pattern Libraries & Design Systems

A hands-on library that provides examples (and code) of interaction design patterns to be used across the website. It not only promotes consistency but also makes it easier to improve and maintain elements as needed.

Related links:

Spot Divider

Diary Studies

Diary studies are a way to collect data from users over time. Participants self-report their behaviors, frustrations, opinions, desires, and aspirations at defined intervals or in response to carefully designed prompts or tasks.

Related links:

Divider

Mental Models

Mental models are explanations of how users see the world. They influence product design every step of the way from the conception of an idea to the perception of an experience.

Related links:

Notepad Divider

Design Sprints

A Design Sprint is a unique five-day process for validating ideas and solving big challenges through prototyping and testing ideas with customers.

Related links:

Progress Divider
Check out our HOT new content! New! Don't miss out!

Looking for more guidance?

Don’t forget to subscribe to our newsletter, check out our starting guide to UX, and follow us on Twitter and Linkedin.

Yahoo Week Divider

Your Totally Rad Sidebar!

Visitor Counter

Your visitors since 1998: Counter 2

Quick Links:

Home

About Me

Email Me!

Sign my Guestbook!

Spinning Earth

Browser Compatibility

IE Logo Netscape Logo

Best viewed with Netscape Navigator!

Netscape

Under Construction Zone!

Under Construction

This section is still being coded. Check back soon!

Construction
Under Construction New! Generate your own 90s page here! Under Construction