Empathy in 5 Steps is a project created by psychotherapist and Vanderbilt University professor emeritus Volney Gay. During his 30+ years of clinical practice, Dr. Gay developed a five step process to better implement empathy in the every day lives of patients. This new project takes Dr. Gay’s Empathy in 5 Steps system online to help more people practice empathy daily.
The Empathy in 5 Steps project included a website, 5 Steps tool, branding and logo design. As the project’s UX Designer, my deliverables included user flows, site map, mockups, brand direction, and logo design. I worked closely with a developer and project manager to complete this task, as well as working directly with the client.
Challenge Statement: Create a new website and tool to encourage people to pause, reflect, and incorporate empathy in their everyday lives using the Empathy in 5 Steps process.
Project Kick-Off
After our project kick-off meeting with the team and client, I reviewed detailed notes and documents such as basic content, blog posts, photos of the 5 Steps paper prototype, and color/design inspiration the client had gathered. The client’s goal is to create a digital tool for his empathy process in order to help people. He already had a paper prototype of the five step system to use in his practice so it was up to our team to turn it into a user-friendly digital product, along with a new website. In addition to creating the digital version of the five step system, I was also tasked with creating the brand elements, including logo and color palette, and designing a user-focused website from the ground up.
I began my research and brainstorming by taking a look at the current mental health landscape, taking note of color, text, typography, UX design, and other elements. The client envisioned the 5 Step tool to be accessible to all and aimed at all demographics, as empathy is something everyone can practice. He also likes a clean, modern look with strong use of color. With this in mind, I created three different design options for homepage design direction to inform the look and feel of the website and 5 Step tool. Although there are many similarities in content and layout, the client ultimately chose design option 3(far right below), which was my favorite too. The client provided a few ideas in the form of art pieces he enjoyed as color inspiration. Many of the colors were difficult to use due to accessibility and readbility but I took those colors and chose shades in the color family that worked in the digital space.
Mockups
After the client chose his favorite design option, I got to work making updates to the homepage and designing the remaining pages, which included the Blog, About, Contact, and the 5 Steps tool. As this was a smaller, straight forward project, I decided to go directly to mockups as most clients do not respond well to wireframes as it’s hard to envision the end product. Here are a few highlights from the design process:
As the concept of Empathy in 5 Steps is new, it was important to help users quickly understand key points about it once they landed on the website. With this in mind, I created the How It Works/Why It Works section.I enjoy UX focused writing and wrote the bulk of the website content, working with the client on minor changes.
One design decision I made was to include a hamburger menu for top level site pages rather than have them in the top navigation. The main goal of the website is to have users focus on(and complete) the Empathy In 5 Steps tool, and I felt keeping the homepage as clean as possible would help achieve that goal.
Taking inspiration from the client’s paper prototype, I designed the Empathy in 5 Steps tool(mockup below). The client initially wanted a scroll feature similar to the one Apple uses to set an alarm or timer. After reviewing the questions, number of selections a user could select, and other requirements, we quickly discovered that was not the best option for the tool. Instead, a quiz style approach was what worked best and allowed for user-friendly elements like tool tips.
The client had a backlog of blog posts to help users understand empathy and the concepts behind Empathy In 5 Steps. The blog posts are featured on the blog site page, along with the homepage and the Empathy Summary page(appears when a user completes the Empathy In 5 Steps tool).
Additional site page mockups available upon request
Branding & Design
After my site audit and initial conversations with the team, I began assessing site pages and working on the site map. As I discovered during the site audit, much of the site’s content was difficult for a user to find, resulting in user site exits. A few site problems that were solved by reorganizing site content and pages:
One of the major issues I wanted to address was making it easier for a user to access the states, cities, and landmark pages. These were all buried on the original site, making it difficult to achieve the client’s tourism focus. I made “Plan Your Trip” one of the top level pages to ensure easy access to state, city, and landmark pages.
The Civil Rights Trail team created a lot of great content that could be linked to or used in multiple places on site but were not. For example, each state has a variety of content including landmark information, videos, photos, itinerary info, podcast episodes, and more. These were not included or linked to on the individual state page, and as a result, the bounce rate was high. This was a great opportunity to feature or link to helpful content and help users find more information for the state they were interested in.
On the original site, there wasn’t a clear way to reach the Civil Rights Trail team. A contact form was added to the site for more transparency and to help users reach out for additional information.
Project Recap
I really enjoyed working with the client and my team to create the Empathy in 5 Steps website and journal log. This project was fulfilling to work on for me professionally as it helps promote understand and empathy in everyday life. As a UX designer, it emphasized the importance of incorporating empathy in design decisions and advocating for the user. For example, due to the nature of the subject, users may feel frustrated or upset when needing to access the Empathy tool. Ensuring the Empathy tool was easy to access and complete, featured simple yet intuitive design, and provided opportunities for empathy was key.
How I collaborated on this project:
Worked with client to give direction to the brand, logo, and overall feel of the website
Collaborated with developer to determine functionality for the Empathy tool
What I learned from this project:
Tools
Figma, Stark Usability Tools, Microsoft Teams