GOOGLE UX DESIGN CERTIFICATE PROGRAM
EmpathyMe
Interactive Mobile App
An interactive mobile app that provides a learning journey about empathy for adults of any age.
Challenge
It can be difficult for people to find information about empathy, why it’s important, and how to use it in the real world.
Goal
This app will provide a quick, easy, fun resource that teaches top-level points of empathy with real world applications.
Project Details
My Role
Lead UI/UX Designer
UX Researcher
Duration
8 weeks
Responsibilities
• User research
• Wireframing
• Prototyping
• Design
• Testing
EMPATHIZE & DEFINE
UNDERSTANDING THE USER
Research • Personas • Statements • Journey Maps
User Research
In creating a new app to teach users about empathy, I sought to understand how users feel about learning interpersonal, real-life from an app. Is it feasible? Effective? What would the process for teaching that look like? And how could I create unique value, when it is so easy to get information from a simple Google search?
PAIN POINT
Required Registration
Requiring users to provide their information before being able to access content forces them to invest in something they have little or no information about yet.
PAIN POINT
Worth Downloading
Users have an expectation that after downloading an app, the experience will be more robust than the results of an internet search.
PAIN POINT
Real World Connection
Creating a tether between information and application is a step that is sometimes omitted from online teachings about “people skills.”
Personas
Pia Mansares
Pia is a sometimes-overbearing grandmother who needs practical real world guidance on how to talk to sensitive or volatile people because she feels excluded from the family when she says the wrong things.
Pia's Journey
“As a loving mother and grandmother, I want to improve my interpersonal skills and learn more about the right things to say so that I don’t annoy my daughter-in-law and teenage granddaughters and we can all spend more happy times together.”
Pia’s navigation starts at the home screen and is directed at finding specific response examples.
Sanjay Kumar
Sanjay is a devoted husband who needs a better understanding of how to discuss difficult topics with his wife because he loves her and wants to improve their communication and connection.
Sanjay's Journey
“As a devoted husband, I want to be better at talking to and comforting my wife so that our marriage continues to thrive.”
Starting at the home screen, Sanjay’s navigation travels through the entire learning journey, including signing up for the email newsletter.
Hypothesis Statement
If it was easy for people to learn more about empathy and how to use it in the real world, then people might experience a greater potential for healing and deeper connection with others.
Goal Statement
Our educational mobile app teaches users about empathy and how to use it in their lives, which will affect anyone they communicate with by incorporating empathetic knowledge and skills into their interpersonal relationships.
IDEATE
CONCEPTING THE DESIGN
Competitive Audit • HMW • Rapid Sketching • Sitemap • User Flows
Competitive Audit
My analysis of the market revealed a wide range of products reflecting a variety of applications. I sought to identify logical gaps in competitors’ offerings, as well as components that worked well in my own user experience.
INSIGHT
Too broad; unclear
Empathy seems to be a term that can apply to many different things, from bereavement counseling to children’s gaming. Without additional descriptors in the name, it’s difficult to know how empathy is incorporated.
INSIGHT
Accessibility issues
From not being able to download the app at all on the “wrong” platform, to not being able to read dark-on-dark text, to narration without transcript, it was difficult to access content on a number of apps.
INSIGHT
Juvenile
Some competitors apps used gaming to make content more engaging and interactive, but the interface was heavy with a children’s aesthetic, thereby excluding a large part of the potential market.
How Might We
Ideas about areas for improvement were further explored using creative brainstorming exercises like “How Might We?“
Sitemap
The information architecture of the app follows both sequential and hierarchical navigation, with topics arranged according to their most natural position in the learning process.
The number of slides featured on each page is also included in the sitemap.
User Flows
FLOW 1: Sequential
Complete learning journey with email newsletter signup
FLOW 2: Hierarchical
Finding specific information about empathy: definition, examples, benefits, parts, practice, response, and/or more
DESIGN
STARTING THE DESIGN
Paper Wireframes • Digital Wireframes • Lo-Fi Prototype
Paper Wireframes
Paper wireframes were drawn, culled, and consolidated for each of the eight unique sections in the app:
• About
• Examples
• Qualities
• Benefits
• Practicing
• Response
• Approaches
• To Avoid
Digital Wireframes
Lo-Fi Prototype
Basic user flow was established in the initial prototype, complete with navigation, links, and connections.
Interact with the EmpathyMe hi-fi prototype in Figma:
TEST
TESTING THE DESIGN
Usability Study • Insights
Usability Study
During the unmoderated, remote studies, five participants completed four tasks and rated their experience on a System Usability Scale. Their feedback helped me to understand if the process of learning was intuitive and the information helpful.
I sought to answer: How long does it take users to find specific information about empathy? Are users more likely to follow a sequential journey or directly navigate to specific information? Do users navigate through all of the information?
Finding
Some users were unable to find the email newsletter signup.
Solution
A more visible text link to an overlay was placed just below the featured content in the Learn More section.
Finding
Two Examples subheadings confused some users.
Solution
The Response examples were changed to What to Say and What Not to Say and “of Empathy” was added to sub section titles.
Finding
Too many dots and different ways to swipe.
Solution
Swipe dots were replaced with text. In the top nav bar, dots to indicate subpages were removed, which also cleared space on all screens.
ITERATE
REFINING THE DESIGN
Mockups • Design System • Hi-Fi Prototype • Accessibility
Mockups: Examples
One of the main features of the app is the response examples, so I created three different layouts to add visual variety and prevent boredom while swiping.
However, user testing revealed that the different layouts were more confusing than helpful, so the responses were changed to follow one layout format.
Mockups: Email Signup
User feedback suggested that the email newsletter signup form was not easy to access – two users could not find it at all.
Maintaining alignment with our goal to engage, the form was moved from a slide in the Learn More section into an overlay linked from the top nav bar and accessible from anywhere in the app.
Design System
High Fidelity Prototype
The color gradients and emotional illustrations really brought the app to life. After a few changes made to the user flow and some navigational elements added for clarity, EmpathyMe v01 is complete!
Interact with the EmpathyMe hi-fi prototype in Figma:
Accessibility Considerations
Color Contrast
Luminance contrast ratios were verified accessible and compliant via WebAIM, based on WCAG level AA requirements. Throughout the site, ratios were tested and passed for their applied use in the design.
Hierarchical Headings
H1 - H6 headings were applied to text styles throughout the app, showing hierarchy in the layout and contributing to improved navigation by helping users to quickly determine at which information is most important based on sizing and fonts.
Navigation Options
Not only is this app designed to be a sequential journey, it is also organized in a way that honors hierarchy of topics. Users can choose to directly select a subject they wish to learn about or to take a step-by-step journey of learning.
REFLECT
REFLECTING ON THE DESIGN
Next Steps • Takeaways
NEXT STEPS
Enhanced Desktop Experience
Using this app as a foundation, the desktop version could include games, quizzes, more detailed information, and interactive activities to do alone or with friends and loved ones.
NEXT STEPS
Explore Imagery
A crucial element of this learning app is imagery, which adds an emotional, human element to the lessons and examples. I would like to explore more about which images and image styles resonate with users the most.
NEXT STEPS
Connect Users
Part of this app’s value is an easy path to content without registration, but this keeps them separate. I think a logical next step is to connect users so they can share their experiences and knowledge with like-minded others.
Takeaways
Impact
“I’m going to start saying that.”
In user testing, one participant reacted positively to the idea of having a resource for actual human-to-human communication and using it “like a language translator.”
What I Learned
I learned so much about empathy while working on this app, as well as the details of designing for a sequential experience. The biggest lesson I learned was from my users, who showed me how much people want to understand more about how to be kind to one another.
Presentation
View, print, or download the EmpathyMe UX Design PowerPoint presentation as a PDF.
Let's Chat!
Interested in my work?
Please get in touch with me, there’s much more to see!
AmyUIUX@gmail.com
PHONE
(404) 822-5345