Students Create Animated Sticker Packs for Facebook Messenger

• Designers: 8th graders
• Where: International School of Amsterdam
• Design Challenge: Create an Animated Digital Sticker Pack

I'm so very proud of my students and all their awesome creations for this project. I'm happy to share my design tech unit on animated sticker packs, as well as student examples below.

Getting started: How is communication changing in the digital age?

For this design tech unit plan, I prompted students to think about how communications have changed over the ages. We started our process of inquiry by discussing the first written communications in Mesopotamia via cuneiform tablets, to hieroglyphics, to Morse Code, and finally to mobile and online communications. I used the following tweet to get the kids thinking about the connection between more pictoral forms of written language and emoji and/or sticker packs used in modern day communications.

Implementing the IB Design Cycle in this project

The IB Design Tech program utilizes the IB Design Cycle to guide all project-based learning. As you can see below, we start out researching the topic and then move on to prototyping. Next, we create the actual product and finally evaluate the test the product for effectiveness based on the design specification.

Researching the topic

In order to research the topic of emoticons in modern day communications, I enlisted the help of our Head Librarian Michelle Andis who curated an amazing Lib Guide for my students with tons of resources on emoji research.

One particularly interesting resource from the Lib Guide is the Real Time Emoji Tracker from which many students pulled data to create charts in Google Spreadsheets that highlighted the top used emojis at a given time.

Prototyping

In order to rapidly generate ideas for the project, students first interviewed their target users. Then, based on the information they gathered about their target users, students engaged in a '100 Ideas' brainstorming activity based on the methodology of Stanford's dSchool .

In the following image you can see the evolution of Kanna's sketches into digital images using the Adobe Draw iPad app .

Learning to use new software

In order to learn how to make animated GIFs using software like Photoshop and GIMP, students delved into online tutorials and videos to teach themselves these new skills. My students were self-directed learners in this unit and truly taught themselves this new animation skill with online articles and tutorials. Some students even chose to create their own tutorials to show others how to use the software to create animated GIFs.

In this tutorial by Chris you'll learn how to create animated GIFs using Photoshop CS6.

Jason walks you through how to use the free and open source Photoshop alternative, GIMP, in the following tutorial video.

Finally, here's a tutorial by Neha on creating animated GIFs using the web-based GIF generator, Picasion.

Final designs

Students created 8-10 stickers for their Facebook Messenger sticker packs showing a variety of different emotions. Below I have highlighted some student work which represents a couple of the stickers out of their pack.

Some students even chose to create mockups showing how their sticker packs would look if in use in Facebook Messenger. Seohyun even created an animated mockup, which really took the concept to the next level.

Evaluation

Students sought out expert appraisals from teachers, graphic design professionals and IT experts from within the International School of Amsterdam and beyond for feedback on their work. One expert, the International School of Amsterdam's IT Director, Warren Apel, was so enthused that he tweeted out Victorine's emoticon to his followers on Twitter.

No Way! Students in @fiberopticnow Katie's grade 8 Design class made some AMAZING animated GIFs! pic.twitter.com/JQjsNox9P1

— Warren Apel (@warrena) March 26, 2015

Of course, students also surveyed their target user, as well as conducted user tests to see which stickers best expressed the emotions that their target user wanted to communicate online.

Some students chose to change their stickers based on feedback from their target user and/or experts. As you can see, Ky chose to add color to his stickers, as well as animations, based upon the feedback from his target user and expert.

Reflection

Overall, I was truly blown away by my students' hard work and determination on this project. It takes a lot of inquisitiveness and perseverance to self-direct one's own learning in a project-based setting. Furthermore, the IB Design Cycle is a very robust rubric that requires students to complete essay-length documents for sixteen criteria. Therefore, students are not only learning the new software and creating their product, but also thoroughly documenting their design processes.

If I could do the project over again, I would have urged my students more strongly to submit their sticker packs for the Line Creator Market , which is a marketplace where artists can submit their emoticon packs for use on the Line Messaging App to receive 50% of all profits. However, in order to submit stickers for Line, one must create 42 very professional prototypes. Perhaps this is something that high school design classes can take on. I'd love to hear of students' work making it into the actual Line store!

Let us know what you think!

I hope that you were inspired by this unit plan to try an animated GIF lesson in your own classroom. Whether you're a design teacher, homeroom teacher, or other subject teacher, it is possible to integrate animated GIFs into your lessons. They're not only a great way to show motion, but also processes, or change over time. Please let us know what you thought of this design unit, as well as reach out if you decide to try something similar!