OnRamp to Remote Learning

A Learning Management System for Hybrid Educators

WHAT

Responsive Website

WHEN

August - December 2020

MY ROLE

Co-designed concept and early user experience
Designed final experience and visuals
Developed custom Wordpress plugin and theme

TOOLS

Figma
Adobe Illustrator
Wordpress

OVERVIEW

The Allegheny Intermediate Unit needed a platform to connect regional schoolteachers with remote and hybrid teaching guidance produced by passionate fellow educators.

UX CHALLENGE

With two modes of content delivery — pre-recorded video lessons and live workshops — AIU sought a web resource where teachers could easily access both.


onramp modalities

UX CHALLENGE

An Instructional Design Lens

AIU wanted to show teachers how each video lesson and workshop matched one of 6 Instructional Design Principles from the Friday Institute.


onramp principles



Many educators have approached the adaptation to remote and hybrid learning as a problem of technology, eagerly trying to learn new or unfamiliar tools like Google Classroom.

AIU3, however, wanted teachers to approach the switch with pedagogy at the forefront.



We often had educators asking us, 'Well, how do I give out this worksheet on the computer?' ...

Research has shown that worksheets are a less effective teaching practice...

We don't want educators to bring ineffective teaching practices with them online. We want to use this transition as an opportunity to focus on effective teaching skills. Pedagogy first, technology second.



UX CHALLENGE

Merging Two Brand Identities

AIU needed to merge two brands in this site: the Instructional Design Principles, and a set of logo standards developed by their graphics team.


onramp brand challenge



UX SOLUTION

OnRamp to Remote Learning: Responsive Web App

onramp landing2
Landing Page
Landing Page



onramp main
All Content Page
All Content Page



Mobile Landing and All Content Page



UX PROCESS

Defining the User Flow

onramp flow



Crafting the Information Architecture

My co-designer and I created this architecture for the site, following our flow map above.

onramp architecture



Mid-fi & Hi-fi Mockups

For the second phase of this project, I developed these higher fidelity mockups of the site in preparation of executing it in code.

onramp hifi1
Early Mid-fi Prototype: All Content Page
onramp hifi2
Mid-fi Prototype: All Content Page
light mainpage
Hi-fi Prototype: All Content Page
light landing3
Hi-fi Prototype: Landing Page