Skip to main content

Empathy in Web Design

By March 23, 2020May 21st, 2020Design Tips

Raving Software Empathy In Design Thought of the Day


What is empathy? defines empathy as “the psychological identification with or vicarious experiencing of the feelings, thoughts, or attitudes of another.” With empathy, a person identifies with another, putting themselves in place of the other person and imagining how that person views the world. Taken to the extreme, empaths are often described as those that possess a paranormal amount of empathy towards others—those that can easily comprehend another’s emotional state.


In a culturally diverse world full of various cultures, languages, and backgrounds, it is critical web designers put themselves in their user’s place and see the website as their users will see it, especially when the focus of the webpage has a targeted audience such as a church, a restaurant, or an automobile repair shop. Getting out of your own comfort zone is vital to be able to create an elegant design for your diverse users and, hence, a great website.

Empathy of the target audience is essential to proper design of each website element including the architecture, hierarchy, color scheme, font selection, page layout and functionality, accessibility, and especially usability testing of the website. As a developer puts himself/herself in place of the targeted user, he/she can envision the user’s expectations, habits, feelings, and concerns. This process provides the user with the web experience we want to deliver.

If the designer is planning a fun website, it is imperative to ensure that is what the user will experience when using the website. For example, as discussed in the article “6 Typeface Categories and How They Affect Design,” typefaces can affect the website’s personality and add to the overall professional, fun, friendly, or sophisticated impression of the website. Selecting a typeface that has fun elements will help to support the design. Congruently, selecting a “fun” color scheme while supporting the well-proven 60-30-10 website color scheme rule of thumb—using about 60 percent of the primary color, 30 percent of the secondary color, and 10 percent of the accent color throughout the website —will support an overall solid user-interface design with a fun feel.

A real-world example of using empathy in the software development process would be the website design for Wesley Grove United Methodist Church and Preschool in Hanover, Maryland. Prior to starting the project, Pastor Marion Easterling requested the website reflect a warm, caring, family-oriented design with a focus on inclusiveness and love for God. Every element of the website was designed with this vision in mind. Empathy was used to ensure the correct outcome—envisioning how the end users would interpret each website element. Each word, picture, form, and functionality were meticulously selected and produced to support the right user experience. For example, the church logo was created, tweaked, and further refined to ensure the correct visual brand. The original color scheme and menu design was determined to not fit the overall desired impression and was re-engineered to ensure the user experience met the end goal. Empathy of the user experience was central to the entire design process and even the testing process. The website was tested and retested in many different formats, browsers, and sizes as various users would use the website differently. The focus of each test was always how the user would view and use the website. In the end, the website embodies the focus and feeling Pastor Easterling had originally envisioned which is now drawing in new visitors and preschool registrations.


In web design, it is imperative to use empathy to ensure your website meets the desired end state. As a web designer, you should continuously imagine how your user views the world and, hence, how the user will experience the website with the nonstop process of asking “how will this be perceived by the user?” By using this method, the web designer will produce a much higher quality website and will have significantly happier clients.


Is there a design topic you want to know more about? Let us know in the comments or contact us through email.

Keep up with all the latest developments and projects from Raving Software on Facebook, Twitter, LinkedIn, and Pinterest.