Building a Dashboard for Effective to Great Education — a UX Case Study
I had the pleasure of working with Effective to Great Education, a startup with a mission to introduce SEL (social and emotional learning) into at-risk classrooms.
SEL involves teaching children how to be aware of their emotions, and how to cope with negative emotions. More formally, SEL is the process through which children acquire the knowledge, attitudes, and skills they need to:
- Recognize and manage their emotions,
- Demonstrate caring and concern for others,
- Establish positive relationships,
- Make responsible decisions, and
- Handle challenging situations constructively.
Effective to Great Education plans to accomplish the teaching of SEL through their app, Bud to Blossom, which I will explain in further detail in the next section.
For this project, I worked on a team, consisting of Colin Small (Project Manager), Gail Viraldo (Research Lead), and myself (Visual Design Lead).
Part 1: Research and Defining the Problem
We started by reviewing the current iteration of the Bud to Blossom app. The app prompts students to check-in and identify their emotions up to three times a day, and then helps them to cope with negative emotions. Furthermore, their is a gamification aspect to the app, where for every time they check in they receive seeds which they can plant and grow in their virtual garden. The app also keeps track of the student’s emotions over time in a calendar.

After investigating the app ourselves, we conducted stakeholder interviews to further define the purpose of Bud to Blossom and to understand what kind of dashboard it would need. We talked to Laura Thomas, CEO of Effective to Great Education, as well as her technical advisor Raheem Aleem. From these interviews, we learned that the team at Effective to Great needed to be able to do two things:
- grant and deny permissions to new users of Bud to Blossom, and
- be able to differentiate the roles of different users (teachers, parents, institutions, etc.).
To better understand how to address these issues, and to further understand the issues of other users, we interviewed two subject matter experts (SMEs), a teacher, Anna, and a database expert from Bloomingdale’s, Ramon.
Ramon, the database expert, gave us great insights into how to organize data. He told us: “Permissions are based on a tree. Start with a job code or unique ID and build from there.” So, we created a tree of our own to get an idea for how we would manage permissions in Bud to Blossom.

Anna gave us great insights into how data is important in education. She told us: “A lot of times we need to have evidence. Everything in education is so data driven.” It is important that we can communicate the data we are collecting through Bud to Blossom quickly and efficiently, since this data is important for advocating for children, both for mental health intervention, medication, and special services.
We attempted to conduct a screener survey, but it didn’t go as planned. We targeted teachers, school administrators, and parents, but perhaps because it is summer time, or for some other unknown reason, we got little response. In the end, we had enough research from our own SME interviews and the previous Bud to Blossom design team that we decided to discard the screener survey all together and moved on.
Finally, we synthesized our research using an affinity map.

We came to three priorities for our work:
- Access: What levels are there for whom?
- Privacy & Data Management: What does each level or role get to access?
- Data Visualization: How can we communicate data efficiently?
From our research, we were able to define the following:
- Problem: Effective to Great Education has a front-end prototype that allows students to track their feelings. The data is rich and useful, but the company needs an interface to easily use administrative tools in order to have a fully-functioning product.
- Hypothesis: A dashboard that offers multiple admin features in a digestible manner with create a real MVP for better user testing and ultimately secure investor capital.
- Solution: Our design team is utilizing research to build a dashboard that fulfills the needs of multiple users and completes the product to roll out in Q4 for product validation.
Part 2: Design and Data Visualization
We created user stories for three different user cases: Effective to Great Administrator, Teacher, and Parent. By creating user stories, we are able to focus our designs on our various users, and address role management.

We then created user flows to map out the different journeys each of our three users would take. Through this, we further defined how each of our users would interact with our dashboards, and what screens & data they would need to see.

In order to truly make our dashboards come to life, we needed to focus on data visualization. We needed to find a way to communicate the data Bud to Blossom collects about the students’ emotions. The most important piece of data was the emotion calendar. We needed to figure out how to quantify the emotional data, and how to portray the calendar/passage of time. In addition, students could check-in up to 3 times a day, so we needed to be able to indicate multiple check-ins. How would we fit this all in one graph?
Both line graphs and bar graphs are ways to show changes over time. We experimented with both types of graphs, and found that while line graphs made it easier to generally see trends over time, they couldn’t portray the complexity of the data as well as a bar graph. Using bars, it was easy to show different colors representing different emotions, and multiple bars on one day to show multiple check-ins. But, it was confusing when trying to put multiple students’ data on one bar graph. The line graphs were a great way to give brief overviews of multiple students. Therefore, we concluded to use line graphs to show a whole class’s data, and bar graphs to show an individual student’s data.


We also designed cards to represent each student and portray their emotions for the day. Teachers would be able to scroll through the cards, sort the list of cards, and search them to easily get more specific data about their class. In the cards, we focused on showing overall mood, specific moods, and a way to quickly generate reports for parents.

Finally, we began building out the wireframes for the various dashboards using Sketch. We found inspiration from other dashboards online, and used dashboard design conventions to help guide us. We used a left hand navigation bar, and kept our lists as simple and as easy to search as possible using filters and search bars. Then, using Atomic, we built an interactive prototype. Use the link below to view it:
Part 3: Usability Testing and Micro Iterations
Once we had an interactive prototype in Atomic, it was time to test it! We conducted usability testing with four people, giving them scenarios for certain roles and asking them to complete various tasks. After conducting the usability tests, we compiled everything we learned into a list, and sorted it by impact of issue and effort to fix.

Using this information, we started with the high impact and low effort issues and fixed them. We went through many micro iterations, fixing the issues and then testing them one by one. After fixing all of them, we had a chance to conduct another round of usability tests, this time with a teacher.
From this test, we found that overall, the dashboard was easy to navigate. The biggest issue was with the data visualization. Originally, our participant misinterpreted the graph of the whole class’ emotion calendar as a graph for a single student. This reinforced our need to make our data visualizations as clear as possible to prevent confusion. Labels needed to be more prominent.
After making lots of small improvements to our wireframes and prototype, it was time to create some mockups.
Part 4: Mockup
Below are some of the mockups for our dashboard. We went with white and gray to make the colors for the data and buttons/toggle switches pop.




Next Steps
When it comes to next steps, there are a couple things we can address:
- Creating onboarding for the dashboard to help orient users when they first sign up.
- Testing of the pilot Bud to Blossom app: seeing how the front-end app and backend dashboards we created work together.
- Continuing to support Laura and the Effective to Great team as they work on bringing Bud to Blossom to life.
I believe that Bud to Blossom is a powerful tool that has the potential to help many students grow and learn important SEL techniques. I’m excited to see where Bud to Blossom goes, and am so proud that I got to be a part of such a wonderful project.