Their Mile

In my last quarter at the University of California, Davis, I finally got the chance to take DES 112 – UI/UX Design: Principle and Practices, a class that was fairly new to the design major. The course focused on developing students’ understanding of principles and guidelines related to UI/UX design for desktop and mobile devices. This was the final project for the course.

Challenge

How can we promote increased empathy for groups unlike our own through a mobile application?

Context

Even though social media seems to connect us more than ever, we’re still not listening to each other. The core of the problem is that people lack empathy for one another – especially for groups like the queer community. Should we have more empathy for those who aren’t like us, we might be more able to listen and understand one another, being less quick to judge. For this project, I felt that focusing on a building empathy for a specific group – the queer community – would be most successful.

The details

My role
  • Execute app design from concept to look & feel
  • Determine most crucial task flows, prioritize mock-ups and interactive prototyping 
  • Build simple working prototype for users to interact with and test

 

Project team members | just me!
 
Mentor | Professor William Mead
 
Tools | Adobe Illustrator, Figma, Google Slides

User/use case

Heterosexual, cis-gendered Americans, aged 35+
  • Understanding a group of people they just didn’t grow up exposed to
  • Supporting queer peers through empathy and furthered understanding 
Secondarily, members of the queer community could also use the app
  • Getting their stories and voices heard through app interactions
  • Contributing and monitoring how they want their experiences to be shared

Goals

  • Internal shifts, however small – begin questioning their judgments, quick analyses, stereotypes, and impressions of whole groups of people
  • Garnering support for the groups that most touched the user via donation, discussion, learning more, etc.

Solution in a nutshell

Immerse the user in an experience simulator and allow them a platform to access and contribute to discussion after these simulations so that they can more easily empathize with and educate themselves about a marginalized group.

Dashboard
  • Homebase for navigating journeys and resources for learning and contribution
  • Keep track of journeys completed, revisit journeys, track progress
Interactive journey
  • Authentic stories sourced from the appropriate community
  • Engaging, interactive visuals bringing the user through a simulated journey
  • Discussion board for thoughts and feelings with those who either completed the same journey or live in these situations in reality

Case study

First steps

In developing my idea for the app, I had a loose idea of wanting to design an experience simulator, such that authentic experiences of a certain group could be lived through in an accessible way. I browsed through the internet to see what existing interactive empathy solutions there were out there.
  • “Half the Sky Movement: The Game”: game-based adventure on Facebook to raise awareness and donations to empower women and girls around the world
  • “Daisy Chain”: app-based interactive story about a girl’s experience with bullying and how she and a helpful friend get through it
What I noticed about these two solutions though, is that they both shared a target audience: children. There isn’t much out there for adults, and that’s why I chose the target audience of adult Americans, who, for lack of a better way of putting it, lead fairly privileged lives just because of the way they were born into the world.
 
In the search to figure out what group I wanted to focus building empathy for, I found out a lot about the hatred and oppression that the LGBTQ+ community feels:
  • LGBT people as more likely to be targeted for hate crimes than any other minority group (New York Times)
  • While support for the LGBT community has been increasing over time, barely half of Americans who belong to generations beyond the Millennials support same-sex marriage (Pew Research Center)

SWOT Analysis

With that research in mind, I did a SWOT analysis to put further thought into how the app should be structured and designed.
Strengths
  • Focus on adults, an audience with the ability to make a lot of impact should they choose to
  • Timely in the current political and social climate
  • Can be used to focus on more intense topics and get deep with it
  • Audience has the potential to put lessons to practice
  • Makes audience feel good about at least trying to be more empathetic
  • Could be used as a teaching tool or workshopping tool or training tool in classrooms and businesses, etc. 
Weaknesses
  • Why is this worth putting any money on?
  • Is it worth tackling a group of people who already have their own very strong views on these topics and have opinions that are deeply ingrained?
  • Would it have any real impact on the way that the audience interacts in real life?
  • Is it effective?
Opportunities
  • Beautiful graphics/illustrations, animation technologies to attract an audience 
  • Giving people a space to share their own stories while experiencing others’ stories might give the audience quite a healing experience
  • Tackling the issue of lack of empathy could potentially indirectly solve a lot of problems for users, improve their daily quality of life and even those around them
  • Empathy is one of those problems that can’t really be fixed through regulation until the people demand it, and maybe this is one step towards that. 
Threats
  • There’s a ton of work to be done for attractive visuals
  • Nobody sees the value
  • Nobody prioritizes the issue
  • People need more instant gratification over long-term mindsets/philosophies

Concept development

With some goals, research, and further considerations in mind, I could begin to flesh out how this concept of an experience simulator was going to come to life. First, I had some more tangible conceptual goals I wanted the user to be able to achieve through the app:
  • Immersion: the best way to gain empathy is through walking in someone else’s shoes; interactivity and engaging users in the journey will be crucial
  • Measure of Progress: users need to feel like they are moving forward, a sense of accomplishment, to keep track of the work they have done
  • Contribution: users need a platform where they can unload from the immersion, share experiences, give back, and interact with others
  • Learning: the more people know, the more informed they feel their decisions will be and the more inclined they might be to empathize more, contribute more, understand deeper
 
To achieve these goals, I developed two main ideas into the app concept.
  • Interactive journey: addressing immersion, contribution, and learning
    By combining compelling visuals with authentic stories and interactive situations, the app could help immerse the user in someone else’s world. By assuming the role of the person they seek to understand, hopefully they’ll feel the impacts and learn of these situations. At the end of a journey, there would be a place to discuss their thoughts and feelings amongst other people who have tried the same journey.
  • Dashboard: addressing measure of progress, contribution, and learning
    With a personal dashboard to view how many journeys and which journeys they’ve completed, users would be able to have a means to measure their progress and have a central location to return to. From their dashboard, they would also be able to access more learning resources and places to give back to, as well as re-access completed journeys and discussion boards.

Iterations and prototyping

These first designs focused on a singular task, a core part of the app: selecting an immersive journey to follow. I began to develop the look and feel as I went, attempting to convey a sense of approachability and visual appeal through the interfaces, especially with the illustrations and colors. 
Feedback
  • A great start and a promising concept!
  • Elements, especially text, may be too small
With positive feedback, I began to build out more of the task flows to accomplish the conceptual goals I had established earlier. This second iteration focused on three key flows: sign-in, journey selection, and the journey itself. For the journey, I decided to focus in on the coming out process for a character named Meera A. who needed to come out to her conservative mother.
After doing some light testing with peers in class, I moved on to continue building out the dashboard more and adding in more interactivity. Using the prototyping tools in Figma and Figma Mirror to test on my own phone proved to be a great way to see the changes in real time. 

User testing

I prepared a few tasks for my users to test through and although most of my users were from the secondary audience, I got back some really insightful feedback. If you’d like to view my full usability report, feel free! Here are the tasks and questions I prepared.
 
Tasks
  1. Creating an account
  2. Going on Meera A’s journey
  3. Returning to the dashboard from journey completion
  4. Resetting your password and signing in
  5. Exiting the journey and returning to the dashboard
Post-task questions
  1. What was your initial impression of the app?
  2. Did you understand what the app was about? Can you tell me what you thought the goal of the app was?
  3. How did you feel reading the question and possible responses of Meera’s journey?
The main usability problems were:
  • Difficulty assuming the role: Users weren’t sure whether they were meant to assume the character(MeeraA.). Especially since the illustrations weren’t fully fleshed out, it was difficult for users to immerse themselves in the experience of the selected character’s journey.
  • Exiting/returning to the dashboard: Everyone tried to click the back button at first. And it took at least a few to several clicks for the users to finally get to the dashboard. It could be that the wording of“dashboard”was confusing since the icon is more aligned with what a“profile”icon might look like. 
  • People skim and miss information: Users seemed to miss content by skimming quickly rather than reading it carefully. Many participants reread a lot of the content as well. This may be an indication of the content being too difficult to parse through, not engaging enough, or presented in a way that isn’t easy enough to digest.
Positive feedback
  • Visuals: Almost the first thing that people comment on – general look and feel, in particular color contrast and typography. 
  • Copy: Users who self-identified as being a part of the queer community confirmed that the response choices were accurate to how they might feel trying to come out to a mother figure. Specific word choices were commended as being relatable to the target audience and evoking empathetic responses.
  • Provoking: Users felt the gravity of the situation and took the journey experience quite seriously, and it was clear that there was some emotions evoked in them. 
  • Overall: All users appreciated the ideal outcomes/features of the app, even the ones that weren’t built out. They also understood the essence of the app, which is the most important goal to achieve in an app’s design. 
Of course there were still a lot of aspects of the app that I still wanted to build out but for the scope of the project and the timeline of the course, it just wasn’t possible. Users seemed interested in discovering features I had hinted at through the interface, but they couldn’t explore them given that there were no real screens to explore. These features included: viewing and participating in discussion forums, submitting personal experiences to contribute to journeys, resource pages, links to donate, about us, and trying out the other journeys.

Their Mile

To finish off the final project, I made a video showing the prototyped app in action and a description of the main functions of the app that I built out.

Wrap up

A recurring problem I see daily is that we don’t hold enough empathy for one another, for those in unique positions, but also for those who seem like they have everything but don’t have that core factor of happiness or life satisfaction. The product I began designing is an experience simulator, in which the user can walk in the shoes of someone unlike them to see what a day in the life of someone else is like. Through this kind of immersion, hopefully adults can learn to be more and more empathetic towards one another. It would be even more incredible to see this played out with VR and AR. A whole suite of experiences could eventually be built out, not just for those who belong to the LGBTQ+ community, because every single person has their own set of struggles and experiences worth being heard.