Harvard EASEL Lab

DATA VIZ & UI/UX

EASEL Lab at Harvard University approached Friends of the Web in 2018 with the goal of creating a website to help users navigate the complex and conflicting terminology used in the field of social and emotional learning (SEL). SEL Frameworks are being used to develop course curriculum, activities, and education policies

In 2019, they asked us to reiterate on the data visualization tool. My contribution to this project was to improve the visual and usability of the tools we created in 2018.
✌ VIEW SITE  →

What is EASEL?

"Explore SEL is a product of the Taxonomy Project, which is an EASEL Lab project designed to create a scientifically-grounded system for organizing, describing, and connecting frameworks and skills across the “non-academic” domain."
Read more about Harvard EASEL Lab  →

Surveying target users: educators

Amanda Yeh was the previous UI/UX intern who worked on this website and data visualization tool. She generated 50 survey questions that asked 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.

Through this survey, she found that:

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.

Check out her research report  →

So Friends of the Web made 3 interactive infographic in 2018!

Explore Domain Focus

INFOGRAPHIC #1

Frameworks focus on different things – some cover many areas of SEL and the non-academic domain while others take a more focused approach. This can make it difficult to determine which frameworks meet your needs or identify those that can be paired to create alignment between ages and across settings. The bar graphs below compares the extent to which each framework concentrates on six common areas, or domains, of SEL.

✌ INTERACT WITH INFOGRAPHIC →

Framework Connections

INFOGRAPHIC #2

Frameworks label skills very differently. It can be difficult to figure out where inside a framework the skill you are interested in lives – especially if it is labeled or grouped under an unfamiliar name.Use the sunburst diagram below to see where a particular skill appears across frameworks.

Users can click on a skill in the sunburst or select from a list of 100+ common skills to highlight related skills across frameworks.

✌ INTERACT WITH INFOGRAPHIC →

Identify Related Skills Across Frameworks

INFOGRAPHIC #3

Different frameworks might refer to the same or similar skills using different names, or call two very different skills by the same name. This makes it hard to tell whether or not frameworks are addressing similar skills.

Users can select a framework from each list to see where terms in the left framework are related to terms in the right one – based on their definitions rather than their names. The thicker the line, the more related the terms.

✌ INTERACT WITH INFOGRAPHIC →

Problem

After ~1 year of the launch, our users told us that although the framework was useful and gave them the information they needed, it was hard to use and the learning curve is steep. They ended up using becoming familiar with only 1 of the tool (out of the 3) because of the adapting to each tool was a hassle.

This is where I stepped in!

New Design Goals

Harvard EASEL Lab wanted to improve usability and visuals of these their current tools. We wanted our improvements to specifically be: 


1. Can we create a system that can display all of the current infographics into one, robust visualization?

2. The new and improved tool shouldn't require so much interaction from the user to deliver the desired result.

3. Improve overall legibility.

Identifying Problems

Before diving into there-design, I identified user chokepoints and visual irritant in the existing infographics.
a. After the first skill comparison, the rest of the skill starts at a different y-axis. Therefore, it makes it hard to compare juxtaposed skills with other frameworks.

b.
The different hues are used for distinction, but the level of saturation and shade values are too similar making it vibrate. This may not affect people with perfect color vision – but people with levels of color blindness may have a hard time differentiating them.
a. The overlapping lines are too intense because they are all cramped with thick strokes.

b.
Curved lines are more dense compared to straight lines visually.

c. When the user selects complex and elaborate frameworks, all of the content does not fit within the viewport height


a. The shade value and scale difference between inactive and active elements are too small.

b.
Frameworks are visually bigger than skills & domain. This implies more importance on the frameworks when they should be on the same level of hierarchy.

c.
Text overruns when information is at an abundance.

d.
The text describing framework also doesn't fit inside the infographic regardless of the window size.

e.
The central space where information sits is a circular shape which makes it awkward to fit a rectangular content and text.

These are our design solutions!

New Infographic #1

I kept the core interaction and layout, but I tweaked the visuals: 

1. Instead of stacked bar, I changed it to bubbles sitting on the same x & y axis
2. Colors are more grounded (less saturated and darker shade value)
3. Buttons have a clearer visual hierarchy
4. Users can now select and toggle frameworks

Depth of Focus

This view shows how much emphasis each framework places on one domain relative to the other domains. This graph is most useful for understanding a framework’s general focus, or which domains receive the most attention in a particular framework.

General Focus

This view shows the level of detail with which each framework covers a particular domain by taking into consideration the size and scope of the framework – the total number of skills that fall under each domain and the level of detail with which they are defined. This graph is most useful for understanding the depth or comprehensiveness of a framework’s focus on a particular domain.

New Infographic #2

I combined two infographic into one. That way, the user only has to learn one tool. This allows for greater versatility and functionality. If needed, this infographic can compare frameworks, expand associated SEL skills, and customize the number of frameworks to compare as to the previous design where you can only compare up to two frameworks.

What I learned

We explored different types of visualization tool, improving the design from each iteration. We realized that it is almost impossible to create a visual system that can replace all of the tools into one perfect system. Instead of striving for perfection, we started thinking more about the hierarchy of how we presented the information.

y understanding what information is vital and secondary to the user, we can present information more effectively and legibly by prioritizing important information in a hierarchal system. Information that holds a primary significance should be accessible with little-to-no interaction while minute details should feel secondary through design. This could mean smaller type, less contrast in color or shade, toggle that shows hidden details, or a filter system that allows the user to pick their desired information.
✌ VIEW SITE  →

Contact me!

Let's talk! I don't bite (just harmlessly quack here and there) and love talking about everything and anything! Ask me about anything: projects, design philosophy, work-flow, even birb memes!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.