Project Overview

July 2017

Objective

Create an app for the USHMM that facilitates empathy and a desire to effect positive change in personal spheres.

My Role

UX/UI Designer

Methods

User research, empathy map, personas, user experience maps, information architecture, wireframing, user testing, UI research, UI design, and prototyping

Technologies

Lucidchart, Balsamiq, Sketch, and InVision

RESOURCES

Creative Brief (provided), The Noun Project

Research

Business Goals

I began by reading through the provided creative brief to determine the business goals and created a summary of the information.

1. Engage USHMM visitors beyond their on-site experience,

2. App users feel greater empathy and a desire to effect positive change in their own personal spheres.

3. A holistic integration between the museum experience and the app.

4. The app is regularly used.

User Interviews

The primary target users identified in the creative brief were students ages 13-18. These are those who are most likely those who have gone to USHMM on a field trip and are most likely download the app at USHMM. The secondary target users were Millennials and the teachers of the 13 to 18-year-olds.

I interviewed three 14-year-olds, two 15-year-olds, a Millennial high school counselor, and a Millennial high school English teacher.

Primary Target Questions

• What apps do you use most often?

• What do you like about these apps?

• Do you keep up with current events?

• How do you keep up with current events?

• Have you heard of the Holocaust?

• What are your thoughts on the Holocaust?

• What does empathy mean to you?

• How do you develop empathy for others?

SECONDARY TARGET QUESTIONS

• What apps do you use most often?

• What do you like about these apps?

• What does empathy mean to you?

• How do you develop empathy for others?

• Do your students show empathy for others?

• How do your students show empathy for others?

Key Insights

• The apps most commonly used by youth are Snapchat and Instagram.

• The youth enjoy the social aspects of apps.

• The youth use social apps to keep up with current events.

• The Holocaust is a sad topic for youth. They find it hard to understand how something like that could happen. Some of the youth expressed interest in the psychology behind it.

• The youth think of empathy as how much you care about a person. They find that the more they know about someone, the more they care.

• The youth want to know how they can help each other but are not sure how to help or what others are going through.

• The youth experience cyberbullying.

• The high school counselor and teacher told me about a program called Challenge Day that their school has run. They have seen a massive shift in student empathy following these programs.

Empathy Map and Persona

I created an empathy map and a primary persona to summarize the goals and challenges of the users.

Challenge Day

I did further research on Challenge Day to understand the program and the process by which it helps youth develop empathy and connection with each other. During my research, I was even able to participate in a Challenge Day at a local high school. I broke down the process of Challenge Day into 5 steps.

1. Create an environment that promotes trust and safety.

2. Emotional intelligence education.

3. Expose youth to a vulnerable role model.

4. Give the youth an opportunity to be vulnerable in a safe environment.

5. Expose youth to the vulnerability of peers in a safe environment.

Ideation

User Experience Map

I created user experience maps in parallel to the Challenge Day process to brainstorm ways to recreate the empathy-building experience in an app.

Selecting a solution to prototype

After identifying the business goals, user goals, exploring existing solutions and brainstorming new solutions, a fellow designer and I came up with five potential solutions. These five solutions were presented to a focus group of about 15 individuals. 

Site Map

Once a solution was selected for prototyping, I began working on the information architecture by creating a site map.

Wireframes

I began wireframing on a whiteboard and in my notebook. Once I had the basic layout, I jumped into Balsamiq and put together lo-fi wireframes. During the process, I reviewed the most popular social media apps including Facebook, Snapchat, Instagram, and Twitter for inspiration.

User Testing

Using Sketch and InVision, I created a lo-fi prototype for user testing.

Usability Tasks

• Task 1: What is the Feed?

• Task 2: Like a friend's answer.

• Task 3: Who has liked your answer?

• Task 4: Block a user.

• Task 5: Who are you following?

• Task 6: What is the difference between 'Following' and 'Subscriptions'?

• Task 7: Is Hannah M. following you?

• Task 8: Search for and follow Greg S.

• Task 9: Accept Chris J's request to follow you.

• Task 10: Change your password.

• Task 11: Change your notification settings.

Key Outcomes

• Task 2: Success. Some users were unsure what the icon was. This may need to be explained during onboarding.

• Task 6: It took some users a minute to understand subscriptions. After a few minutes, they caught on and understood how it worked. This may need to be explained during onboarding.

• I went back and forth on whether to include profile pages for friends. During testing, several users wanted to see friend's profiles, send private messages, and see what they had in common with their friends. Friend profile pages, which included options for private messaging and listed things in common, were added.

• Overall the navigation was familiar and easy.

Prototype

UI DESIGN

The most popular social media apps—including Facebook, Instagram, and Twitter—used mostly white and grays with a strong secondary color. For this app, I chose two complementary secondary colors, one for high-level navigation and selected buttons, and another for lower-level navigation and unselected buttons. I chose a very basic font for high readability.

USER TESTING

With over 60 unique artboards created for the final prototype, a few dozen usability and A/B tests were done to identify the most intuitive and visually appealing designs.

Key Outcomes

• The secondary colors were used more sparingly to help create a visual hierarchy for key content.

• The 'Prompt Question' page was redesigned to use a radio button rather than a toggle button.

• The 'Prompt Answers' page was redesigned to clarify the answers provided by subscriptors.

Recap and Reflection

Lessons Learned

• Make your brainstorm sessions a judgment-free zone. Brainstorming is about creating as many ideas as possible. Don't ignore any idea and don't determine which is best during the process. You will sort through the ideas later.

• Design for the smallest screen first. The smaller the screen, the less real estate you have to work with. It's easier to design for a larger screen later than a smaller screen. For this reason, I decided to design for the iPhone 8 rather than the iPhone X.

• Less color is better. I originally used a lot of color when designing the UI. Through research and testing I found that color is best used intentionally and sparingly—otherwise it can overpower the content of the app.

Key Challenges and Solutions

• How do we meet all of the business goals?

  • The most challenging business goal to meet was "a holistic integration between the museum experience and the app." My product manager and I decided to primarily focus on the other three business goals and use a 'Behind The Question' feature to highlight the USHMM logo and link the questions to the Holocaust material. This feature is accessed by clicking on the question and would likely need to be featured in onboarding.

• How do we promote and safe environment and prevent cyberbullying?

  • I did a lot of research on cyberbullying and ways to protect against it. Some of the features included in the app to help achieve this goal include users having to approve anyone who follows them, the ability to report and block users at any time, an anonymous post mode (which would be smart enough to not post the response if the author could be logically deduced), and disabling screenshots of responses.

• How do we create a role model?

  • A key element to Challenge Day was role models taking the initiative and opening up about difficult topics first. I created a unique user type that would allow celebrities and other role models to have early access to questions and the ability to post relevant online content.

• How do we distinguish between those you are following and those who are following you?

  • I created a separate 'Friends' tab and separated out the friends you follow, those who are following you, and subscriptions.

• How do we remove the element of comparison among peers?

  • A challenge I faced with creating a social media app is the element of comparison. This can shift the focus away from the goal of being vulnerable and developing empathy. I broke the social media app mold and removed user stats such as how many "likes" a particular post received or how many followers a user has. A user can see who has liked their responses and can count their followers, but there aren't any numbers indicating the quantity and they cannot see that information for other users.