Interactive Design Lesson: Grand Rapids Public Museum School: Spring 2018

Report by KCAD Professor Bill Fischer

Lesson Plan used

Project Overview

The Interactive Design Lesson Plan aims to guide teachers through a step by step web design project using Google Sites. I taught a 12 week, 50 minute per session, after school lyceum. Attending were ten middle school students (6th, 7th and 8th grade).

Take Aways for the Teacher

  • Classroom management, when technology is involved, requires some special strategies. Students, tend to see laptops as windows into a vast entertainment media world. Not allowing time for some of that is frustrating for them, because there is a constant low-hum of pure entertainment fun just a mouse point and button click away. By letting them satisfy that urge at the beginning and end of the class served to turn the volume down on that hum.
  • Understanding which parts of the internet will be off limits to the students can have a significant impact on how assignments need to be designed, especially in the area of topic choice.
  • Student can be very niched in their interests, taking deep dives into fictional lore and universes, entertainment genres and games. This website project provided a way for them to share their knowledge and potentially find their tribe.
  • Students continued to add content to their sites and even create new ones after the lyceum. When I saw them at the school during pick-up time, they sometimes rush to me to let me know what they have been working on. For several, website design has become a means of public expression.

Environment

Each student at the Museum school must participate in an after school lyceum, and they are able to choose the one they attend from a list of 8-10 choices. The students were wide ranging in personality and interests, though they were all male. They used Chromebooks that were supplied by the school and were all very adept users of both the hardware and software. The Chromebooks were chosen by the students, at random, from a cart. The machines performed perfectly 95% of time. If a student had an issue with the Chromebook they chose, they immediately replaced it with another one from the cart. There was never any troubleshooting involved.

Classroom Management

Students arrived with a lot of pent up energy and could really only focus on designing the websites for about 30 minutes (on average). The last 10 to 15 minutes of each session had the potential to devolve into chaos. During this time it was incumbent upon me to find a way to re-engage. After trying a number of things, having the students show their progress on an overhead projector at the end seemed to work best. Providing 10 minutes at the beginning of class for students to play their funny videos for each other seemed to satisfy their need for some fun time on the Chromebooks and provide a much needed break between the rigors of the school day and the rigors of the lyceum.

The Lesson

The students struggled a little bit with the UX Design portion of the lesson, which included crafting a short project brief, user experience stories and benchmarks. Perhaps their ability to think abstractly is still being developed at the middle school level. I needed to employ one-on-one instruction, providing specific examples during this phase. The students were able to follow the directions for planning the content and building the websites without issue.

The students were able to pick a topic of interest to them. It was an after school program, not tied to any of the daily curriculum, so it seemed like a good strategy for maximizing engagement. The outcomes were focused on web design and not the content included within the sites, though I may try to create some outcomes for the content as well in the future. The chosen topics centered on entertainment genres such as games and comics. Using Google search, most were able to find the information they needed to create content for the websites.

Each student was easily able to finish their websites. In fact, there was little sense of urgency, because the students could calculate how much work would need to be done over the twelve weeks. The Lyceum probably could have been six weeks instead of twelve, with a sense of urgency that may have kept them more focused. The examples below will provide an idea of what the finished websites looked like.

Lyceum Student Outcomes (lessons learned)

  • Planning before doing saves time in the long run.
  • Basic graphic design gridded layout methods.
  • Providing proper credit to sources of content.
  • Logo design.
  • First impressions are important in design. In this case, a really high impact header.
  • Interactive design jargon.
  • Accessibility design: high contrast text and image alt tags.
  • Using Google Sites and logo creation software.

Surprises

A couple of the students decided to create websites centered around tips for beating violent video games. Since websites containing content related to these games is blocked, those students were often not able to access materials they needed at school. They worked on the sites at home as a work-around. Some of the students railed against the violent video games and heated discussion ensued. Nothing was resolved, but the students gave each other room to express their opinions and I'm sure the conversation was impactful in some sublime way. I contemplated banning violent video game topics, but decided to let students go that route and let things run their course. The students that built sites around violent games received admonishment from their some of their peers and, indirectly, the school administration (through the blocks). They would not have had that experience if they were not allowed to pursue that course of action.

Some of the topics that students chose to discuss with each other (independently) during class included:

  • Does playing first person shooter games make people behave more violently?
  • Is god real?
  • Is this the most annoying video on the internet right now?
  • Can I call you Fishy?

Examples

Jack is into the Invincible comic series and created a site that contains his personal reviews. He completed six reviews and is still adding.

Dylan likes to design games and shared some ideas regarding how a level design can double as a tutorial for the game mechanics.

Lucas is mildly obsessed with cars. Real cars. And computer games that involve driving cars. His site reviewed a a wide array of these games in great detail. It's a pretty handy guide for someone trying to figure oouout which game to try next.

Collin dove deep into lore centered around the comic superhero The Flash. This is called a "fan site". It is deep enough to satisfy any Flash fanboy.

Brandon created a website to help promote his mother's event decorating and planning company. It included a picture gallery and a pricing table.

Mason's site provided helpful information around the MW3 computer game that included keyboard shortcuts and set-up instructions.