LEARNING JOURNEY

EmpathyMe

UX Product Design & Research

A mobile app with interactive lessons that teach users about empathy, why it’s important, and how they may benefit by using it in everyday life.

mountain icon

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.

bullseye icon

Goal

This app will provide an easy and fun resource that teaches top-level points of empathy with real world applications.

USER RESEARCH

Discovery

objective icon

Objective

Focused on designing a product that offers unique value, I conducted research to understand how users feel about learning interpersonal skills from a digital product and how they might interact with it. I was curious about how effective a product like this could be, and what the process for teaching on a mobile app would look like.

I relied on user feedback to identify the “sweet spot” of content: enough new topics and concepts, but not so much that it overwhelms users. Staying aware of my own inherent bias towards psychology, I was careful to represent a variety of perspectives. I was prepared for users’ reactions and comprehension to affect the direction of the design.

user icon

Participants

I included a demographically diverse group of users with varied knowledge about empathy who represent a variety of environments in which these skills might be applied.

EmpathyMe Couple looking at phone together
methods icon

Methods

Primary research included surveys, interviews, and observational studies from a varied selection of user types.

Secondary research revealed few competing or similar products, indicating a gap to be filled.

RESEARCH SUMMARY

Understanding the User

results icon
PAIN POINT

Required Registration

Requiring information before being able to access content forces users to invest in something they have little or no information about yet.

results icon
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.

results icon
PAIN POINT

Real World Connection

The connection between psychological education and real-world application is a step that is sometimes omitted from teachings.

Persona: Pia

User Persona Pia Mansares

“As a loving grandmother, I wish I knew the right thing to say so that I don’t annoy my daughter-in-law and we can all spend more happy times together.”

Persona: Sanjay

EmpathyMe User Persona Sanjay Kumar

“As a devoted husband, I want to be better at talking to and comforting my wife so that our marriage continues to thrive.”

hypothesis icon

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.

bullseye icon

Goal Statement

Our mobile app teaches users about empathy and how to use it in their lives, which will affect anyone they interact with by guiding them towards closer and kinder communication.

EXPERIENCE

Designing for User Needs

Ideation

Potential areas for improvement were explored using creative brainstorming exercises like “How Might We?“

INFORMATION ARCHITECTURE

Sitemap

JOURNEY

User Flows

paper wireframe
DESIGN

Paper Wireframes

Layouts for each unique section of the app were created using Rapid Drawing.

digital wireframe

Digital Wireframes

DESIGN + INTERACTIVITY

Lo-Fi Prototype

RESEARCH

Usability Testing

USER NEEDS

Study

The lo-fi prototype was tested remotely in an unmoderated study. Five participants completed four tasks and rated their overall experience.

I tracked progress toward my research goals with these KPIs:

USER FEEDBACK

Objectives

Answering these questions helped me to forge a clearer path forward with my design.

chart icon

Finding

Some users were unable to find the email newsletter signup.

chart icon

Finding

Two Examples subheadings confused some users.

chart icon

Finding

Too many dots and different ways to swipe.

ITERATE

Refine Design for User Needs

DIGITAL WIREFRAMES

Response Examples

Originally featuring three different layout styles for visual interest, the Response Examples section was simplified after users expressed confusion during testing.

DIGITAL WIREFRAMES

Email Signup

Most users found the email signup form difficult to find, so the link was moved to the top nav bar, accessible from anywhere in the app.

UNIVERSAL DESIGN

Accessibility Considerations

accessibility icon

Color Contrast

Luminance contrast ratios were verified accessible and compliant to WCAG level AA requirements.

accessibility icon

Hierarchical Headings

Text is labeled H1-H6 throughout to aid in navigation and help users determine hierarchy of information.

accessibility icon

Navigation Options

Users can choose to directly access topics they wish to learn about or to take a sequential journey.

ELEMENTS + GUIDELINES

Design System

POLISHED DESIGN

Hi-Fi Prototype

Next Steps

steps icon

Enhanced Desktop

A more robust version could include interactive games and activities to do alone or with others.

steps icon

Explore Imagery

I would like to conduct image user testing to understand more about what resonates with users the most.

steps icon

Connect Users

Provide an arena to share their experiences and knowledge with a like-minded community.

Let's Chat!

Questions? Ideas?
There’s plenty to talk about.

call icon

(404) 822-5345

RWS hero mockup
Remote Work Specialists
EmpathyMe three phone hero circle BG
EmpathyMe
Bebos Bikes laptop and phone hero circle BG
Bebo's Bikes
Revance Aesthetics circle hero booth
Revance Aesthetics
Lagona Apothecary circle hero
Lagona Apothecary
Original Love Notes circle hero
Original Love Notes
More circle hero
More