General Assembly:
Online Learning Microsite

Overview

An interactive microsite showcasing GA's online learning offering as a response to the Covid-19 effect on in-person training.

Filed Under
Role(s)

Principal Designer, Engineer


1st scene of the interactive story

Overview

The campaign/microsite's goal is to increase awareness of General Assembly’s expertise in the online learning community; positioning ourselves as the top provider in accessible learning with career support.

The GA community is still facing a wide range of challenges during these unprecedented times. On campus, in-person education is at a standstill. GA can continue providing career transformation opportunities through our online offerings by replicating the live classroom experience in the comfort of your own home.

This project was a more unique usage of our Design System.

The Mission

Work closely with Marketing and Creative to craft an experience that highlights what it's like to learn online at GA.

  • Gather Requirements
  • Brainstorm & Storyboard
  • Create Prototype(s) & Test
  • Ship & Monitor

Storyboard & Prototyping

I worked closely with Creative, whom were creating and testing the underlying story for this microsite. We bounced ideas back and forth over Miro, Keynote, and shared clips over Slack.

The idea was to curate the flow of the story, but allow the user to skip around at any moment with a persistent navigation and singular CTA.

There were a few aspects of the concept that required us to visualize them as a moving storyboard. In particular, the transition effect between "screens", and the laptop open/close sequence.

A Rough Animated Storyboard
Laptop Sequence

Scene Variations

We worked through a few different scene variations, and would later need to make further modifications to avoid text/image overlap and improve readability for a range of devices/resolutions.

Desk scene variation
Desk scene variation
Desk scene variation
Desk scene variation

Final Demo

After some performance optimizations, accessibility improvements, and mobile device tuning, the final build went through internal testing and then as a live split-traffic test.

FullPage Demo

Conclusion

With little upfront investment we were able to brainstorm, prototype, and test a different experience, building new and interesting ways to engage our audience.