B
Français | English

Family Connections Case Study

.

Working with young kids, I designed for family connections that cross generations

Tablet wireframe showing a simple, colourful drawing of a tree and a house. Above and behind the drawing are three partially hidden buttons. Below the drawing are a pile of building blocks (one with a heart and one with a smiley), a line drawing of a waving kid, and a line drawing of a smiling older person with a wavy tunnel connecting the two people.

Challenge

Young children want to independently connect with family. And in-person they can do this easily through play, storytelling, and simple conversation. But when we're apart that's not so easy for them. With this design, I worked with young children (3-5 years old) directly to get their own design ideas for their own communication. From those ideas I designed this family communications app.

To design with young kids, I focused on the playful aspect of design and made a co-design game about astronauts communicating across space. I designed from those kids' ideas for their "gadgets" and created a communications tool based in their needs and priorities as users.

  • Three children and one adult sitting in a circle around colorful blocks, pages with drawings, and markers.
  • Two drawings by young children. First, a colouring page showing two astronauts with a dashed line separating them. Drawn between them is a purple wavy grid. Second, scribbles in black, orange, and yellow covering the page. Written in an adult's handwriting at the top is the label 'mirror' and to the right 'bridge'
  • Tablet wireframe showing a simple, colourful drawing of a tree and a house. Above and behind the drawing are three partially hidden buttons. Below the drawing are a pile of building blocks (one with a heart and one with a smiley), a line drawing of a waving kid, and a line drawing of a smiling older person with a wavy tunnel connecting the two people.

Keeping Devices Connected

My first instinct was to consider what types of media to include in messaging. But from the young kid's descriptions of their designs, I learned that it's more important for them to know that their device is connected to the other family member's device first. They wouldn't even describe making a message until they had described the connection. That way they know their message can be sent and received.

They often described this connection as a bridge or a tunnel that the message can travel on or through. My design reflects that with a tunnel connecting two user avatars. Each user can design their avatar to look like them. To show the status of the connection, when one of them is offline that avatar disappears and the tunnel/connection is broken.

  • Tablet wireframe showing a line drawing of a waving kid and a line drawing of a smiling older person with a wavy tunnel connecting them.
  • Tablet wireframe showing a line drawing of a waving kid behind a wavy tunnel. The tunnel is broken and has a gap in the middle.

Building a Message

Now I could consider what types of media could be in a message. I stuck with ones that don't need any literacy skills and are already familiar: drawing, photos, and voice notes. And this matched what the kids came up with (along with less feasible options like smells).

  • Three icons surrounded by sketchy frames show icons of a crayon colouring in a notebook, a photo of a beach sunset, and a speech bubble with a speech wave inside.
  • A pile of green interlocking building blocks. The top two each have a single emoji on them, one heart and one smiley.

A message doesn't have to be just one thing; like just one drawing. Different pieces can go together to make a message. I wanted a fun way to show how these different pieces are part of one whole message, and since the kids often used building blocks to build a message out of different blocks, I started with a pile of blocks next to the user's avatar. These blocks also help me show how the messages send back and forth, but more on that in a moment.

Each part of a message (a drawing, a voice note, or a photo) takes some of those blocks and becomes part of a block tower (or a block spaceship, or a block horse...)

  • A short rectangular block tower with a simple, colourful drawing of a tree and a house stuck on the front.
  • A castle block tower with two drawings stuck on the front: an owl (top) and a simple, colourful drawing of a tree and a house (bottom).
  • An L-shaped castle block tower with three drawings stuck on the front: an owl (top left), a simple, colourful drawing of a tree and a house (bottom left), and scribbles in green, black, and yellow (bottom right).
  • A castle made of building blocks with four drawings stuck on the front: an owl (top left), a simple, colourful drawing of a tree and a house (bottom left), scribbles in green, black, and yellow (bottom right), and two black and red stick figures standing under a yellow sun (top right).

And there's a block message ready to go!

Blending STEM Learning into Sending

In the young kids' designs, messages traveled along the connection between devices, and a lot of them described this using metaphors that sound a lot like how wireless transmission actually works. Like evaporation (digital file broken into smaller packets and put back together when it arrives) or a series of mirrors (moving a digital file from one network to another to get between devices).

I wanted to build these STEM metaphors into the design and add a chance for users to learn more about how our technology actually works. And this is where the blocks come in again: I can visualize how a digital message is transmitted by packets with each block representing a packet.

So to send a message, with however many parts, you drag your tower to your end of the connection. Then watch it travel block by block (packet by packet) to the other side.

  • Tablet wireframe with three buttons at the top showing icons of a crayon colouring in a notebook, a photo of a beach sunset, and a speech bubble with a speech wave inside. At the bottom are a pile of building blocks (one with a heart and one with a smiley), a line drawing of a waving kid, and a line drawing of a smiling older person with a wavy tunnel connecting the two people. Over the left side of the tunnel is a castle block tower with two drawings stuck on the front: an owl (top) and a simple, colourful drawing of a tree and a house (bottom). Some of the blocks are faded out of the block tower and are flying through the tunnel to appear at the other end.
  • Tablet wireframe with three buttons at the top showing icons of a crayon colouring in a notebook, a photo of a beach sunset, and a speech bubble with a speech wave inside. At the bottom are a pile of building blocks (one with a heart and one with a smiley), a line drawing of a waving kid, and a line drawing of a smiling older person with a wavy tunnel connecting the two people. Over the right side of the tunnel is a castle block tower with two drawings stuck on the front: an owl (top) and a simple, colourful drawing of a tree and a house (bottom). One block is fading into place to complete the tower.

On the other end, the user sees the block tower arriving block by block and then can see the different parts once every packet has arrived.

Time for Phatic Fun

The last piece was to add some fun little interactions for phatic gestures (like saying hi, how are you, I love you).

I designed two different ways to connect with those small gestures. First with the avatars. Tapping your own avatar cycles through a few different positions, and that is synced with the other side, so they can see you "moving" with your avatar.

The other phatic gesture uses the pile of loose blocks waiting to become a larger message. Some of these have a single emoji on them (like a heart and a smiley). Dragging one of these blocks to your end of the tunnel sends a heart block to the other user. This is a single piece of data (a single emoji) so it works with the packet metaphor too! There's no need to break down a single character to send it, so it sends as is.

And with that, I have a simple tool for family messaging for all ages and without literacy.