Artifacts 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 Specifications

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

info Quick Definition

Detailed documentation that translates designs into development instructions—the bridge between design and code.

What are Design Specifications?

Design specifications are detailed documents that describe design intent precisely enough that developers can implement it without returning to designers for clarification. Specs cover everything: spacing (the button has 16px padding), colors (the primary blue is #0066FF), interactions (on hover, the button becomes 2% darker), and edge cases (disabled state shows 50% opacity).

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.

Red Routes

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

info Quick Definition

The top 5 user journeys your product must support flawlessly—identify these and everything else is secondary.

What are Red Routes?

Red routes are the core user journeys your product must support perfectly. The term comes from London’s Underground—red routes are the main lines that carry the most traffic. Everything else is secondary.

For an e-commerce site, red routes are: browsing products, reading reviews, adding to cart, checking out, and contacting support. Everything else (wishlists, recommendations, social sharing) is nice-to-have.

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.

Site Maps

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

info Quick Definition

A hierarchical diagram showing all pages and how they relate—the blueprint before you design a single page.

What is a Site Map?

A site map is a visual representation of a website’s structure. It shows every page and how they connect. The homepage sits at the top. Product pages branch down. Support pages branch separately. Each page has a clear parent and siblings.

A site map answers: “Where does this page live? What pages are at the same level? What pages are nested inside?” Without a site map, designers design pages in isolation. Pages feel disconnected. Navigation feels random.

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”).

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.