Empatico.org

UX Research

In my first months at Empatico, I spearheaded a research project in order to get to know the product better and familiarize myself with pain points and happy experiences of actual existing users –– as well as to make meaningful improvements to the platform following the research project.

If you’re busy and important and you only have the capacity for the quick and dirty rundown of the research project, click the button below to view the research deck I presented to my team members once the project was complete.

I won’t be offended if you take the research deck at face value. However, if you’re intrigued to dive deeper into my process, strap in – here we go:

From the information I’d gleaned up to this point by analyzing data and speaking with my colleagues, the main objectives we came up with for the research project were:

• Understand how users are approaching making connections and why the connection process is not fruitful in some cases

• Understand user flow and interactions from day 1 to live video exchange and where lag in the flow occurs

• Evaluate pain points that users are experiencing in the flow of our site

• Evaluate user satisfaction with our platform and tools (activities, connections, video exchanges, etc.)

Once we came up with these objectives, we set out to recruit participants via a Google Form survey mailed out in our newsletter, as well as working with our community manager to recruit some of our Ambassadors (top users) to participate.

Means of testing:

• 1-on-1 Zoom interviews

• 6 participants from 4 different countries (India, Mexico, Nigeria, USA)

• 35-50 minutes per interview

Click below to read my full interview script:

How Might We (HMW)

When my research interviews were complete, I compiled all the results into categories using post-it notes. The biggest insights I took away from the interviews were:

• Live video exchanges were happening very rarely

• Educators were being “ghosted” by connections

• Connection requests sent out were not being accepted

• Educators were receiving very few requests to connect

• Once users make 1 solid connection, they tend to drop off the site

Now…to understand how to move forward and address these insights, I conducted a HMW brainstorming exercise with our director of product and a few colleagues from the marketing and content creation teams who were more familiar with Empatico and had years of experience more than me with the product and users.

Homepage

When I joined Empatico, there was no Home page for the site. After onboarding, we directed the user immediately to the Community page, where they could then find other educators to connect with. But this was a bit confusing –– following an onboarding flow and a clunky tour, the user was just dropped into our site with a bit of a lack of context about where to go and what to do.

To solve for this blip in the flow, we decided to add a home page, where we could include small explanations of what to do, where to go, and really to outline our value proposition in a digestible way.

As time went on and our product evolved, we added more and more to the homepage in order to guide the user towards new features and activities, as well as to refine the first-time user experience so that immediately upon impact, users had the tools to navigate our site without so much handholding from our support team and with more agency to just explore!

Onboarding

An essential step in creating a profile on Emaptico.org was to complete onboarding. I initially noticed 1 fundamental issue in our onboarding process that I thought required some attention, and an entire onboarding revamp ensued..as it is wont to do. The problem at hand was:

Users were dropping off in school/organization entry form where they were meant to input their school/organization location information.

Obviously this was a huge issue/pain point because:

• We were losing potential users who would drop off at this point

• We were getting a looooooooot of support tickets about this issue, wasting the precious time of our very small (2 member) community management team

• The issue was problematic from a cultural lens because this issue only occurred for users outside the USA. Really not a good look for a platform priding itself upon international, cross-cultural connectivity.

The issue explained to give some context:

1. When users would try to input their school/organization addresses, the State/Province/Region field would not recognize a lot of the (actually correctly input) information as valid

2. Some countries simply do not have that field in their addresses (i.e. Saint Martin, Japan)

3. This was a required field, so if users did not get the green light to move onto the next step, they were stuck on this form with no way forward

The solution:

To solve for this issue, we simply made the State/Province/Region field an optional field. Once we did that, we ideated other ways to make this process quick and seamless. We toyed around with the idea of an imbedded Google Maps iFrame which would include the classic Google autofill for address information, but we eventually tossed the idea because of engineering constraints and data issues. In the end, inspired by this small tweak, we decided to revamp the entire onboarding flow in order to update the visual design, make the process more streamlined, and add in a couple elements that spoke to our improvements once inside the site.

The result:

• Changing the functionality of this input field in onboarding led to 45% of users reducing the time they spent on that page by 50%!!

Expansion of onboarding project

Since we decided that some of the pages of onboarding needed adjustment and onboarding was one of the only flows left on the site that didn’t have our new, updated branding, I took on a continued onboarding project where I conducted analytic research using Mixpanel and FullStory, restructured the information architecture, and updated all of the UI (color, text styles, components, etc. This was a major project that felt like a culmination of a year and a half of updating the site to make it a more cohesive, branded, marketable, easier-to-use product.

Community page

When I joined Empatico, the face of our platform and our main value proposition all started with the Community page. Here was a place where users could find other educators to connect with. Some of the main existing pain points on the Community page were:

• Users’ searches were limited to 2 options: teacher/class name OR country

• The Recommended for you section was not based on time zone (making chatting and setting up live video exchanges with these classrooms extremely difficult)

• There wasn’t much personalization or hierarchy in the card design, making the page land a bit flat

To improve the Community page, I focused on user feedback from my research, as well as looking at examples from LinkedIn, Facebook, dating apps and other social networks to see where the leaders in the industry were thriving.

After many iterations, we came up with the version on the right (see images below). The improvements we made included, but were not limited to:

• Expanding the search parameters

• Enhancing the Recommended for you section to reflect actual user interests and preferences from onboarding

• Updating the cards to include a short classroom bio, time zone information, made it clearer the the numbers were ages on the cards, improved the CTA hierarchy, and included an image of the map of the world, zoomed in on the country in which the classroom was located

• Consolidating the Explore and Search tabs, and moving the Connections tab up to the top nav so that it could hold a more comprehensive space for messaging, scheduling, etc. with other users

• UI updates – the visual design was a very important step in this project for me, and as you continue to browse this case study, you’ll see the lengths I went to revamp the site, page by page

Library

During my time at Empatico, we evolved quite a bit. Our value proposition shifted from focusing on live video exchanges to having users complete library activities. We also wanted to put more emphasis on our patented Empathy Framework, which was based on SEL skills and helped us categorize our existing activities and refine sections within the library. The changes we implemented to the library during my time at Empatico included but were not limited to:

• Incorporating and explaining our Empathy Framework

• Grouping activities into more comprehensible sections

• Adding a search feature for activities

• Consolidating sections to reduce scroll and maintain important information above the fold

• Rid the library page of information and content that was not relevant

The result:

• A 31% increase in library activity repeated views (2 or more views)

• A 12% increase in the frequency of 8 or more views of single library activity

Activities (sub-page of the Library)

Each of the cards in the library page represents an activity that our programs team curated, wrote and tested. In order to make the content shine, we restructured the activity pages as well.

The changes we implemented to the activity pages during my time at Empatico included but were not limited to:

• Incorporating tabs to decrease the ~ incredibly long ~ scroll length (see below) and make the content more digestible

• Fine-tuning the visual aspects in the page to match with that of the rest of the site - but also differentiating enough so users are aware of varying pages and their different values (re: pale purple vs light blue)

• Adding a More like this section at the bottom of the activities to encourage users to find more activities

• Working with the programs team and engineers to create a typography style that was uniform across activities and tabs (before there were random italics in places, bolded items, different colored links, etc.)

My connections page (connections, messaging, meeting scheduler)

When I joined Empatico, there were 3 main pages in the navigation and lots of sub-nav tabs on every page, leading to a bit of a clunky flow and a disjointed information architecture. In order to improve the information architecture and to incorporate insights from user research, I decided to pare down the sub-nav tabs on the Community page and consolidate them into one Connections hub in the main nav.

For the Connections page, I really wanted to be intentional about how we gathered displayed all the information so that we could hopefully solve for users’ issues with:

• Sending and receiving messages

• Slow response times and/or ghosting

• Scheduling live video exchanges

Project takeaways

Next steps