The Problem Space

Due to the COVID pandemic this past year, most people had to adjust to some level of remote communication. Whether that be for work, socializing, or for school. For those in school, particularly younger students, this was a generally a difficult switch. School is not only where kids get their academic education, but also where they make friends and participate in extracurricular activities that they enjoy. Y-Labs aims to develop a platform that facilitates online learning effectively and also provides students with ways to connect with one another, even from afar. Our team interviewed and tested with real students, and iterated on a robust platform that is intended to be an all inclusive space for high school education.

Here is an overview of the process that went into this project:

Interviews

For our user interviews, we interviewed seven students and one teacher. Our goal was to learn about how students and teachers are currently doing remote learning and what is or isn't working for them. In addition, we compiled a list of platforms and services that students and teachers used for remote learning to inform our next step of research: competitive analysis.
‍

Key Takeaways

• Distractions are a big issue for students. Multiple students mentioned this as a problem during class but also when trying to work on assignments.
• The ability to socialize has been hugely impacted by remote learning. In order to talk to classmates, students must make extra effort.
• Both students and teachers dislike having to switch between multiple platforms or apps for different aspects of school or different tasks.
• An additional problem is trying to use apps simultaneously. For students this might mean having whatever app they use to take notes open at the same time as their video call app for listening in to class. For teachers, this could be having their video call app open as well as presentation apps or lesson plans.

Competitive Analysis

For our competitive analysis, we examined 24 different platforms- five of which we consider direct competitors. In our analysis, we noted strengths and weaknesses of each platform, key features, and looked for user reviews to get insight from those who have significant experience with a given platform. Then, we looked for patterns across all of the platforms and opportunities to fill gaps where student or teacher needs are not being served.

Below is an example of how we reviewed each competitor. Click through the tabs to see the full analysis.

Key Takeaways

• There is no platform dedicated to our target age group. The majority of tools are targeted at younger grade levels but usable up to 12th grade. Most tools with elements of “engagement” that Y-Labs is after (ex. Activities, games, teacher tools for checking engagement during class, etc.) were for younger age groups. Many of the platforms or apps used by older age groups are also often used in professional settings and are not necessarily tailored to school settings (ex. Zoom, dropbox, onedrive, google drive).
• There were multiple platforms with interfaces that were confusing and not user-friendly. Users would have to click through various screens to achieve a task. A platform having a multitude of features can lead to visual clutter and confusion in regards to navigation and how to use the elements of the interface. Apps that were dedicated to a few tasks often had better feedback from users than apps that tried to do a variety of things.
• People tend to like more familiar interfaces or those that have familiar elements (ex. Google classroom, blackboard). Emulating the familiar and aligning with existing mental models can be an advantage.

Ideation

After our research was complete, we used the insight we gained to brainstorm feature requirements to satisfy our users' needs, generated user stories, and mapped user journeys around central tasks.

Features

The features and subsequent requirements were derived from our interviews and competitive analysis, with input from our stakeholders. Below I focus on the three components of the website that I was responsible for. The visuals are the final iteration of each component.

User Stories

For user stories, we focused on students who might use the platform. On the left is a Miro board where we brainstormed various needs of remote learning students. Then on the right, we boiled them down to a couple main over-arching stories.

User Journeys

We took the motivations highlighted in our user stories and broke them down into more specific tasks which we explored step by step through user journeys. Below is an example of a user journey for the task of adding an event to a student's Y-Labs calendar.

Design

Sketching and Wireframes

Using our user journeys and features, we sketched out how these elements would be arranged on the webpage. We iterated a few times on the sketches, matching them to user journeys to ensure that there was a design for every action or task. These sketches were then used to create wireframes in Figma.

High Fidelity Prototype

Building off of our wireframes, we created more high fidelity designs- complete with a final color scheme and design components. The high fidelity prototype consists of 50+ screens that we connected in Figma to create a clickable prototype. Below are snippets of the final UI.

Testing

We performed user testing with the high fidelity prototype to learn about what about the design worked for users and where potential pitfalls may be. Testing included letting users click through the platform freely, thinking aloud as they explored. We then asked them to complete specific tasks, such as adding an event to the calendar.

Key Takeaways

• Overall, the navigation worked well for users. However, there were a few pages where users weren't certain how to close a component or go back. For example, once the chat was opened in Live Classroom users have to re-click the button they used to open chat in order to close it.
• For the student calendar, users felt that it was missing a daily view (the original design included weekly, monthly, and yearly).
• One user questioned how they would add a new favorite page to the "Favorites" tab of the workspace sidebar. This was a task we had not considered in our original design.

Final Thoughts & Takeaways

Organization is key.

This was the first project I've worked on that included more than 50 screens and a multitude of different states for various buttons and components. Working on such a robust platform required not only organization considerations in how I approached the design of the navigation but also organization in my own workflow. This was a huge learning experience for me as far as making sure all my pages were labeled well and easy to navigate for an outside viewer.

You are not designing just for you.

As a student who has been learning remotely, it was easy to let my own biases and preferences influence my design ideas. However, user feedback often gave me perspective I had not considered. This helped me to look at every problem from multiple angles and ultimately get in the habit of checking in with myself and making sure I wasn't designing the platform that I wanted to use rather than a platform that is for everyone.