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.
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.
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.
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
• GradesK-1
• Grades 2-5
• Grades 6-8
• Grades 9-12
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
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. This paired with our qualitative research gave us fantastic insights to be able to produce our initials set of designs.
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.
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
Competitors Research
Suite360 platform was found to be outdated compared to other learning platforms.
Takeaways
After looking at 12 of the top competitors, we identified a few 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 as opposed to having one color/theme.
• Provide overview of students’ completion statistics at the top level for teachers.
• Minimize number of clicks to get tasks done for teachers.
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 with due dates.
• 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.
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.
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” (ie, icons, labels) and are assembled together in order to create components referred to as “molecules” (ie, buttons, inputs). Molecules are put together in order to create more complex components called “organisms” (ie, cards).”
Some examples of these design molecules include:
• Buttons & Selectors
• Inputs
• Icons
Principles
• Multi-product scalability
• Theming based on product
• Flexible enough to be updated and build upon
• Specific enough to be useful.
To make Suite360 scalable, we created a design system that can accommodate future iterations and growth of the platform and also usable in the Navigate360 (parent company) range of products.
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.
