After Class

This project followed the 2020 virtual Blended Spaces Workshop. Research assistants studied studied the online-learning undergraduate college experience over a 2-week period.

The main problem was stagnant student relationships during online learning, where students would lack the ability to form relationships commonalities with other classmates.

The design solution, After Class is a API for Google Meets, creates a digital post-classroom space for students revolved around popular movies, games, and tv shows.

Scope of work


8 Weeks


Myself & Brandon Degni
User Experience Designer & Reseacher

What I built

UX Methodologies

(listed in order)

Likert Statements


Empathy Maps

Data Analysis

Generatation & Sythnthesization


Analyzing Solutions

Character Design


Storyboard Evaluations

Sketching Flows

User Interface & Prototyping

Strategy & Research 

What is the approach?

With about 13 other remote college researchers of various backgrounds, we had a good idea on the types of measurements we wanted to create, so we went straight into Likert statements.

From an obvious loss of social interactions, some students had a stronger desire for social engagement in a virtual setting, and some had lost a desire when they were previously social butterflies. From my standpoint, no bias here... I loved online learning, I felt so much more comfortable, I learned more, I didn't feel as pressured from my environment, and it did give me a stronger drive for socialization.

Scope of survey:

  • 324 Participants
  • Focus on Student-Student and Professor Relationships
  • Participants were undergraduate college students above 18 years old of various ages, flitered through a pre-survey consent form.

Here's some data that helped identify this problem:

  • 58% of students felt at lack of personal identity in online learning environments.
  • 36% of student felt they learned more in an online environment than in a physical environment.
  • 64% of students felt they participated more in small virtual groups than in a large classroom.

Discover & Ideate

Sketching design solutions:

We took this initial problem, and brainstormed a bunch of unique ideas that could bridge classroom relationships in a fun way. Solutions incorporated video games, card games, shows, and advanced virtual meeting interfaces to make classroom activities more accessible. The goal of this project, was to create new meanings between students and professors, how could we unveil commonalities between students?

How socialization opportunities arise in an online class?

How might we give students the opportunity to create more of an identity for themselves in online learning?

How might we create more participation in online classes?

Getting laser focused on users

Using the MacGyver Effect, we thought about how existing technologies, ideas, and systems, could integrate with an online learning class. However, the online classroom is full of student insecurities, fears, lack of technology, and desire, so solutions that created obtrusions to the user were not a good fit.

This design solution needs to balance student desires and fears to assure they would actually use the design solution. We felt like an After Class space where students can talk to each other, or their professor upon class end, was something that could extended the online classroom in interesting ways, without forcing things on students.

User Archetypes

With accessibility & trust in mind, we brainstormed users from all ranges of the classroom, and online working environments.

Extroverted Students

Introverted Students

Students in Clubs

Students who game

Students who watch shows

Students who love sports

Students in need of extra-help with course-work

Students with classroom fear

Students who love online learning

Students who dislike online learning

Students who dislike online learning

Addressing Pain Points, Goals, Needs & Wants

We created empathy maps andpicked the mind of the persona and envisioned her whilst in the class room. How do social cues begin in the classroom? How might students desire to interact? How do students who had prior relationships in-class re-establish? What are they thinking about at the start of class? How about the end of class?

Identifying points of design

Nia is typical, and qwerky college student. She's hesitant to speak in her online class, but also interested in meeting those around her. Let's face it, no average college student is relishing to speak during the virtual environment. Which is a shared commonality.

While researching Nia, we looked deeply into different student-relationships, a shared love for shows, entertainment, and games. Exploring these shared commonalities helped advance our research.

From the data, and our own observations, we found that seeing classmates faces provided more engagement, it's ironic because many students never have their camera on. Students lack the push, or the natural obtrusive occurrences, that help form friendships even for the introverted or unsocial.

Design Problem:

Students lack out of class opportunities for socialization with classmates and professors.

  • Little understanding of who is in their classroom.
    Commonalities & Interests
    Trouble with coursework (student - student coursework aide)

Design Solution of interest:

After Class is chrome extension for Google Classroom and Google Meets that creates after class discussion rooms for popular shows, movies, and video games for the online learning environment. The After Class API combines viewer data from Disney+ and Netflix to identify shared interests between members of a classroom to inhibit socialization help create friendships unlike the existing google meets and classroom platform.

Prototype: Design Fiction Storyboards

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 :)

Final Version

The final version has a laser focus on creating a fictional story and designing a solution that was ethical. We thought how could this be done with the incorporation of streaming services like Disney+ & Netflix, and existing software like Google Meets, to connect students not only moments after class, but also hours after class or when they would be watching these types of shows or games.

When watching a show through the streaming app, they could get UNOBTRUSIVE notifications that someone else is, or has recently, watched that show. As a team, we felt this achieved the design goal of creating new meanings and understandings of the online classroom and "veiled" relationships.

From a stakeholder view, what a cool way to bring interest into their shows through simple data sharing, and what an awesome problem to help solve with their existing products (MacGyver Effect).

Click for lightbox

Prototype: Sketching Interfaces

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.

Prototype: IxD Models

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


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.

Prototype: Compositional Layouts

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.

Prototype: User Interface

Future Work

After Class is a google chrome extension that integrates with Google Meets & Classroom to provide students the opportunity to create new meanings and understandings of their remote classroom and the relationships that are yet to be unveiled.

Post COVID design implementations:

  • Many educational classrooms have returned to in-person learning, but the "new normal" still has an affect on education and work-life. Companies, and new forms of education, used these tools due to the advantages of online learning, however the problem of "veiled relationships in the remote environment" is still very present. The After Class API is a highly trusted program, sponsored by big brands, that many administration entities would be happy to include in their system.