How a Human Centered Design Process Infinitely Enhances Your UX and UI

The best design is focused on people. Always. 

In the world of Web and app design, we often use words like audience, clicks, likes, visitors, and users. Those words remove us a step from the fact that we are designing for people. Behind every click is a human being looking for something — a product, an answer to a question, or entertainment.  

The concept of human-centered design isn’t new. The overlap between human-centered design and User experience/UI design is large, though there are some subtle differences. In this blog post, we’ll explore the basics of human-centered design and how it overlaps with UI/UX, provide examples, and outline the process to create a human-centered design.

Here at UXPin, we think all great designs are human-centered.

Human-Centered Design Versus UX Design: Is There a Difference?

In many cases, there aren’t any meaningful differences between UX/UI design and human-centric design. However, there a few do exist.  

Firstly, human-centric design is broader than UX/UI design. The concept covers ALL design — physical and digital.. We  give designers the tools to create great user experiences online. In our context, UX Design is focused on the techniques and strategies for creating  people-focused design for apps and websites. Think of human-centered design as a mindset and philosophy and UX/UI design as a professional role. 

The other difference is a subtle, but important one. Here’s a  great explanation of human-centered design from IDEO.org, the design firm behind Apple’s first mouse:

“It’s a process that starts with the people you’re designing for and ends with new solutions that are tailor made to suit their needs. Human-centered design is all about building a deep empathy with the people you’re designing for; generating tons of ideas; building a bunch of prototypes; sharing what you’ve made with the people you’re designing for; and eventually putting your innovative new solution out in the world.”

When you scan the think pieces about human-centered design, the word “empathy” appears everywhere. The designers must have empathy for — and a deep understanding of — the people who will use the product. 

User experience/User interface design is focused on ensuring that website visitors or app users can access features intuitively. Actions are streamlined to remove sticking points from the user’s journey. Obviously, having an empathic connection with and deep understanding of the people who will use the website will improve design, but it’s not always a core element in the UX/UI design literature. 

Here’s the definition of UX Design from whatis.com: 

User experience (UX) is the art of planning a product’s design so that interactions with the completed product will be as positive as possible. 

This includes an end user’s interaction with and attitude toward a given IT system or services, including the interface, graphics and design. IT leaders concerned with UX ask questions to determine what their users need and value, and compare those findings to their IT system’s current abilities and their limitations.

User experience design (UXD or UED) addresses all aspects of how a product or service is perceived by users. Elements of user experience design include:

• Visually pleasing and interactive design;
• An information architecture that presents information in an organized fashion, paying special attention to features such as design and navigation themes;
• Accessibility
• HCI
• Ergonomics
• Utility
• Performance.

As you can see, there’s not a huge difference, but the focus on empathy is crucial — and can be the difference in creating just another website versus creating a website people love to use.

To sum up, the focus of human-based design is obvious, but we’re going to say it anyway. You are designing for people, in our case, for online apps and websites. You must have a deep empathy for and understanding of your audience and place them at the center of your UX design and NOT add design complexity to show off your dazzling design abilities — no one cares unless it makes their life easier. However, when you combine your dazzling design abilities with empathy for the people who will use your design; the result is dynamite. 

Human-Centered Design Examples

Before showing Web examples, I’d like to show one of the best examples of human-centered design – The Norman Door. 

When the human brain sees a handle on a door, we are triggered to pull. I’m sure all of us have at least once pulled on a door that says “push”. The solution proposed by Don Norman, who is a UX researcher, is fairly obvious in retrospect. 

The focus on functionality and usability here is based on understanding how the human brain works and responds to prompts and our environment. Another common example is children’s toothbrushes. If you have children, you know  how “fun” it is to get them to brush their teeth. Children’s toothbrushes are shorter; have large, easy-to-grip handles for smaller, less coordinated hands; and comic characters are often designed to encourage brushing. 

TV remotes are another example, with the most frequently used functions (volume, channels) more prominent for ease-of-use and ergonomically placed where either the thumb or index finger fall (depending on the design of the remote). examples we’ve all experienced are the evolution of the TV remote to having the most used buttons — volume and channels — moved to the top of the remote. Last but not least,, inverted condiments — no one misses smacking the bottom of the ketchup bottle to get the last bit out. 

In Web design, Trello is a good example of a tool that removes clutter to focus on project management and collaboration. Trello removes clutter and allows individuals and teams to keep track of projects. Here’s the project management template Trello uses.

The simple structure is easy to navigate, update, and keep an eye on progress. 

The Google search page is a masterpiece of simplicity. There’s a daily image. The search box (which suggests topics as you type, helping people find what they’re looking for). At the top right, those with Google accounts can easily sign in. 

Venmo is another triumph of human-centered design. Think about how painful it can be to pay someone back — get cash and give it directly to them, write them a check and mail it or hand it to them (which they then have to deposit); Paypal can be clunky; and unlike Europe, bank to bank exchange is difficult in the US; 

Venmo is a simple, easy to use app that even strangers can use to pay each other — for freelance work, for your fantasy football league dues, anything. 

Human Centered Design Thinking

Always include humans in the design process. In too many projects, no one talks to the people for whom the project is intended. This seems so obvious that it shouldn’t need to be said, but you have a greater chance of designing a website or app that people love when you include the people you want to love it in the design process. 

There is a wealth of resources about human centered design. This is a very short list to provide a broader perspective for you. 

• How to Utilize Human Centered Design for Your Website. A quick, refresher view of the process. 
• A Guide to Human-Centered Design Methodology and Process. A comprehensive look for UX designers about the process.
• Top 4 Principles of Human-Centerd Design. Exactly as the title says.
• Wikipedia has an entry on Human-Centered Design that covers criticisms as well.
• The Four Fundamental Principles of Human-Centered Design and Application. A more scholarly approach to the topic. 
• Using Human-Centered Design to Create Better Products (with Examples). An explanation and then a look at a number of examples to illustrate the concept.
• IDEO has a Design Kit and additional resources for human-centered design.
• Why Human-Centered Design Matters. From Wired, good insight from a practitioner of human-centered design.

Without vetting them, we didn’t want to list them, but it’s worth mentioning there are a range of online courses on human-centered design.

Human Centered Design Methodology and Process

The methodology of human-centered design aligns with the UX/UI design process. Different proponents of the methodology have slightly different processes, some have three steps. Others suggest five or more. Here are five steps for a human-centered design process. 

1. Empathy/Know your humans (end users).

You should have personas developed by speaking with the people who should use your design. Feedback from social media, beta testers, interviews, etc. are crucial to understanding what your people actually need, not just say they need. 

Every UX and UI designer can benefit from understanding the human-centered design process. As we’ve discussed, the differences aren’t huge. The biggest switch is a mental one. Stop thinking of users, clicks, and views and always keep the idea that you are designing for people at the forefront. 

That will keep you focused on what matters — delivering a user experience that will keep the people you serve coming back for more.  

You need to have empathy and a deep understanding of the needs and frustrations of the people you’re designing a solution for. 

2. Define the Problem.

Define the problem by asking “why?” What problem are you solving for? The goal is to get to the fundamental problem or issue, not focus on the symptoms. Keep digging until you understand the action that needs to be accomplished.

3. Generate Ideas

Time to brainstorm. At this point, don’t limit yourself. Gather as a team, even with the end users you’re designing for when it makes sense, and write down ideas on a whiteboard, Post-It Notes, whatever. Come up with as many ideas as possible. 

4. Prototype

For UX/UI design for apps and websites, it’s time to start wireframing (UXPin is a fantastic choice for wireframing, click here to try it for free).  Get to a minimally viable design and begin testing. The goal isn’t perfection at this stage, but to create a design to beging gathering feedback.

5. Test and Iterate

This part of the process is a core piece in any design protest. Test, see what works and what doesn’t. Gather feedback from the people you’re designing for. Don’t be defensive. Remember that while something may make sense to you as the designer, it may not for the people you’re designing for. And you’re creating something for THEM, not yourself. Keep the first element of this process in mind — empathize. Uncover why something works or doesn’t work for them, then make it better. Then, of course, do it again.  

The best part of incorporating human centered design methodology into your UX design process? Everyone wins. Your intended audience is more likely to love the website or app you design for them. In turn, these websites and apps are more likely to be successful — and profitable. 

Using UXPin as they Lynchpin of Human-Centered Design

The UXPin platform is ideal for bringing a human-centered design for a website or app from conception to life. With the ability to gather feedback from anyone at any stage in the UX design process, UXPin provides designers with the tools they need to create a great design and the suggestions and ideas of the humans they are designing for.