Ux/Ui Design

Sovably

July 2020

The Project

Solvably is a digital learning platform that supports real-world, collaborative, creative problem-solving in an accessible, user-friendly environment. The product was created to improve longitudinal workforce readiness and learning outcomes while building upon the 21st Century competencies of critical thinking, creativity, communication, and collaboration.

The essential skills for 21st-century learning and occupations fall into four domains:

  • 1. Core subjects and skills such as the orthodox 3Rs that every educated person should have mastery of.
  • 2. Learning and innovations skills domain requiring skills such as critical thinking and problem-solving.
  • 3. Career and life skills domain, calling for skills such as collaboration, teamwork, and leadership.
  • 4. Digital literacy skills domain, requiring skills such as computer literacy and digital fluency.

This collective vision describes the“skills, knowledge, and expertise students must master to succeed in work and life; it is a blend of content knowledge, specific skills, expertise, and literacies”. The three Rs of reading, writing, and arithmetic are no longer sufficient for today’s learners, who must also develop the essential skills necessary to compete in today’s global economy, or what P21 refers to as the 4Cs: critical thinking, communication, collaboration, and creativity. While not the only skills needed for success in the 21st century, the 4Cs are part of the new learning paradigm.

WireFrames

Solvably product incorporates elements of Google Docs, that users can collaborate in text fields together. Slack where users can communicate and share assets and Escape room. Users can enter different parts of the experience and work on the “challenge”. Users collaborate to complete challenges.

Kickoff Meeting

Architecture

Iterations after Wireframes

In the product process, we could not duplicate the experience of an escape room. An escape room is a game in which a team of players cooperatively discover clues, solve puzzles, and accomplish tasks in one or more rooms in order to progress and accomplish a specific goal in a limited amount of time. We were struggling with recreating the experience of “everyone in the one-room”. The platform felt like another LMS (Learning Management Software).

The Inspiration

The solution I designed was to create a collaboration navigation bar. The inspiration was taken from a delivery progress bar. The collaboration navigation bar took each phase(s) of the challenge and broke them into sections(“rooms”). Users avatars are displayed under each “room”. As users navigate from “room” to “room” their avatars appear in the “room” they are in. Once the users completed a section they received a checkmark letting them and other team members that they completed a section. Once the team completes an entire section, they can proceed to the next phase.

This solution gave an instant feeling of togetherness. Users felt that even though they were virtual, they felt they were all working in the same room.

Navigation Inspiration

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

Here 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 the iteration process. Adding the users' avatars under the sections "rooms" added a feeling of togetherness even though the users were virtual. The completion checkmark visually communicates 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 completed section.

Hi-Fidelity Mockups

Hi-Fidelity Mockups

Ux improvements after testing

We were fortunate enough to test users during the development of Solvably. We tested 4th and 5th-grade students for our K-12 version. I noticed an issue with one aspect of the collaboration experience. In one section of Solvably users collaborate their answers in an input field. The experience is very similar to Google Docs. In the testing, I noticed users would jump into the input fields before a discussion of which user would work on which input field. This caused an issue for users because they were being interrupted while they were typing. If two users were in the same input field typing, they would be typing over each other. It created frustration for users, it was also interrupting the users' stream of consciousness when forming their answers.

The design solution I came up with was to lock the input field once a user enters the input field. This would solve the issue of users typing over each other and allow users to form their answers without interrupting their stream of consciousness. Adding a micro-animation of text bubbles along with an avatar of the user and text stating, "UserName, is typing..." This helped to visually communicate to users that someone was currently typing. Once a user is done typing, there is a 5-second runoff. Once that runoff is completed, other users can then enter the input field to further collaborate if needed.

UX Improvement after testing


Previous Case Study Next Case Study