Artifact on Fernando Ruiz

Customer Journey Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Customer Journey Map (CJM) is a visualization of the complete story of a user’s interaction with a product or service over time and across different channels. It narrates the experience from the user’s perspective, highlighting their actions, thoughts, feelings, and pain points at each stage.

What are Customer Journey Maps?

If Personas are a photo of your user, a Customer Journey Map is a movie about them. It doesn’t focus on a single moment, but maps the entire experience of a user as they try to achieve a goal, from the moment they realize they have a need until they resolve it and beyond.

Design Roadmap

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Design Roadmap is a strategic artifact that visualizes the design team’s priorities and work plan over the medium and long term. It aligns design initiatives with product and business objectives and communicates to the entire organization what the design team will focus on and why.

What Is a Design Roadmap?

Imagine a subway network map. It doesn’t show every street in the city, but it does show the main lines, key stations, and important connections. It gives you an overview of how to get around the city and the major future expansion projects. A Design Roadmap is that map for your product: it doesn’t detail every task, but it does show the major initiatives and how they connect to overall objectives.

Empathy Maps: Understanding Users at a Deeper Level

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An empathy map is a visual framework for understanding a user’s needs, feelings, and environment by exploring what they think, feel, see, say, do, and hear.

What is an Empathy Map?

Imagine sitting with a user for a day, observing everything they do, listening to everything they say, noticing what frustrates them, what excites them, what others influence their decisions. An empathy map is that day of observation, organized visually. You divide a page into sections: What does the user think? What do they feel? What do they see around them? What do they say to others? What actions do they take? Who influences their decisions? By systematically exploring each dimension, you move beyond assumptions into genuine understanding of what users actually need, what obstacles they face, and what drives their decisions. It’s not about data—it’s about meaning. Data tells you how many users abandoned at checkout; empathy mapping tells you why they abandoned and what would make them stay.

Mockups

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A mockup is a static, high-fidelity representation of a product’s interface. Unlike wireframes, mockups focus on the visual and aesthetic aspects, including colors, typography, images, and other graphic elements to simulate the final product’s appearance.

What are Mockups?

If a wireframe is the blueprint of a house, a mockup is the color model or 3D render that shows how the finished house will look. It’s a static (non-interactive) design that communicates the art direction and visual design of the product.

Personas

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Persona (or User Persona) is a fictional user archetype based on real research data that represents a group of users with similar behaviors, goals, and motivations. It is used to humanize users and keep the design team focused on their needs.

What are Personas?

Imagine you’re designing a backpack. You could design it for “everyone,” but you’d probably end up with something generic that nobody loves. Instead, you could design it for “Ana, a 20-year-old university student who commutes to campus by bike, needs to carry her laptop and books, and values sustainability and style.”

Prototypes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A prototype is an interactive simulation of a final product used to test and validate design concepts before development. Unlike mockups (which are static), prototypes are “clickable” and allow users to experience the flow of an application.

What are Prototypes?

If a mockup is the color model of a house, a prototype is a virtual guided tour through that model. It allows you to open doors, turn on lights, and move between rooms to understand what it feels like to live in it.

Service Blueprints

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Service Blueprint is a diagram that visualizes the relationships between different components of a service (people, processes, and objects) across the different stages of customer interaction. It’s like a [[Customer Journey Maps|Customer Journey Map]] with superpowers, as it not only shows what the customer sees, but also everything that happens “behind the curtain” to make that experience possible.

What are Service Blueprints?

Imagine that a [[Customer Journey Maps|Customer Journey Map]] is the view a diner has at a restaurant: they see the menu, talk to the waiter, receive their food. A Service Blueprint is the complete blueprint of the restaurant: it shows the diner, the waiter, but also the cooks in the kitchen, the ordering system, the suppliers who bring the ingredients, and the cleaning processes.

Usability Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A usability test is a fundamental UX research method for evaluating how easy a product is to use. It consists of observing representative users as they attempt to complete typical tasks on a prototype or real product to identify where they encounter problems and frustrations.

What Is Usability Testing?

Imagine you design the instructions for assembling an IKEA piece of furniture. You think they are perfect. Then, you ask someone to assemble the furniture following them and you watch in silence. You see that they get stuck on step 3, that they try to put a screw in the wrong place, and that they end up frustrated. You are not evaluating whether the person is “smart” or not; you are evaluating the clarity of your instructions.

User Flows

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A User Flow is a diagram that visualizes the complete path a user follows through a digital product to complete a specific task. It shows the screens, actions, and decisions the user makes from start to finish.

What are User Flows?

If a wireframe is the blueprint of a room and a sitemap is the blueprint of the entire building, a User Flow is the fire evacuation route. It doesn’t show all the rooms, just the specific sequence of steps to get from point A (e.g., “being in the hallway”) to point B (e.g., “being safely outside the building”).

UX Strategy Document

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A UX Strategy Document is an artifact that articulates the [[Strategy and Vision|design strategy and vision]] of a product or service. It connects business goals with user needs and establishes a high-level plan for how design will help close the gap between where the product is now and where it wants to be in the future.

What Is a UX Strategy Document?

Imagine you are going on a road trip across a country. You don’t just get in the car and start driving. First, you create a travel plan: you define your final destination (the vision), the route you will follow, the key stops you will make (the strategic pillars), the budget you need, and how you will know you are on the right track. A UX Strategy Document is that travel plan for your product’s user experience.

Wireframes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A wireframe is a low-fidelity visual schematic of an interface, similar to an architect’s blueprint. It focuses on structure, content hierarchy, and functionality, deliberately ignoring visual elements like colors, typography, or images.

What are Wireframes?

Imagine you want to build a house. Before deciding on wall colors or furniture types, you need a blueprint that defines where the rooms, doors, and windows will be. That is exactly what a wireframe is for a digital product.