Plato Learning


Plato is a video conferencing tool that allows educators to own the entire classroom experience online, including instruction, practice, and recording. A private beta is being tested currently.

Entering a new decade

Practice Makes Perfect has been serving thousands of students and hundreds of educators for over a decade. Entering the new decade, it's now tasked with reimagining the classroom experience and continuing to offer powerful tools to its partner schools.

A Collaborative Effort

I was brought on by the client to work in collaboration with a team of other designers and developers on style guide and vision. I independently owned the in-classroom experience.



Client

Practice Makes Perfect

Role

UI/UX Design

Tools

Sketch, Principle, Zeplin



Research

Clarifying Goals

We first started by meeting with stakeholders and completing a competitive audit to understand the problem space, expectations, and goals. Here are a few key takeaways that informed our approach:

guiding principles

Guiding Principles

Our design process was driven by a strong understanding of stakeholder needs and inspired by real life interaction patterns between administrators, teachers, and students.

guiding principles

Design Strategy


A Modular System

During sketching, we found that each screen could be extrapolated to its core function: analysis or instruction. This allowed us to develop a modular design system that would form a cohesive user experience and shorten development time.

Adapting to specific needs

Once the system was developed, we could add smaller modifications to the UI to fit each stakeholder’s unique needs.

modular system

Breaking screens down into modular components

Moodboards to define the direction

Finding the right visual language was key in creating a fun learning experience. We used styleboards to hone in on the right visual style direction for the product based on our audience, their needs and our values. The style we landed on can be described as: colorful, soft, open, approachable and simple.

A difficult challenge was developing our palette while still staying in line with our client's parent brand. We created a color palette with vibrant and bold colors to enhance the learning experience, and give it a more unique feel. We used a typeface with soft shapes, while still being very readable in longer passages.

guiding principles

Design for the right audience

We created several personas to work around. This was a great reference point throughout the design process, especially when gathering feedback from stakeholders, to see if our product was solving real problems.

guiding principles

Making a complex interface simple

One of the greatest challenges we faced was fitting powerful tools into a single product. Our design needed to be flexible, intuitive, and well-designed in order to help students and educators focus on what mattered the most, and allow then to find what they needed only when they needed it.

modular system guiding principles

Structure and Flexibility

In-person teaching provides the best of structure and flexibility, allowing educators to prepare material beforehand but adapt to their students' questions as they go. However, doing this online can quickly spiral out of control when searching for links, problems, videos, and demos within a single screen.

We approached this problem with a color-coded toolbox system which allows educators to prepare mixed media material that can be added to lectures on the fly. These pods can be automatically added to student notebooks, allowing students to focus on understanding instead of copying down material verbatim.

Focusing on What Matters

Research found that students often struggle to focus in passive online lectures, distracted by peers or struggling to keep up with pre-recorded material.

We approached this issue with a few strategies: 1) Material can be quickly copied into notebooks for easy access, allowing users to focus on engaging with the instructor and material instead of copying down notes 2) Cameras are hidden for peers, but chat allows students to still interact with peers and aids without disrupting the educator in the middle of a lesson and 3) Making notetaking an integral part of online instruction keeps students actively engaged, even when passively listening.

modular system

Giving A Helping Hand

We found that aids often struggled to support students through online learning, especially due to the lack of key engagement signals like body language and being able to check student work.

During a live lecture, the challenge was to build an interface that allowed aids to monitor the engagement of several students at once. We approached this in a few ways: 1) Making it extremely easy for students to ask questions instead of waiting for help 2) Allowing aids to quickly toggle between students, and gauge engagement based on their camera and notebook activity and 3) Providing several intervention tools, including bringing additional material or taking over a student's notebook. This was all introduced via a compact action bar at the bottom of the screen, which gives aids easy access without losing their place in the live lesson.

modular system

Fostering a Bond with Students

Our teacher interviews taught us that face-to-face interaction was essential to their teaching playbook. It allowed them to adjust material on the fly based on student body language/response, especially with young classrooms where students might not feel confident to speak up.

Our solution was a smart gallery that would adjust automatically to show as many students as possible. This and the notes section can be expanded/collapsed so that teachers can always focus on what they need.

studentsinview

Coming to a Student Near You Soon

Check back soon for when this project makes it to a school near you.

Next Up...