Redesigning the classroom

Overview

As I and most others are working from home during the COVID-19 crisis, I have joined a start up to create a language learning product. My role on this team is Lead UX/UI Product Designer.


Process

We started by classifying the different types of users.

  • Learners (independent and classroom)

  • Teachers

  • Administration

Our team began research and interviewed with teachers and students to understand what digital learning was like during a pandemic and how we could tailor our solution to empower teachers and not replace them.

From our first round of interviews and surveys we found a couple of key insights that would inform our information architecture:

  • Teachers spend a lot of time outside of class on grading and lesson prep.

  • Teachers are using multiple programs to meet their needs.

In tandem with our Information Architecture taking form through wire-frames, I started to do market research on teacher and learner products. Since we were starting from scratch, our brand language would begin with this product. Through competitive analysis I defined our direction in the form of style guides and inspiration boards. From here I started to transform our wire-frame into conceptual UI.

UX

Competitive Analysis

Our competitive analysis and market research involved analyzing the strengths and weaknesses of Language Learning Products as well as Classroom management tools like Google Classroom.

In-Depth Interviews

Goals:

  1. Develop a unique vision for the teacher experience by identifying the needs, motivations, and pain points of target customers (U.S. market).

  2. Record their reported behaviors around lesson planning (on-boarding, navigating and customizing other existing (digital) teaching tools). 

  3. Investigate their hopes and expectations for supplemental teaching technology.

Affinity Mapping

Affinity Mapping.jpg

User Personas

Persona 2.jpg

Information Architecture

Teacher Classroom Management Dashboard

Card Sorting_Info Architecture.jpg

Teacher User Flow

Card Sorting_Info Architecture - 2.jpg

Teacher and Student Site Map

Card Sorting_Info Architecture - 4.jpg

UI Design

Sketching and Wireframes

Sideprimary nav .png
At-a-glance Reporting.jpg
USER CLICKS-1.jpg
USER CLICKS-2.jpg
Main Dash 4.jpg

High Fidelity Screens, Design System and Prototype

Lesson one place holder

Lesson one place holder

Teacher Side Design System

Teacher Side Design System

 
Learner Side Design System

Learner Side Design System

Spanish and English placeholder prototype

Spanish and English placeholder prototype

Future Pipeline

Lesson Database

Lesson Database WiP.JPG

Gradebook

Gradebook.png
Previous
Previous

Pressure Gauge

Next
Next

Design Sprint - Friend Rental