While working at product agency Friends of the Web, I collaborated with Harvard EASEL Lab to conceptualize and design a human behavioral research exploration tool that helps educators, researchers, and policymakers improve education.
Role: Surveying, wireframing and prototyping, data visualization, visual identity
Tools: Sketch, D3.js
What are social and emotional learning (SEL) frameworks?
SEL frameworks aim to analyze and understand the process in which people manage emotions, acquire skills, and achieve positive goals. SEL helps students express and manage emotions, critically make meaningful decisions, develop strong communication skills, and recognize personal values.
Based on SEL frameworks, educators can develop course curriculums, education policies, and testing.
The problem: It is difficult to choose between the most suitable SEL framework
While there are a variety of SEL frameworks targeted for student growth, different frameworks often associate distinct terms and skills with similar cognitive domains, making it confusing for educators, researchers, and policymakers understand which skills to promote and measure and which frameworks to focus on.
Harvard EASEL Lab came to us with a myriad of analysis that showcases similarities and differences among 16 popular SEL frameworks. Their research helps establish common grounds between diverse frameworks by looking at similar domains, skill sets, and terms a part of each framework.
Different frameworks address different skills, cognitive domain, and area of focus. Some frameworks are also more narrow and others cover a larger range of SEL. These differences are hard to distinguish.
Some of the most important design goals were to
- Portray research to help both novice and expert audience understand and compare SEL frameworks
- Present Harvard's research accurately and intuitively on the web
- Orient users with cognitive domains and frameworks that matter to them the most
By providing clarity for each framework and giving users agency to explore the data, I aimed to design a product that was simple, functional, and friendly.
Our design research aimed to understand who are the users of SEL frameworks, how they incorporate SEL frameworks into their work, and what kind of problems they have while using SEL frameworks.
We designed a survey that targets a diverse group of educators, researchers, policymakers and funders to help us better understand their experiences. I conceived 50 survey questions that delved into how educators and researchers understand, select, and utilize SEL frameworks.
Understanding the user
From the research, I learned that users are familiar with SEL theory but unfamiliar with framework differences, and SEL have diverse case-specific targets, such as age group, education level, skill focus
SEL frameworks are deeply complex. EASEL has done research on individual frameworks, framework comparison, terminology categorizing and relating, and additional research on social and emotional learning. A crucial design challenge is to distinguish the hierarchy of this research.
We identified framework comparison as the most important research visitors are seeking on the Explore SEl website. For users who are less familiar with frameworks, information about individual frameworks are handy. Because during our interview, we learned that most users are somewhat familiar with SEL frameworks, we pinpointed introductory information on SEL are less important.
Sketching + Ideation
Iterating and Revising the Homepage
Final Homepage Design
Highlight the significance of each comparison visualizer
One notable constraint of the project is the structure and visual appearance of the comparison graphs must remain close to the original research graphs and be created with D3. I carefully analyzed the focus and method of the 3 comparison methods and prototyped tools that enhance distinct features of each comparison tool.
Working with the sunburst chart that EASEL Lab created, I created a term and domain filtering system. Users can filter domains or terms that they are particularly interested in and visualize how they are represented across 16 different frameworks.
The domain comparison tool allows users to see the breakdown of cognitive domains of the 16 different frameworks. Users can use this graph to discover the cognitive focus and coverage of each framework and identify frameworks that cover domains they care about.
I utilized color coded domain keys and allowed the graph to take up the full width of the screen to assist readers with interpreting the data. I also included detailed domain definitions for users who want to learn about the breakdown more in-depthly.
The framework comparison tool invites users to narrow in on two frameworks and compare how closely related they are to one another.
I designed clear call-to-action dropdowns and portrayed the terms of each framework with distinct colors. Connection between two frameworks are drawn with varying dark lines, while the connection between terms of the same framework are drawn with light strokes to show how the tightly the terms are related.
Distinguish information of each framework
I showed structure graph, domain breakdown, and detailed information on framework profile pages to help the viewer quickly grasp the scope of the framework. I also listed relevant comparison tools next to each graph.
The framework glossary page compiles all frameworks in a list and highlights important metadata associated with each framework. To better distinguish each framework, I created icons that resemble the structure of each framework.
SEL terms can be confusing, so I designed a term page for terms in every SEL framework. Each term is linked to another term based on relatedness.
It was a fascinating experience to work with research that helps a variety of educational agents. I was excited to work with framework and data constraints to design a web tool that makes SEL research feel approachable. It was also my first time using d3 graphs, and learned to work with the technical constraints of web data visualizers.
It's important to simplify complicated information. By communicating with researchers, developing user surveys, and asses the objective of different framework comparison tools, I learned to highlight the unique significance of e ach comparison tool through visual design.