Experiential Social Emotional Learning Administrators Dashboard

Enhancing the dashboard experience for administrators with intuitive and effective features.
Client: Kikori
Year: 2023
Role: UX Designer

My responsibilities:

Using the design thinking process to define and solve the problem

· User Interviews
· User Flow
· Usability Testing
· Wireframe
· Prototype

ToolS used:

Using the design thinking process to define and solve the problem

· Figma
· Otter
· Zeplin
· Zoom
· Calendly

My teammates:

Using the design thinking process to define and solve the problem

· Austyn Sigler
· Nancy Paucar

Background

Background

Kikori is a community-driven platform that puts experiential, social-emotional learning activities in the hands of educators worldwide. Kikori's SaaS community-driven platform provides K-12 educators with easy access to experiential social-emotional learning (eSEL) curriculum that helps students play, reflect, connect, and grow. Kikori makes it easy for all educators to create an ideal environment for learning and transformation.

Background

The Challenge

Create an effective and intuitive dashboard for administrators that would meet their needs and goals.

Background

Business Goals

By meeting user needs and goals we will increase the number of users who purchase and engage with Kikori’s organization account.

Our approach

Using the design thinking process to define and solve the problem

· Redesigning the current barebones dashboard for enhanced intuitiveness and effectiveness.

· Transforming complex metrics into easily digestible information on the dashboard.

· Facilitating improved communication and collaboration between educators and administrators to boost Kikori web app adoption within organizations.

solutions

Solutions

Based on all the information collected through research and findings, we figured that an admin dashboard will require following functionality to better assist our users.

Visibility

View usage

Allow admins to view educator usage and how and when activities are used.

Clarity

Simple to interpret

Use data that is simple to interpret for both admin and educators

User control

Explore data

Enable users to explore qualitative data on SEL growth and effectiveness

Interaction

Communication and collaboration

Add features that improve communication and collaboration among educators and admin

Empathize

We conducted two different research method to gain a deep understanding of user needs, pain points, and expectations in order to inform the design of an optimized administrative dashboard for Kikori.

The Research Plan

Defining Goals for Research and Mapping Out a Plan

We set out a few research objectives and decided on the optimal research methods to achieve them:

1. Understand user needs and priorities in order to optimize the dashboard

heuristic evaluation

2. Understand current pain points and challenges

user interviews & usability testing

3. Understand administrator dashboard expectations

comparative analysis

3. Understand gaps and opportunities in user’s process

comparative analysis

Heuristic Evaluation

The heuristic evaluation revealed some usability issues

The purpose of the heuristic evaluation was to quickly and easily find usability problems related to coach posting games and inviting other teams. My team and I went through the posting and game inviting process while assessing the site against Jakob Nielsen's 10 general principles for interaction design. Below are the key issues we discovered.

Visibility

Confusing icons and visual indicators

Confusing icons and visual indicators for notification and game status changes.

Mapping

Users unsure if their actions are done

Unclear error messages and lacking in confirmation for irreversible actions.

User control

Navigation is not intuitive

Limited ability to modify scheduled games and unclear navigation prompts during invitation.

Consistency

Ambiguous terminology and phrasing

Ambiguous terminology and phrasing concerning both context and platform function descriptions.

Research

Competitive Analysis

We used competitive analysis to understand Kikori's competition, evaluating competitor dashboards for success factors and user frustrations. Additionally, we aimed to identify current dashboard trends for a user-friendly administrative dashboard implementation.

Research

Key User Insights

To better understand user requirements and insights for the administrative dashboard, we interviewed current and potential users. Analyzing these interviews improved our understanding for building the dashboard.

Persona

Meet Peter Johnson, Administrator for a charter school

Administrator for a charter school

Bio

Peter is a 37 year old Administrator for a charter school. His goal this year has been to implement social emotional learning in an effort to reconnect kids post pandemic. He hopes to implement Kikori platform school-wide. The efficacy of the platform is important to the success of the teachers and students. Being able to see teacher engagement and visual measures of student progression are important for decision makers to see.

Goals

  • Wants to see when SEL activities are used by educators
  • Wants to see what SEL skills students learn from each lesson
  • Have Kikori implemented district wide
  • Assign SEL lessons efficiently
  • Wants to align SEL curriculum with today’s standards

Pain Points

  • Improve collaboration and communication with teachers
  • Quantifying student SEL progression is difficult
  • Has a hard time getting teachers to adopt an SEL platform
  • Finding a more efficient way to communicate game details

Define

At this stage, it was time to redefine the goal and narrow down its scope based on the insights gained from users.

Problem Statement

Vendors need a form that is easy to navigate, gives clear instructions, uses consistent terminology, and provides flexibility so that they can get their products into the hands of more educators.

Ideate, design, test, repeat

In this phase, we brought our concepts to life by creating five screens, for the admin dashboard, each based on our 'Possible Solutions.' I led the development of the feedback and note screen.
To get innovative solutions into the hands of users, we needed to concentrate on idea generation. My teammates and I brainstormed the Information architecture and user flow to ensure smooth experience for the users.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

onboarding screen

Creating onboarding screens

For the onboarding screens, the goal was to allow users to set up their institution’s goals to help them monitor SEL progress and view activity usage on the dashboard. These onboarding pages would also ease them into the dashboard experience which can be overwhelming at first for new users.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Onboarding screens

User flow

The user flow provide a visual representation of the steps a user takes to complete our onboarding task.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Onboarding screens

Sketches

We created sketches with idea of making goal setting EASY so our sketches contained a limited amount of questions, separated amongst different pages.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Onboarding screens

Wireframes

For our low-fidelity pages, we refined language and simplified initial questions. The third screen, focused on educator activity completion goals, was consolidated into one page for easier access. After onboarding, users are directed to the settings page for convenient future edits.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Onboarding screens

Iteration

Based on client feedback and user testing, we simplified analytics by allowing users to set an Overall Activity Completion Goal, making it easier to understand Kikori's basic usage. We also improved goal-setting questions, removing complex ones to avoid overwhelming users.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Onboarding screens

Prototype Demo

Based on client feedback and user testing, we simplified analytics by allowing users to set an Overall Activity Completion Goal, making it easier to understand Kikori's basic usage. We also improved goal-setting questions, removing complex ones to avoid overwhelming users.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

onboarding screen

Creating home screen

For the homepage portion of the dashboard our vision was to help admin view important data and allow them to customize their experience according to their specific requirements.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

home screen

User flow

The user flow provide a visual representation of the steps a user takes to complete tasks on home screen.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

home screen

Sketches

We explored different options for how to best display certain elements such as a potential overview metric and personal touches, like a welcome message to the user of the dashboard.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

home screen

Wireframes

The analytics, feedback and notes widgets that feed to the Homepage went through different iterations, so the homepage also changed.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

home screen

Iteration

A key user testing takeaway for our home screen was the desire for customization. To meet this demand, we added a 'Customize Home Page' button in the bottom right. We envision expanding this feature to include a drag-and-drop function for widget selection. Additionally, we introduced 'Generate Report' and 'Report Library' buttons for swift report access.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

onboarding screen

Creating Analytic Screen

The purpose of these pages is to monitor SEL progress and view usage of the platform that is simple to interpret.

Visibility

View usage

Allow admins to view educator usage and how and when activities are used

Clarity

Simple to interpret

Use data that is simple to interpret for both admin and educators

User control

Explore data

Enable users to explore qualitative data on SEL growth and effectiveness

Interaction

Communication and collaboration

Add features that improve communication and collaboration among educators and admin

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

analytic screen

Early Sketches

We explored different layouts and options for how to best display certain metrics, such as number activities played and time spent on the platform.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

analytic screen

User flow

The user flow provide a visual representation of the steps a user takes to complete task on the analytic screen.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

analytic screen

Initial Wireframes

Our initial wireframes after further discussion with the stakeholders about our sketches and important metrics for the administrators.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

analytic screen

Iteration

For our graphs, we had a number of iterations before we landed on their final versions.

Change to Number of Activities Played

The graphs initially showed individual activities completed per educators, but we simplified it to show total completed activities.

Change to Number of Active Users

The first design displayed logins per educator, but it didn't reflect active usage. So, we changed it to show the number of active users.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.
Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.
Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

analytic screen

Hi-Fi Mockups

For our graphs, we had a number of iterations before we landed on their final versions.

Click ‘See all’ for more details

analytic screen

Analytics Prototype Demo

For our graphs, we had a number of iterations before we landed on their final versions. Initially, we displayed logins per educator, but we later realized it didn't reflect active usage. So, we changed it to show the number of active users. Selecting 'See all' displays an overview graph and educator details. The 'Number of SEL Activities Played' graph initially showed SEL goal completion, but we simplified it to show total completed activities. 'See all' provides a list of educators with activity details. Clicking a name opens a pop-up with individual SEL goal completion rates and activity breakdowns.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

onboarding screen

Creating Feedback Screens

The feedback page aims to track educator satisfaction and Kikori platform effectiveness by collecting activity engagement data. This data also informs future activity suggestions.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.
Visibility

View usage

Allow admins to view educator usage and how and when activities are used

Clarity

Simple to interpret

Use data that is simple to interpret for both admin and educators

User control

Explore data

Enable users to explore qualitative data on SEL growth and effectiveness

Interaction

Communication and collaboration

Add features that improve communication and collaboration among educators and admin

feedback screens

User flow

The user flow helped me gain a deeper understanding of how users interact with the dashboard, allowing me to empathize with user needs, preferences, and behaviours.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

feedback screens

Early Sketches

Below are sketches illustrating options for displaying educator feedback on activities.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

feedback screens

Wireframes

Initially, we explored three distinct feedback ideas below in our mid fidelity design, we noted that the users find it challenging to distinguish them across separate widgets during our user testing.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

feedback screens

Feedback Final Iteration

We've opted to streamline all activity feedback into a single, organized table in our final design.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

feedback screens

Prototype Demo

We've opted to streamline all activity feedback into a single, organized table in our final design.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Creating Notes Screens

For the notes page, our aim was to enhance the communication and collaboration between educators and admin.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.
Visibility

View usage

Allow admins to view educator usage and how and when activities are used

Clarity

Simple to interpret

Use data that is simple to interpret for both admin and educators

User control

Explore data

Enable users to explore qualitative data on SEL growth and effectiveness

Interaction

Communication and collaboration

Add features that improve communication and collaboration among educators and admin

notes screens

User flow

By mapping out user flows, I can identify pain points, bottlenecks, and potential issues in the user journey early in the design process, enabling more efficient problem-solving.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

notes screens

Early Sketches

We tried to explore different way to display the communication elements.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

notes screens

Wireframes

We started out by creating a messaging component and message sending features to try to help improve the communication between administrator and educators.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

notes screens

Iteration

While direct messaging can improve communication, changing it into a notes component could promote greater collaboration between educators and admin. Also, the shared notes feature is already built in the Kikori webapp so it can be collected easily. We retained the notes request feature to allow admins to request more notes for further collaboration.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.
Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

notes screens

Prototype Demo

While direct messaging can improve communication, changing it into a notes component could promote greater collaboration between educators and admin. Also, the shared notes feature is already built in the Kikori webapp so it can be collected easily. We retained the notes request feature to allow admins to request more notes for further collaboration.

One of the key differences in the updated designs was that vendors could not move freely around the form or publish/preview their listing until all required questions had been answered.

Voting on sidebar, progress indicator, and accordion features.
Voting on form layout and organization e.g. grouping required questions.
Voting using branches and hidden questions to shorten the form.

Key Learnings

The existing form wasn’t flexible enough for the diversity of products, so I worked with vendors to improve it.

Working on this project helped me widen my understanding of experiential social emotion learning (eSEL) education and the challenge of assessing the efficacy of Kikori’s eSEL activity platform. Conducting user interviews and research helped us gain insights into the specific needs and goals of administrators in the context of social-emotional learning (SEL) education.

We encountered obstacles related to measuring SEL growth and ensuring student data privacy. This highlighted the importance of addressing privacy concerns in data display. We learned that presenting data in an easily interpretable format is crucial for administrators, leading to changes in how metrics were displayed in graphs. The notes component aimed to promote greater collaboration and communication between educators and administrators, utilizing the shared notes feature within Kikori.

However, there are still a lot of features that could be added with proper testing and identifying the problem with the help of real-time user data. We hope to see an increase in the number of institutions purchasing an organizational account. Higher active user counts, average screen time, and open rates tracked through Google Analytics. Also, an increase in user satisfaction with our design gauged through qualitative interviews and polls.

Wrap-up

Next steps

In order to further improve the coach experience on Schedulete, I suggest a few next steps: