Y-Labs Platform

This platform is an all encompassing remote learning application that includes a live classroom, personal calendar, community groups for studying and socializing, a library of academic materials, and more. I worked on a team with other researchers and designers, specifically working on the overall interface, live classroom, and calendar.

Context: Completed for an internship at Y-Labs Ventures
Role:
Research, Design
Duration:
4 Months
Tools:
Notion, Miro, Figma
Laptop mock up showing a web application cycling between two different screens: a calendar and a virtual meeting.

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:

Research

In order to find out what gaps exist in current systems for remote learning, we conducted interviews with our potential users and performed a competitive analysis of direct and indirect competitor platforms. The time spent on research totaled around four weeks.

RESEARCH

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.
RESEARCH

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

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.

IDEATION

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.

Main UI (Sidebars) 

The "main UI" describes the elements that are consistent between every page of the platform. Since students would be attending class, communicating with teachers and classmates, and studying all on one platform, we wanted the navigation feature to be simple and streamlined to avoid visual clutter.

In addition, the righthand sidebar has a "workspace" toolbar feature where students can quickly take notes, add tasks to a to do list, access their drive, and navigate to their favorited pages.

Live Classroom

The live classroom is designed with the intention of being a space where students can get the most out of their eduction. The workspace toolbar mentioned previously allows them to take notes side by side with their live instruction. Additional features are:
  • reminders to put away distractions and be present in class
  • the ability to "react" to their teacher's questions with different icons such as a raised hand or check mark
  • options for saving class notes to a specific folder for reference or to share notes with a classmate

Calendar

The calendar is for the most part fairly standard in order to be intuitive, however it does feature some characteristics that make it perfect for organizing a busy student's schedule. It's features include:
  • simple click to add an event
  • auto-population of the student's classes and school events
  • robust options for event customization, such as notifications, custom colors, and the ability to link an event to a specific video call or chat room
IDEATION

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.

IDEATION

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

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.

DESIGN

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.

Main UI

Live Classroom

Calendar

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

Design Updates

We made updates to our designs based on our findings in user testing. A few key updates to the screens I worked on included the following:

  • We ensured that every page or page state had a clear way to go back to the previous page.
  • We added a daily view to the calendar, pictured right.
  • We designed an onboarding tutorial that would give users a tour of the interface so they would know how to perform tasks that were less obvious, such as favoriting a page.

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.

Thank you for visiting my portfolio! ☺