Postcard Creation: Learn with Homer App for iPad

Story board and user flow that empowers children to correspond with family members from the Learn with Homer app.

Original Postcard Design
The original postcard design created by the amazing Bee Johnson, Creative Director at HomerLearning. This is the sort of card that a child could receive, and ultimately create within the app. The main difference between this and the final version is the reply button—and, of course, the user flow for getting a postcard to this point.
Page 1 of Pigeon Post Flow Sketches
My first page of storyboarding sketches (3 pages, total) of the Pigeon Post flow, taking a child from the moment of opening a new postcard to completing a postcard in reply. This page takes the child up through the creation of the postcard front.
Page 2 of Pigeon Post Flow Sketches
Page 2 of storyboarding sketches. This takes the child from seeing what the back looks like, through each step of adding pieces to their card. If they don't want to do a particular piece of the flow, they can skip, but our goal was to ensure that the majority of children fill out the entire card—or at least most of it—because no one wants to get a blank postcard!
Page 3 of Pigeon Post Flow Sketches
The final set of storyboarding sketches. here a child adds a stamp to their card and sends. At thsi point (not pictured in the flow) the child can also edit things they've already added, or flip the card to see the front that they created several steps back.
Learn with Homer's Pigeon Post - new mail
"Wowie! You have new mail! Tap your mail to see what you got!" Screenshot of the Pigeon Post Office, just after a new postcard has come sliding in along the clothesline.
Learn with Homer's Pigeon Post - Postcard front from Nap the kitten
When the postcard opens, the child sees the front image of the card. Pictured above is a the first card a child receives in the app, from Nap the Kitten, one of Homer’s friends. Online, family members can choose from a set of illustrated backgrounds or upload a photo for this side of the postcard.
Learn with Homer's Pigeon Post - Postcard back from Nap the kitten
The back of the postcard from Nap the Kitten. Audio automatically plays when the back is viewed, and when completed, the image pulses to indicate it is tappable. If tapped, the image increases in size. Likewise, when the audio icon is tapped, the audio plays back again. If the stamp is tapped, the stamp image animates. Note that the card does not have a reply button. This will be handled after the card is dismissed.
Learn with Homer's Pigeon Post - Postcard Dismissed
Once dismissed, the card flies over to the postcard rack to indicate that it lives there, now (one of the changes I made). If the child taps the rack later, it open a set of previously received cards at the bottom of the screen, as well as the option to create a new card.
Learn with Homer's Pigeon Post - Postcard Reply Popup
Homer asks, "Would you like to write back?" I recommended this popup after recognizing that we would have a lot of difficulty creating a reply button that would be recognizable to a 2- or 3-year-old, especially on a postcard that is already visually stimulating. With the popup, we focus the child's attention on the yes/no question of whether they want to reply.
Learn with Homer's Pigeon Post - New Postcard Flies In
If the child chooses to reply, a new card flies in. Originally, when there was a reply button on Nap’s card, the two cards were swapped without a clear visual change, so the move from reading a card to creating a card was quite confusing. Giving the old card a clear destination and the new card a different origin helped to clarify that they were two separate cards.
Learn with Homer's Pigeon Post - draw or camera
The option to draw or take a picture. I wanted the "Camera" button to state "Take a Picture," but Homer's creative director wanted something that would visually balance with "Draw." As such, we settled on "Camera," knowing that although the two labels aren't both actions it wouldn't likely affect usability (especially since many kids aren't able to read the text, yet, anyway; they're here because they're beginning to read).
Learn with Homer's Pigeon Post - Draw Board
This is the Pigeon Post Draw screen, where a child can draw a picture for the postcard front. It's a simplified version of the draw screen that exists elsewhere in the app. My main change to this screen was to remove the 'back' option on this screen. Children were confused by it: they didn't understand that hitting the back button would discard their drawing. As such, we made the decision that if a child starts drawing, we're treating it as a commitment to continue!
Learn with Homer's Pigeon Post - Take a Picture
Have you seen My Neighbor Totoro? If not, stop looking at my portfolio and go watch it right now. You will thank me later. (This is a Totoro, from the film.) Oh, and this screenshot is the 'take a picture' step that a child will see if s/he chooses to take a photo instead of drawing.
Learn with Homer's Pigeon Post - flip to back of card
After the child has finished drawing or taking a photo, the postcard flips to the back side, as Homer begins to say, "There are lots of things to do on the back of your card!"
Learn with Homer's Pigeon Post - Aft
For just a moment, while Homer is still saying “There are lots of things to do on the back of your card!” the child sees the back of card with all of the options. They are not yet tappable. As the child is taken through each step, the appropriate button pulses, and the child will be taken to that step. If the child skips the step, the button will remain, and the child can go back to it by tapping the button at the end of the default flow.
Learn with Homer's Pigeon Post -
“Let’s write a message! Tap the check when you’re done.” I added this black overlay because young children had trouble focusing on the text box when there were colorful things nearby. Initially, I planned for the overlay to also dismiss the text box. I should have known better, though: young children tend to bump the screen accidentally with stray fingers, and this was no exception, so we adjusted the step so that only tapping the check or dismissing the keyboard moves forward.
Learn with Homer's Pigeon Post - take another photo
“Let’s take a picture!” After the keyboard is dismissed, the camera button on the back of the card pulses, and the child is taken through the option to take a photo. Here, you can see I like pottery and plays (well, books in general; this just happens to be my theater bookshelf).
Learn with Homer's Pigeon Post - Recording Audio
“Let’s record a message!” The audio button on the card pulses, and the child is taken to the audio recording screen. This is the recording screen, in the middle of a recording. Stars fly out with density controlled by the audio being recorded. Once the child finishes, s/he can tap the microphone button again to stop. The audio will play back, and if the child likes it, can tap the checkmark. If not, s/he can record again.
Learn with Homer's Pigeon Post - Stamp selection
“Let’s choose a postage stamp for your card!” Lastly, the stamp selection step. Each stamp is an animated gif that will play when tapped. A white glow indicates the selected stamp.
Learn with Homer's Pigeon Post - Flipping a card
The card can be flipped at any moment after the flow is completed, but tapping the button on the left side of the card. When flipped, the child will see the front of the card with the drawing or photo created at the start of the process.
Learn with Homer's Pigeon Post - Finished postcard
”Look at this great card! When you're ready, tap the blue send button,” The child can edit any of their items, or tap the send button to send the card. Note that although it's a text button, we've maintained the color and graphic checkmark that so typically signifies completion of a task within the app.
Learn with Homer's Pigeon Post - card is sent
“And off it goes! Your postcard is on its way.” When the child taps the send button, the card shrinks in size and lands in Homer's hands. He then sends it through the pipe, on to the recipient.

'Project' => 'Design the postcard creation flow for Learn with Homer's new Pigeon Post Office, from the point of opening a postcard to sending a reply.',

'Challenges' => 'I was working on another project at Homer when another part of our creative team initially designed the cards—but there was a fatal flaw in them: the user flow had not been designed for a child to navigate it. Because children weren't guided through the postcard creation, most of them a) didn't know how to reply, and b) once they were guided in user testing to reply, they didn't understand their options and ended up hitting the big blue send button before they had added anything to their card—in essence, they were sending blank cards! My challenge: take the existing postcards—a front image, back image, audio recording, text, and stamp—and map a user flow onto their creation.',

'Solutions' => 'The first thing that I did was to sketch out a story board of postcard creation, and script audio at each step. Since most children using the app are only just learning to read (many of them only 2–3 years old), audio and clear visual focus during each step are critical to a successful flow. I aimed to minimize or eliminate visual distractions, and to take children through each step in a clear, guided process. I also eliminated the 'Reply to Postcard' button and created a simple popup asking the child whether they want to reply. This popup has since been extended as a means for getting confirmation or asking for a yes/no answer, elsewhere in the app.'

'Change Documentation' => ' Story Board and Dev-Ready Templates: This document contains my storyboard sketches and the dev-ready templates that I modified and delivered to our iOS developer after I mapped the user flow onto the postcard creation process.',

'For more about Learn with Homer' => ' See my pages about creating First Readers for Learn with Homer—the first stories that children can read and record on their own using letter sounds and sight words they've learned in the app, or my page about Learn with Homer in which I have User Flow diagrams, Wireframes, information about a hugely positive independent efficacy study conducted by the former US Assistant Secretary of Education at NYU, and a list of Homer's many awards.',       );