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