top of page

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

project duration.png

Tools Used

tools used.png

Design Process

Design Thinking.png

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.

Copy of Wicked Problem (Module 3)_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.

Question 5.png
Question 6.png
Question 1.png
Question 3.png
Question 2.png
Question 4.png

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.  

Copy of Wicked Problem (Module 3) (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.

User Persona (teacher).png
User Persona (student).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.

creative matrix (1).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. 

moscow (1).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.

Teacher Login.png
Teacher Dashboard.png
Message Center (Teacher).png
Grade Center (Teacher).png

Design System

Brand Personality.png

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.

Student Login.png
Student Dashboard.png
Message Center (Student).png
Grade Center (Student).png
Assignment Page.png
Review Page.png
Teacher Login.png
Teacher Dashboard.png
Message Center (Teacher).png
Grade Center (Teacher).png
Student Login.png
Grade Center (Student).png
Review Time.png
Student Dashboard.png
Teacher Login.png
Message Center (Student).png
Assignment Finish.png
Teacher Dashboard.png
Grade Center (Teacher).png
Message Center (Teacher).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:

Expand accessibility features

Incorporate individualized questions in review

Give feedback w/ positive verbiage

Time limits for messaging center (student)

bottom of page