Sketch and Learn logo

Challenge

Visual notetaking (aka "sketchnoting") is an under-recognized notetaking strategy that is rarely taught in schools. Young students need to be exposed to different notetaking strategies to discover what works for them.

Outcome

A sketchnoting app that helps middle school students practice sketchnoting by engaging them in playful activities, ultimately helping them capture school subject matter in ways that work for them.

mocks-01

Background

After being introduced to the practice of sketchnoting in 2015 during a visual storytelling workshop at the Stanford d.school. I began using sketchnoting as a tool for capturing information and ideas.

During graduate school I interviewed middle school teachers, and I was surprised to hear that many educators do not teach visual notetaking strategies to their students — especially at a time where students are bombarded with information across multiple subjects. So for a class project focused on combining physical and digital mediums to promote learning, I decided to explore the idea of helping young learners develop a practice in sketchnoting. 

My Role

Product Designer, Researcher, Illustrator, Animator

Deliverable

iPad app prototype

Product Impact

Award recipient at Interaction Design and Children Conference 2019. Funded by Stanford University grant to advance educational equity. Validated designs and prototypes with students, teachers, and education researchers.

Timeline

5 months, March - July 2019

What are sketchnotes?

Simply put, sketchnotes are notes + visual elements like drawings and diagrams, that help the notetaker capture information and ideas. A sketchnote can be created anytime and anywhere. Most commonly, sketchnotes are produced while listening to a presentation, panel discussion, or watching a video.

sketchnoe example

Research and needfinding:

From personal networks and online communities, my classmate and I interviewed to novices and experts in sketchnoting to understand their current needs and best practices. We used advice from experts to scaffold and teach best practices to novices. Further, we read relevant academic research on notetaking, cognition and memory, and universal design for learning.

Pain points and opportunities to address:

“I don’t really like to draw, because I'm not that good at it. I suck at drawing. I’m not an artist.”

-Student who was anxious when trying sketchnoting

“It feels like it takes
longer to write down my notes. I'm much slower at drawing than writing.”

-Student who has tried sketchnoting before

“It’s about building a visual vocabulary, developing a practice and helping people see value in sketchnoting.”

- Graphic facilitator and avid sketchnoter

Academic research shows:

Students who take handwritten notes perform better on conceptual questions than students who type notes on their laptop.

The Pen Is Mightier Than the Keyboard: Advantages of Longhand Over Laptop Note Taking

The act of drawing adds more context to information and aids memory and recall more than writing.

The drawing effect: Evidence for reliable and robust memory benefits in free recall

Physical objects/manipulatives are able to pique interest and increase engagement from many learners regardless of ability.

Universal design for learning: Theory and Practice

Key research insights that drove design decisions:

Drawing of a person enjoying sketchnotes

Ideas, not art.

Remove the psychological barrier by creating a playful experience that promotes sketchnotes as being about ideas, NOT art.

drawing of a person sketchnoting

Build a visual library.

Help students develop their own visual library to build confidence and gain a sense of progress toward the practice of sketchnoting.

sketch_and_learn_images-08

Get physical.

Maintain the physical interaction of handwritten notes (pen to paper) to promote hands-on learning and engagement.

sketch_and_learn_images-19

How Sketch and Learn works:

Engage in sketchnote activities

The game introduces mindsets and techniques of sketchnoting, and students complete playful activities that ease them into the practice of sketchnoting.

Create and share sketchnotes

At the end of an activity series, students create larger visual summaries by applying the sketchnoting techniques they learned. Students can save and share their sketchnotes with peers and teachers.

mocks-04

Build a personal visual library

Each activity saves the student's sketches, and builds toward a personal visual library that they can reference — helping them view their own progress and reuse their own sketches.

mocks-10

Stay engaged offline

When offline, students can also use the physical notebook version. When revisiting the game online, their personal visual library is automatically updated by snapping a photo. Osmo, an educational game company, also inspired this physical-digital interaction.

example of how images are extracted from the workbook version

Impact on students:

We tested our prototypes with over 20 middle school and high school students. After the experience, students showed observable changes in their notes, such as meaningful use of visuals and diagrams. Further, students that took sketchnotes referred back to them and performed better on comprehension questions than those that did not take sketchnotes.

sketch_and_learn_images-25
impact-01

Student’s notes before sketchnote intervention

impact-02

Student interacts with prototype

impact-03

Student’s notes after sketchnote intervention

“I know how to use images to better understand a subject.”

-Middle school student

“I learned how to use small doodles or sketches to enhance my notes and how to be faster in notetaking.”

-Middle school student

“I learned how a draw a brain and an easier way to take notes, a fun way to take notes.”

-Middle school student

Designing/Protoyping:

iPad app prototype:

prototype_process-01

I wireframed the user experience to understand how students might move from reading about techniques and applying them in activities.

prototype_process-02

I prototyped the experience in Adobe XD, tested with students, and handed off specs to engineer/app developer.

prototype_process-03

I built an interactive prototype to be tested with more students and presented to communities of educators, researchers, and students.

Physical-digital notebook prototype:

physical-digitalprotoype

I laser cut manipulatives and stickers with unique codes that can be placed on top of handwritten notes.

physical-digitalprotoype

Teammate developed image processing software (Processing3) to recognize codes and extract images.

physical-digitalprotoype

Teammate used Google Photos API to store sketches and automatically sort them into user defined categories.

For this project, I also designed the promotional assets:

Project Video

Based on a real middle school student (Zoey), the project video goes through the story of how she developed a practice in sketchnoting, and how Sketch and Learn could help even more students like her. Animation done in After Effects.

Logo

The Sketch and Learn logo takes the form of a notebook and pen in a single icon. The color is inspired by The Sketchnote Handbook by Mike Rohde, which was referred to me back when I was first learning about how to sketchnote.

logo ideas leading to the the final logo

Credits

  • Jiayu He, Project Partner, Co-Designer, Researcher

Partners and Contributors

  • Karin Forssell, Director of the Learning, Design and Technology (LDT) master's program
  • LDT course instructors: Soren Rosier, Keith Bowen
  • Advisors: Roy Pea, Hilda Borko
  • Early contributors to product development: Caitlin Go, Jina Lee, Thieny Nguyen, Yuqi Yao, Grace Chiang
  • Sketchnote experts: Sherrill Knezel, Anna Iurchenko, Christina Wodtke

Related Research Publications

© Copyright Kenneth Fernandez 2019. Designed with ♥︎ in San Francisco, California.