Problem Statement
COVID-19 revolutionized the way that education works for both students and teachers. Since then, educators, curriculum designers, and website developers have been tasked with an enormous challenge: create interactive and engaging online learning platforms that connect students and teachers in a way that encourages academic growth.
Possible Solution
We believe that by providing clear progress monitoring features through an accessible and engaging online learning platform, Froggy Academy will encourage and motivate students who were affected by COVID-19 to reach grade proficiency standards.
Project Duration
Tools Used
Design Process
Competitive Analysis Matrix
We began the research process by conducting an analysis of competitors. Doing so allowed us to identify elements of online learning platforms that are expected by users.
_edited.jpg)
Research Plan
We developed the following research plan to provide a guideline for the process of empathizing with the user. We decided to conduct user interviews and a user survey to help us better understand the perspective of our user.
Quantitative Analysis
We conducted a user survey to understand patterns of user needs and wants. The following images show the results of the survey.
Data Analysis
After conducting our research, we analyzed the results and identified a few key takeaways from the student and teacher perspective. These takeaways will drive our decisions moving forward.
%20(1).png)
User Personas
We created two user personas (one for teachers and one for students) based on the information gathered during research. The perspective of the users drove our thought process for the project.
.png)
.png)
Point of View Statement
It is vital to remember the perspective of the user throughout the entire design process. We started our brainstorm session by reminding ourselves the perspective of our two users: students and teachers.
How Might We Question
Asking ourselves “how might we?” is a great way to start the ideation stage of a design project. This statement gives us a focused framework to dream big.
Brainstorming w/ Creative Matrix
We decided to use a matrix to spark creativity during our brainstorming session. We focused on important topics discovered during our research: accessibility, interaction, and engagement. And from there, we dreamed up some big ideas for Froggy Academy.
.png)
MOSCOW Prioritization
We came up with lots of great ideas - and let’s be honest, it’s hard to choose just one! We used the MOSCOW prioritization method to help us focus on what we must have first. We plan to come back to the other ideas in future iterations of Froggy Academy.
.png)
Mid-fi WireFrame
Our team began to design wireframes using Figma. Using the various feedback we have received from testing we were able to create the following wireframes.
.png)
.png)
Design System
Hi-fidelity Mockup
With the design system developed, we added style to our wireframes to create our hi-fidelity mockup as we neared the end of our project.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
User Testing
After completing the high fidelity prototypes, we conducted further using testing - a moderated remote walkthrough. From this testing, we identified four main areas of improvement to guide the next steps in the design process: