Back to portfolio

Case Study

Suite360 Emotional and Social Learning Platform

UX Cabin designed an ESL edtech platform for K12 students that relied on a gamified experience and optimized tools for teachers to deliver content.

edTech eLearning Gamification

🎨 Improved UI

Improved and modern user interface for teachers and students.

🛠 Simplified Navigation

Seamless interaction with simplified navigation by bringing core tasks to the forefront.

🎮 Gamification

Gamification that makes the platform more fun and engaging for students.

Summary

UX Cabin helped Suite360 revamp their web app by upgrading the visual design, introducing gamification for students and simplifying the teachers' navigation so they can get tasks done seamlessly.

Suite360 testimonial quote

Outcomes

  • Improved and modern user interface for teachers and students.
  • Seamless interaction with simplified navigation by bringing core tasks of users to the forefront.
  • Gamification that makes the platform more fun and engaging for students.

Background

Suite360 is a social and emotional learning platform targeted at helping students in the USA grow into emotionally stable and successful adults and citizens. The platform is one of the many products offered by Navigate360, a leading company in holistic safety and wellness solutions that is used by more than 35,000 schools, 5,000 law enforcement agencies and 4,400 businesses nationwide to help organizations prepare and respond in ways proven to save lives and help communities thrive.

Old student interface Old student interface 2

Objectives

  • Clean up User Interface by making it modern and up-to-date with industry standards.
  • Gamify the existing platform without being distracting.
  • Make something flexible enough that it appeals to kids from K-12 grade.
  • Simplify the teacher experience so that they can carry out core tasks seamlessly.

Strategy

Our strategy was to get an understanding from both teachers and students on how to make their experience more seamless and more engaging.

User Research

To ensure we were building the best tool for existing customer schools, it was important to understand the jobs to be done for each persona. We wanted to find out exactly what they did throughout their day and how this software could help enhance their engagement while improving their learning experience.

Old screens analysis Old screens analysis 2

Interview Sessions

We conducted interview sessions with teachers and students from each grade bands to explore what they were currently experiencing in the existing platform and what they may expect from a better more engaging learning experience.

Personas

  • Teachers
  • Grades K-1
  • Grades 2-5
  • Grades 6-8
  • Grades 9-12
Persona pictures Interview notes

Highlights and Findings

From our interviews, we realized that teachers were struggling with engagement so badly because students wouldn't willingly do the lessons, and students found the platform very boring and confusing to navigate individually for the most part.

Teachers

  • Teachers had a hard time tracking completion status
  • Most lessons were guided whole-class activities
  • Competition motivates students

Students

  • Students wanted more feedback
  • Silly themes & visuals don't work
  • Students wanted to explore specific topics

New Ideas

  • Reward tokens that can be used for real life rewards
  • Digital rewards like unlocking avatars or backgrounds
  • Outrank their friends in lesson achievements
Research findings

UI/UX Audit

We ran Suite360's existing platform through a rigorous set of evaluation criteria to determine areas of improvement from a visual and user experience design perspective.

The Audit

162 issues with varying degrees of priority were identified - majority of which were Visual Design and broken UX related, followed by navigation issues.

UX Audit results

Results

From the audit we were able to identify these major changes that the website needed:

  1. Improved global navigation
  2. Smaller lesson card designs
  3. Larger Call-To-Action buttons
  4. In-lesson progress and navigation
  5. Show user's layout within lessons
User interview notes User interview findings

Competitors Research

Suite360 platform was found to be outdated compared to other learning platforms.

Takeaways

  • Gamification is an intricate part of most learning platforms for K-12.
  • Bold and colorful CTAs work best for lower grade bands K-5
  • Teachers' tasks were easily accessible and always at the top level.

Opportunities

  • Give students the autonomy to change the color/theme of their interface.
  • Provide overview of students' completion statistics at the top level for teachers.
  • Minimize number of clicks to get tasks done for teachers.
Competitor research

Design

Equipped with knowledge from other educational platforms and research analysis, we went into design well informed and guided by design principles that ensured we made a platform that was up to standard and delivered its objectives - simplicity and gamification.

Principles

  • Discoverability - give students the ability to discover new lessons while keeping them focused on their assignments.
  • Simplicity - bring all features teachers need to deliver lessons to the forefront.
  • Gamification - Collect in-game items, score points, unlock avatars, leaderboards.
  • Awareness - Highlight student progress while teasing what's coming up next.

Early Exploration

In the beginning, we just wanted to validate ideas and explore possibilities. These low fidelity mockups and wireframes helped us vet out ideas with students and teachers before diving into more detailed designs.

Low fidelity teacher wireframes Low fidelity student wireframes

High Fidelity Designs

Once workflows were validated, we completed final designs for the platform focusing on simplicity and a modern aesthetic that teachers and students enjoy.

High fidelity student design High fidelity student design 2 High fidelity student design 3 High fidelity teacher design High fidelity teacher design 2

Design System

A design system was created from scratch and built to be extensible and used for all future Suite360 upgrades.

Atomic Design

The Design System was created with Brad Frost's "Atomic Design" philosophy. In this model, the smallest UI elements are referred to as "atoms" and are assembled together in order to create components referred to as "molecules". Molecules are put together in order to create more complex components called "organisms".

Suite360 design system atoms Suite360 design system molecules Suite360 design system organisms Suite360 design system theming Suite360 design system components Suite360 design system documentation

Usability Testing

In order to improve design output, usability testing was implemented. Once prototypes were created, we carried out usability tests with internal Suite360 user groups - teachers, administrators and students from all grade bands in order to discover common mistakes, fixation points, and to get qualitative feedback on which flow the users preferred.

Suite360 prototype User testing with students Suite360 feedback

Final Results

UX Cabin successfully redesigned the Suite360 platform with a modern interface, simplified teacher navigation, and engaging gamification for students across all K-12 grade bands.