Posters            About

Explore SEL

Collaborating with Harvard’s Graduate School of Education, I designed a research tool that helps educators and policymakers navigate social and emotional learning.

︎ View live site ︎

︎ View process deck ︎

Project Overview

In the U.S, there are over 20 social and emotional learning frameworks (SEL frameworks) that researchers, educators, and policymakers use to develop curriculums, education policies, and testing. However, because each framework cover different cognitive domain, focus on different student groups, and emphasize different skills, it is difficult to choose the most suitable framework for each situation.

This project was done while interning at Friends of the Web in collaboration with Harvard’s Graduate School of Education.

My contributions:

• Surveying researchers in the field of education
• Brainstorming and designing data visualizations, framework profile, and dictionary that reflect research
• Defining site structure through insights obtained from user surveys

Design Challenge

How can we help educators better understand and apply social and emotional learning (SEL) for their unique situation?

Our Solution

3 data visualization tools that compare 16 SEL frameworks

16 SEL profiles that visualize frameworks and provide accessible research

A thesaurus of 200+ SEL terms that are linked using NLP


Interviewing stakeholders

I interviewed Harvard researchers to understand the SEL problem space.

1. Different frameworks cover unique skills, age groups, and audiences
Some frameworks might focus more on leadership, others on independence, and some on social abilities and etc. Some frameworks are more narrow, while others cover a larger range of SEL domains.

2. The different forms that frameworks come in make it difficult to compare them
Frameworks follow unique rubrics, lists, theories, and models. Horizontal comparison is thus difficult.

Surveying target users: educators

I generated 50 survey questions that ask educators how their current experience, pain points, and the selection process on SEL frameworks. In the end, a written survey of 20 questions was given to educators, policymakers, and researchers in the field.

Here’s what I learned from the survey:

1. Target users are familiar with one or a few frameworks but thought more knowledge on SEL, in general, could benefit their work.

2. Users thought the most beneficial information would be framework comparison, followed by framework profiles, followed by SEL terminology.

Devising the information architecture

Home page 

Initial explorations

Revised homepage

Present framework comparison tools first
Since our target audience is already familiar with SEL, I used minimal text to describe SEL. The three main comparison tools are the most prominent component on the homepage.

Mark each framework with a unique icon
The 16 studied frameworks are listed alongside a unique icon. Each icon is generated based on the depth and breadth of the framework to help with visual distinguishment.

Data Visualizations

1. Compare cognitive domains across different frameworks

Educators can use this chart to see how much of the 6 main cognitive domains are represented in each framework cover.  
2. Compare skills between frameworks

Different frameworks might call the same skill with different names. The researchers at Harvard used machine learning to identify the similarity of each term in different frameworks.

Using this graph, educators can tell that two terms are more related when there is a thicker line connecting them.

3. Compare cognitive domains across frameworks

Some frameworks focus more on personal identity while others on emotional skills. This bar chart breaks down how much of the 6 main cognitive domains are represented in each framework cover.

Making the 16 SEL frameworks more accessible by creating unique profiles

The hierarchy of the framework profile is layed out specifically to highlight distinguishing information.

The framework breakdown chart is at the top because they clearly show what the framework consists of. The same categories of meta-information are repeated on each profile page for users to quickly grasp the usage of the framework.

Term Definition

Multiple SEL frameworks can have conflicting definitions for the same term. To simultaneously define all definitions without confusing the user, I separated the definitions by its framework source . 


It's important to simplify complicated information. By communicating with researchers, developing user surveys, and assessing the objective of different framework comparison tools, I highlighted the unique significance of each comparison tool through visual design.

Say Hi!

I would love to talk about anything and everything. Reach out!

︎︎ ︎