The Project

Solvably is an innovative digital learning platform that provides an accessible and user-friendly environment for developing real-world problem-solving skills through collaborative and creative learning. With a focus on improving longitudinal workforce readiness and learning outcomes, Solvably is designed to build upon the essential 21st Century competencies of critical thinking, creativity, communication, and collaboration.

In today's rapidly evolving landscape, a traditional education centered around the 3Rs (reading, writing, and arithmetic) is no longer sufficient. The need for comprehensive skills development across four domains - core subjects, learning and innovation, career and life skills, and digital literacy - has become increasingly apparent. Solvably recognizes this need and offers a holistic approach to education that aligns with the Partnership for 21st Century Learning (P21) framework.

P21 defines the skills, knowledge, and expertise necessary for success in today's global economy as a combination of content knowledge, specific skills, expertise, and literacies. Among these are the 4Cs - critical thinking, communication, collaboration, and creativity - which are fundamental to Solvably's learning paradigm. By providing a platform that fosters these competencies, Solvably equips learners with the tools they need to succeed in both work and life.

WireFrames

The Solvably product seamlessly recreates features from popular platforms such as Google Docs and Slack, enabling users to collaborate in real-time and share assets. Additionally, Solvably incorporates elements from the world of escape rooms, where users are immersed in an engaging and interactive experience. With Solvably, users can enter different parts of the experience and work on various challenges together, fostering collaboration and problem-solving skills. By combining these features, Solvably creates an innovative and engaging learning environment that prepares users with the skills necessary to succeed in the 21st century workforce.

Architecture

Iterations after Wireframes

During the development process, we encountered difficulties in replicating the unique experience of an escape room. This immersive game involves a team of players collaborating to uncover clues, solve puzzles, and complete tasks within a confined space, all while racing against the clock to achieve a specific objective. We found it challenging to recreate the sense of unity and shared space that is central to the escape room experience. As a result, our platform risked feeling too similar to a traditional Learning Management System (LMS).

The Inspiration

The solution I developed to address the challenge of replicating the immersive experience of an escape room on our digital platform was to create a collaboration navigation bar. Drawing inspiration from a delivery progress bar, I segmented each phase of the challenge into distinct sections or "rooms" and assigned user avatars to each one. As users navigate through the different rooms, their avatars move with them, providing a visual representation of their progress. When a user completes a section, a checkmark appears, signaling to the team that they have finished that part of the challenge. Once the team has completed all the sections, they can advance to the next phase of the challenge.

This innovative solution not only solved the technical challenge of recreating the collaborative feel of an escape room, but it also created a sense of shared purpose and community among users, fostering a feeling of togetherness despite being in a virtual environment.

Navigation Inspiration

Evolution Prototype

This is a timed animation that shows the evolution of the navigation bar and the platform. In this video, you can see how the navigation bar morphs over iterations. Adding the users' avatars under the sections "rooms" added a feeling of togetherness even though the users were virtual. The completion checkmark visually communicated to users that the section was completed. Once all the sections are completed, the submit button (which begins disabled) now becomes active and users can submit the section.

Prototype created with Adobe XD

Hi-Fidelity Mockups

Hi-Fidelity Mockups

Ux improvements after testing

During the testing phase of Solvably, which we were fortunate enough to conduct with 4th and 5th-grade students for our K-12 version, an issue was identified in the collaboration experience. In one particular section, users were required to collaborate on answers in an input field, much like the experience provided by Google Docs. However, users would often jump into the input fields before discussing which user would work on which field, causing interruptions while typing and leading to frustration and confusion. This disrupted the users' thought processes and hindered the formation of coherent answers.

Upon noticing the issue with the collaboration experience during the user testing phase of Solvably's K-12 version, I devised a design solution to address it. Specifically, I proposed to lock the input field once a user enters it to prevent users from typing over each other and to allow them to form their answers uninterrupted. To enhance the user experience, I added a micro-animation of text bubbles displaying the user's avatar and the message, "UserName, is typing...," which visually communicated to users that someone was currently typing in the input field. Additionally, I introduced a 5-second runoff after a user finishes typing, during which other users can collaborate if needed. This design solution aimed to improve the collaboration experience for Solvably's K-12 users.

UX Improvement after testing