Restructure the Online Intro

SMC Prototype Mockup

Project title: Restructure the Online Intro

Type of work: Interaction design for online classes

When: 2020 - 16 weeks

Concept: Improve or create the systems which help build "community" for online students.

Design Group:

  • Elham Ahmadi
  • Jennifer Morehead
  • Max Wright (Me)

My Roles & Responsibilities:

  • Online research, evaluation, etc.
  • Spokesperson, presenting, & public speaking
  • Group facilitation, providing feedback, & facilitating communication and forward progress
  • Ideation
  • Visual Designer


SMC Stakeholders: The members of SMC administration with which we communicated include Erica LeBlanc (the Dean of Academic Affairs), Brenda Benson (the Senior Administrative Dean), various Distance Education staff (Christine Miller, Ashley Eutsey, Tammara Whitaker, Steven Sedky), and others.

What They Wanted Us to Keep in Mind:

  • Budget, technology, manpower, etc. will always be an important note of consideration but if the project is strong enough then work can be done to implement it in some way.
  • Changing the culture of online education will be one of the biggest challenges.
  • SMC’s online education hasn’t seen any meaningful updates beyond the introduction of newly available tools; the mindset and approach haven’t evolved with the times.

Research Screenshot

Who we researched: College students actively taking online-only classes.


  • Netography / Online Research
  • Interviews
  • Participatory Card Sort
  • Anonymous Survey
  • Personal Observations / Basic Heuristic Evaluation

A note on the project: 3 weeks into this project news began circulating about Covid-19 and the subsequent quarantine measures went into place. It was an interesting time. All in-person methodologies had to be done remotely instead, including the interviews and the card sort.

Research Screenshot

The beginning: From the outset, it was clear to us that the majority of students already gravitate to existing resources, especially Facebook, to find their sense of community with other students. Our early, online research indicated that online students went to those resources for help and we realized something that should've been obvious: when students start online classes in college they're beginning a new experience after having 12 years (or more) of in-person, on-campus learning.

What does that mean? Students have a lot of questions and need help; the school needs to go the extra mile to help students acclimate; engaged participation requires comfort with their new environment.


I felt like I wasn't a part of the class.

Karina (Graphic Design Major)

You miss a lot of that rich, interpersonal connection.

Gabe (Business Major)

[Professors] explain how they personally work through Canvas but [they] didn’t explain how Canvas actually works.

Brittnay (Graphic Design Major)

Pain Points

After 3 interviews we had the following pain points in mind, among others:

  • Classes are at the mercy of their professor; if a professor is unorganized then the class will suffer.
  • Not all classes migrate.
  • Typing a comment isn't the same as saying it.
  • There is no onboarding; students have to figure it out for themselves.

Original SMC Website

After initial research, and realizing just how many "basic" questions students need the answers to, the first concept our team agreed upon was to redesign the existing SMC website for the "Distance Education" department. To the left is a screenshot of the original website, an evaluation of which revealed some glaring issues:

  • Outdated, confusing language/terminology, such as "Distance Education" instead of something like "Online Learning."
  • An unnecessary and redundant amount of links to outside websites that can be catered better.
  • Too much text, often confusing, provided by administration that doesn't inform the students.
  • A lack of student-specific resources, such as a student FAQ section.

We used a participatory card sort plus an anonymous survey of 20 students to help us inform the ideation phase as we moved forward, such as priorities when viewing the website and expected categorization when attempting to navigate it.

In addition to the redesign of the website we also agreed as a team to prototype a video that could be used as a basis to address common paint points encountered by online students.

Later in the project we came to a realization that something as simple as an introductory email from a student's professor with basic instructions could be an invaluable onboarding tool straight from the horse's mouth.

Card Sort Activity Screenshot
Anonymous Survey

Concept Sheet
Concept Thumbnails


As a group we collaborated on our assorted concept ideas by drawing storyboards, thumbnails, and wireframes. We agreed early in the ideation process that the entire information architecture of the website would have to be revisited, as well as realizing the need to establish a strong visual language.

The first pass of the website redesign primarily tackled the navigation and beginnning implementation of visuals to make content more interesting.

Prototype 1

The second pass of the website made slight improvements to the navigation again while overhauling the content display with a much more organized, gridded structure and further incorporated visual elements such as color blocking.

Prototype 2

Sample Video

Following the concept itself we wanted to present a basic proof of concept of a shortform video that could inspire a series of such videos, about common pain points, to provide a simple, informative resource for an increasingly visual student body.

Intro Email Template

Following our research and discussions we realized that we hadn't touched the actual onboarding process. The first touchpoint being communication from the school or your professor makes it necessary to build a structured email template with accompanying best practices (remain concise, link out to important resources, etc.) as a way to introduce new students to the course as well as to the online platform.

Introductory Email Template


Overall our concepts were received quite positively. The stakeholders we presented to agreed quite unanimously with a lot of the problems we discussed, such as the outdated language of the department, wanting to include more visuals and marketing materials, as well as talking to the students to figure out more of their needs.

Unfortunately, our work has served largely to enforce and inform many projects that the administration is already working on. They informed us that several departments are working on updating their respective pages on the school's website. One of the staff members is working on an instructional video series to help students during their enrollment. After presenting our email template they mentioned that, because of the Covid-19-induced transition of all classes to the online platform, all teachers were required to undergo additional training, including a class to show them some best practices when reaching out to students at the beginning of a new semester. Although, they agreed that having a template that teachers can edit freely would be a useful starting place.

View the complete presentation/slides right here.