UI design

User interface design

“StoryPix” – a digital storytelling card game

StoryPix app - Interpret path - order images
| Matt McGowan

Created for:

  • Digital Media Design for Learning (DMDL) degree; Cognitive Science and Educational Technology II course (Fall 2013).

Project length:

  • Medium-long (approx. last quarter of the term, final group project design document).

Team:

  • Robyn Berland
  • Heather Kim
  • Matt McGowan
    • my principle contributions: “Summary of Project,” “Points of Viewing Theory,” and “Wireframes.”
  • Cooper Wright

Challenge:

  • As a group, produce a full, thorough design document on a project of mutual interest.

The full design document for this project can be found here:

“StoryPix” design document (pdf)

But here’s an excerpt from the “Summary of Project”:

StoryPix is a platform-agnostic, digital card game designed for middle-school-age children and older. It is an image-based storytelling environment that both visualizes and verbalizes the multitude of ways that people interpret the world. Like other social media platforms, StoryPix users will share images with the intention of telling their “story.” Unlike other social media platforms, StoryPix users will be encouraged to present their images in a more deliberately sequential manner, to present them more like a story, and to create an interpretation of the visual stories of others.

The learning objective of the game is to encourage players to think about their own and others’ thinking. Players will create a story constructed from a series of “cards” or “frames,” static images being either self-created or found (photos or drawings). These images are then sequenced to tell a story (as do, for example, comic strips and photo essays). Players then add a title (of no more than three words) and a descriptive, narrative text (of no more than 200 characters) to accompany their picture sequence. Once a story is completed, the player “publishes” the story and shares it with another player. The recipient of the story, however, only sees the story’s title (not the original narrative text) and a “stack” of images/cards/frames that have been “shuffled” and placed in a random order. The recipient player must then guess the originating player’s story in the original order of the cards and send their guess back to the originating player, along with their own (under 200-character) narrative text. Recipient players are allowed three tries to “get it right.” Players also have the option of sharing one story with multiple recipients, allowing the creator of the visual story to view the multiple ways in which their story is being interpreted. Finally, the player has the option to publish their story, giving other friends or the community a chance to interpret the story as well.

and a few of of the wireframes we included:

Narrative and wearables – the Digital Creator Jumpsuit

| Matt McGowan

Created for:

Project length:

  • Short (one week, design document).

Team:

  • Heather Kim
  • Matt McGowan
    • my principle contributions: “Research prototype description,” “Illustrative example” and “Storyboards”
  • Cooper Wright

Challenge:

  • The class was asked: “How can you enable kids to experience an artistic or scientific concept on a visceral or kinesthetic level?”

Our answer to this question was the Digital Creator Jumpsuit. Below are a couple of storyboard sketches and an illustrative example I wrote for the

Digital Creator Jumpsuit group design document (pdf):

Illustrative example

Anna, a 4th-grader, has decided to create, along with two of her friends, a short–digital–movie about a mouse who learns how to dance by watching the human family whose house he lives in. Anna is responsible both for the film’s set and for the background sound and music to be played during several of the short’s scenes.

Working on the sets first, Anna orients her jumpsuit to “painter mode” and calls up–on the sleeve of her non-dominant arm (in Anna’s case, her right)–the palate of colors that she and her friends agreed upon for the mouse’s hole-in-the-wall home. Anna decides she wants to use her left arm to paint with blue, so she taps that color on her palate and swipes up her arm, watching the color flow up her right arm, across her chest and down her left arm–“filling up” the entire left sleeve of the jumpsuit with that color. For her right arm, Anna needs yellow, so she taps on that color and swipes down, filling up her right sleeve. Done with color selection for the time being, Anna triple-taps the palate to close it. Now she’s ready to paint!

Suddenly remembering one of her art classes from last week, in which she and her classmates learned about Vincent van Gogh’s The Starry Night, Anna decides to go with a “giant swirly” pattern for the mouse’s living room wall. Facing the wallscreen and touching her hands to her shoulders (which signals to the screen that she’s about to paint with her arms), Anna walks from the left of the screen to the right in long, loping strides–swirling, twisting and waving her arms as she does, seeing her multi-colored movements registered on the giant digital canvas in front of her.

Once she reaches the right side of the screen, Anna surveys her work and thinks that the pattern she’s made looks like “some crazy waves.” “So maybe,” she muses, “the house the mouse lives in is by the ocean, and he can hear it from his home in the wall!”

Wanting to play around with the idea before she forgets about it, Anna puts up the hood of her jumpsuit, which is her setting to automatically switch to the suit’s “sound and music” mode. Next she triple-taps her right arm to call up her music and sound effects board to search first for “waves on the beach” and then for “pebbles on the beach”–two of her favorite ocean sounds. Anna then tasks (by selecting and swiping different sound/music icons) “waves on the beach” to both of her arms and “pebbles on the beach” (which she thinks will go well with the star-dots she’s planning on painting in and around the swirly pattern she’s already created) to both of her legs/feet, as she wants to be able to mix the two sounds in real time. She’ll make the wave sounds rise and fall with the movement of her arms and make the pebble sounds by running in place with “quick little baby steps,” listening to the mix through the surround-sound array embedded in her jumpsuit’s hood.

As she’s planning all this out in her head, Anna realizes that she’s probably going to look pretty ridiculous doing it; but she doesn’t really care–that’s why the museum gave each of the students in this program their own “studio.” And, anyway, she knows her friends wouldn’t laugh. Actually, she can’t wait to finish this sound piece (and maybe the star-dots, too) so she can call up a chat window and have her two co-creators come down the hall to see what she’s got so far. Their movie is going to be so awesome–she just knows it!

Interface critique – the Vtech Rhyme & Discover Book

VTech Rhyme & Discover Book cover
| Matt McGowan

Created for:

  • Digital Media Design for Learning (DMDL) degree; Interaction Design for Learning course (Fall 2013).

Project length:

  • Short (one week, design document).

Team:

  • Matt McGowan (solo project/assignment).

This toy describes itself as an “interactive baby book,” and is meant for kids from 6 months to 3 years (though my daughter lost any real interest after age 2). In general, it’s got some interesting features, but I ended up hiding it away from my kids because, ultimately, I think, it fails in its professed purpose as a “book.”

The good

Affordances – decent

  • Its sturdy but flexible-enough construction allows for easy, natural, even slightly enjoyable page-turning.
  • The animal buttons on the sides of the pages are very easy to discover and use. They invite attention more than well enough and are solidly pushable. The “sliding” buttons on the interior pages also provide relatively easy discovery and use.
  • It succeeds in looking and feeling both like a book and like a toy.

Function and feedback – highly effective (unfortunately…)

  • Auditory and visual feedback are both highly responsive and engaging.

The bad

Mapping – the toy’s true undoing

  • The main culprits are the animal buttons on the sides of each page–which are, in short, a feature that serve as such a terrible distraction that it made me conclude that the toy is actually bad for kids. There is very little rhyme or reason to exactly what these buttons will do in any given situation–either say something about the animal or start the singing of a song on one of the facing pages (but which one?). These smiling animal faces flash during any and all actions and are simply too big to ignore. Given their size, it can even be difficult (for adults, let alone children) to turn the pages without grabbing/pressing them.

Function and feedback–conspiring to distract

  • The on-page slider buttons and the center (“binding”) musical note button also serve as distractions and are far from obvious as to their function. The pressing of any button anywhere on the device stops the current action (such as the singing of a song, which is meant to be done in conjunction with the words on the page) and begins a new one. “Reading” this book with my kids, I think I was able to get through just one song in its entirety about ten percent of the time.