Designing with Kids: Prototyping

slides in keynote presentation

This year’s career day at my children’s school marked the 3rd time I spoke in their classrooms about User Experience Design. Children love devices, games and apps, so getting them engaged is as easy as asking them about their favorite apps and websites, what they like about them and what they dislike or find frustrating. From there, making a connection to the field of UX Design – designing experiences that people find easy to use and love coming back to – is an easy transition. Since my husband and I both work in UX, we decided to co-present this time around.

When I first presented in 2015 and the children were in 1st and 2nd grades, I focused on the basics of interface design by discussing color, typography, icons and form elements. I also had the children draw “wireframes” (quick sketches) to illustrate a sequence of 3-4 mobile app screens. At the end, I chose one child’s drawings, took photos of each screen and showed how to make a clickable prototype using an app called Pop.

This year, however, the children are in 3rd and 4th grade. They’re using Chromebooks in the classroom, many have their own mobile phones and all are are pretty tech savvy. As such, I decided to skip the discussion of interface elements and, instead, talk more about user experience, explain the purpose of prototyping, and walk them through an exercise to create a basic prototype using a more robust prototyping application.

careerday-slides1

Asking the question “Have you ever downloaded an app that you later deleted? Why?” yielded an earful about buttons not working, apps being slow and features shown in the app store that either aren’t in the app or require advancing to some unattainable level. Yes, these kids get the value of UX for sure. Once they understood the importance of making sure people like their product before putting it out into the world, we talked about prototyping as a means by which they could take their own ideas, create a model or ‘prototype’ and test it with users to identify potential problems or ways to make it better.

careerday-slides2

There are quite a few prototyping applications used by designers, so I briefly mentioned three: (Sketch, InVision and Marvel) and the focused on Marvel since it is the easiest to get up and running quickly. I started the prototyping demonstration by showing them an app I had made in Marvel the night before. Of course, it featured pictures of kittens:

sample app on Marvel app website

Many of the children in the classroom have either attended a basic coding class or camp, used apps such as Hopscotch or Scratch or attended the school’s annual Hour of Code event, so they have a sense of the amount of time it takes to program simple motions and logic sequences. Seeing how quickly they could drag-and-drop elements in Marvel to create screens featuring photos, text, buttons and other controls definitely captured their attention. Once they had a sense of the possibilities, their minds were racing with ideas of what they wanted to build. In one class, we chose an idea for a vacation app that would let kids chat and share photos with their friends while on vacation; in another class, we landed on a concept of tracking books read over the summer. They had some great ideas for gamifying book reading, btw.

Once we had a basic idea nailed down, my husband and I walked them through creating the first two screens in Marvel.

marvel-app1

Next, we showed them how they could create hotspots (clickable regions), connect screens, and add transition effects.

Screen Shot 2017-05-23 at 5.51.01 AM

Our demo ended with a simple two-page app, and we showed how they could access it on a phone and share it with others to get feedback. Seeing their app immediately available on phone was especially impressive, and in each class we had questions about whether it “would be available in the app store.” Yes, we definitely had these kids eager for a career in UX. In fact, my son’s teacher told me the next week that the kids seemed so interested in designing apps that she gave them classroom time to work in Marvel on their Chromebooks.