To test other solutions as well, we created 3 different short stories. They a told a fictional journey with each design solution. I was tasked with writing stories for the other solutions (not After Class), and drawing the cells and highlighting interactions.

Version 1

Below is the first volume of the after class story, introducing emotions of a student "waking" into their 8:30am class, and having fun exerting her personality. Dozens of cells were created, testing different versions of the design solution. Cells each had different objectives; highlighting digital and physical trajectories and the specific traversals/interactions that help direct that. These follow the pain points, the wants and needs for users identified in user research, a desire to create an identity or meaning, and simply find a friend :)

Click for lightbox

Google Material & Desktop FOCUS

We knew the design would use google material. My job in this case was to identify core designs to the UI to make this interface appealing and friendly, after sitting in a class for 3 hours that may of been unappealing to them, this was highly important. The idea was to drop the "classroom feeling" off the interface but keep core design elements for familiarity and user-friendliness.

Design System

Seeing who is in the class, and how many people are in the class, is pretty core to the interface. However, it's also very familiar, and a bit spooky. The goal is tog get users to enter a room, we want them to feel safe, curious, and provide an ego boost.

Annotating Wireframes

This interface takes the previous design system card and places in a lobby set-up where you can see the different groups to join. This is suppose to fun, and snazy, and highly readable. Users should understand what is in front of them right away.

Annotating Wireframes

This interface describes the room experience. The UI is much larger than the normal Google Meets layout to create this feeling of play, specifically the ride sidebar containing user meta data. The grid structure with column separation was implemented to keep the UI more legible. User's can also change the grid structure to 1 viewport, 4 viewports or all view ports.

Core UX Turning Point

These helped identify the system requirements we would need to assure a seamless and user friendly entry into After Class. The first moments of interaction were perhaps the most important in the After Class User Experience. The goal here is to help students WANT or DESIRE to participate in meeting their classmates after a two-hour class. Basically increase the chances they stay. The solution here needed automation and an intro experience full of movemen

Requirements

User flows were only used to help flatten out the core user interactions within the interface. So mute, grid layouts, etc. where left as a basic copy of the existing program. The core changes were color, selecting lobby categories, entering and leaving a lobby that doesn't break your experience, the micro-interactions, and connecting your account to Disney+ and Netflix.

We really did design a google meets solution according to our business goals and needs. If this were a google project, the main changes would be CSS, and some Javascript for categories.

We were also cognizant of how slow Google Meets can be, that is why categories are a thing. There shouldn't be too many lobbies available on one page, but not too few options.

Design System

The design system uses Google Material Icons and layouts, the color of the google meets interface, and a few additional onboarding steps, are the significant changes related to for user experience design solutions. We benchmarked the Disney+ and HBO Max design systems, since the have a "cinema" feel. We wanted to bring that aurora gradient colors and blur into google meets.

Accessibility, Privacy, & Controls

We knew colors like this could be tricky, so in accessibility we created color blind options that change the CSS modes.

We also wanted privacy to be an important aspect of After Class, but we also felt that if users had the option, they may be interested in sharing their viewing data from Disney+ and Netflix to allow them to potray their personality.

The after class experience has the ability to create many other natural behaviors, such as relationships, and aiming to impress someone in your class.