My Design Process

"It's all about love...making someone else's existence just a little easier...nothing else matters."

This is the foundation of my design philosophy.

I think that as designers we are ultimately just trying to make people's lives a little easier.

I follow a 5 step process called "Design Thinking" 

it looks something like this...

Step One: Empathize

is perhaps the most crucial and most often overlooked stage in design.

What exactly is empathy?

For Ingrid Zippe, "Empathy is the ability to fully understand, mirror, then share another person's expressions, needs, and motivations. In UX, empathy enables the me to understand not only the users' immediate frustrations but also their hopes, fears, abilities, limitations, reasoning, and goals."

Empathy is one of the many soft skills that I use in my design process. Empathizing with users is key to understanding how to solve their problems—and ultimately, to building better products based around usable solutions. 

Empathy allows me to step outside of my assumptions so that I can see and experience the products that I'm designing from the perspective of the users. This creates well-informed and well-researched products that better serve the end users. Empathy helps me to understand and interpret people's emotional and physical needs. Empathic research focuses on facts about others, and their motivations, inspirations, and thoughts. It's inherently subjective, but it still holds validity as another tool in my arsenal of methods for creating usable products.

Users don't always tell you what they need

As a user-centered designer, I've found the need to develop creativity, emotional sensitivity, imagination, and intuition. With these skills, I can extract relevant insights that can help me make my products more usable and meaningful for users. People do not always know how to express what they need in a standardized way or give me all the details about what they want out of a product. I use empathy in order to really understand people.

Deliverables from the 'Empathize' Stage

Whatever the task at hand, I need to produce tangible records of my work. These records can include a wide range of items: data, reports, presentations, sketches, wireframes, prototypes, and more. These items are usually referred to as deliverables. Deliverables are the artifacts or other outcomes that I produce from the work that I do.

"Artifacts—the concrete items produced by the designer—can take many forms."

Deliverables let me coordinate with other teams and various stakeholders, document my work, and create materials for ideation sessions and meetings. They also help create a single source of truth; they can serve as specifications and guides for reference and future implementation.

Below are some examples of common types of deliverables that I might create during the empathize stage.

Personas

persona is a fictional user's profile, which is used to communicate and summarize user research. You can see example personas from some of the projects I've worked on below.

Each persona has defined goals and characteristics, which are representative of the needs of a larger group of users. I use personas to represent many users at once because designing for an individual composite "person" is easier than trying to design for thousands of different people.

Empathy Maps

An empathy map is a graphical tool that I use to imagine things from a user's perspective. It usually asks you to answer some questions from a user's perspective as they encounter a task, such as the following: What do they see and hear? What do they think and feel? What do they say and do? By writing down these imaginings, I can more clearly conceptualize the persona interacting with a problem.

Here's an example of one...

Step Two: Define

In the define stage, you connect the dots from the empathize stage.

You describe and analyze your observations so that you can better define the core problems that you and your team have identified up to this point.

Deliverables from the 'Define" stage

Problem Statement

A problem statement is a simple but effective way for me to highlight the insights that I've uncovered with my empathy maps. Ultimately, when I'm making decisions, I must always return to the question, "Does this solution solve the problem statement?" If the answer is no, I have gotten off course. I ask this question frequently—I don't want to produce a fully developed product and then discover that it didn't actually solve the problem.

Competitive analysis report

competitive analysis report details the strengths and weaknesses of the competitors when compared to the business. Typically, it describes the target market of the business and details about how the features our products compare to our competitor's. It is beneficial to know what our competitors are offering, what needs we can fill, and what problems we can find solutions for.

I may engage in a heuristic analysis at this stage, which is a technique used to evaluate the interface and design of a product against specific design standards and principles.

Step Three: Ideation

is a fancy word for coming up with ideas.

By this stage, I've built a solid foundation: I have a clear understanding of who my users are and what they need, what problem I'm trying to solve, and what solutions exist out in the world already.

Now I can finally start thinking about what I'm going to make!

Deliverables from the 'Ideate' stage

Sketches

Sketching is a crucial skill in UX design If I can sketch simple shapes—like rectangles, squares, circles, lines, and stick figures—then I can quickly communicate concepts and revise them on the fly. If I can sketch quickly, I can share an idea and immediately influence the outcome of a meeting with stakeholders, instead of taking hours to make wireframes. Also, nothing is more frustrating than spending hours on wireframes and then having to scrap them completely and start over because there wasn't an initial consensus on direction.

Some examples of my sketches...

Mood Boards

A mood board communicates the artistic direction of a project. Mood boards are created through a collection of images, fonts, interactions, features, icons, and UI elements. It can be useful to look at different projects for inspiration about visual design and other features.

Here's an example of a mood board for a project I'm currently working on...

User Flows

user flow is the path that a user typically takes on a website or app to complete a task. The flow leads from the entry point, through a series of steps, and toward a final action such as purchasing a product. I use these as a tool to help demonstrate to my team members how a user interacts with an application.

Here's an example of a user flow. I made...

User stories

user story is a written description of how users will perform task. Each one should record all the steps a user will take starting with their goal and ending when that goal is fulfilled. There can be multiple user stories for one application, depending on what a user is trying to accomplish and whether they're working toward a main or tertiary goal. I use user stories to clearly demonstrate how my solution resolves my problem statement.

Here's an example of user stories I created for a project...

Step 4: Prototype

In this stage, the I create inexpensive, scaled-down versions of the product.

These prototypes are useful for investigating the design solutions generated in the previous stage.

This stage helps me get a better idea of the challenges and constraints that are present.

It allows internal and external stakeholders to get a better idea of how real users will interact with the end product.

Deliverables from the 'Prototype' stage

Wireframes

Think of a wireframe as a blueprint that provides the basic framework of a website. Some features are included, but they are not very detailed. 

Wireframes are valuable because they include enough features to conceptualize what the product will look like and how it will function—without spending too much time on visual details like color and typography.

Here's some examples of a wireframe I made...

Prototypes

prototype is a clickable series of connected mockups that simulates how the solution will work when it's built. Sometimes it is difficult to explain a concept to team members; a clickable prototype that functions like the real software can help with clarification.

Here's a demo of a clickable prototype I made in Figma...

Step 5: Test

In this stage I go through the process of real-time testing.

Although this can seem like the last stage before a product is sent over to the developers, design thinking is actually an iterative process. The results generated during the testing phase are often used to define pain points in a product's design.

Then I might go back to the prototype stage and work through these issues before retesting the product.

Deliverables from the 'Test' stage

Usability report

usability report is a document that allows me to gain insight into user expectations and frustrations. It can be crucial in evaluating the product's success. It provides insight into user frustrations and behavior, which can provide me with feedback to improve the product.

Analytics report

An analytics report is a custom report with dimensions and metrics that I decide are key success metrics. It's a good way to explore custom information and deeper targeted metrics about the product.

More by Pat Santiago

View profile