prototype

Lessons in Kids Navigation: PBSKids Video App

Through my work at Disney, I often design with kids in mind. Yes, it is as fun as you would imagine. It is also no easy feat.

Lately, I’ve aimed to deepen my knowledge and strengthen my eye for noteworthy kids experiences, whether digital or otherwise. Since I mainly design for mobile apps, I began with one of best ones I could think of: PBS Kids Video

By recreating the visual and UX design of the app, I hoped to gain deeper insights into the intentions behind its successful architecture and navigation. I also created a prototype of its key transitions and interactions to get a sense of how motion and feedback contributes to its high usability for a range of young users. 

I recreated the key transitions used by PBS Kids Video to analyze and learn from its design. Made with Framer (https://framer.com/).

 

Lessons Learned

1. Use Visual Cues to Encourage Interaction

As the experience transitions from its initial splash screen to the video player, you may catch the vertical characters slider on the right sliding up automatically. A possible intention is to emphasize a breadth of content as well as cue younger Guests to interact with the slider.

2. Scale Across Age Groups

This app is a great example of an experience that caters to different age groups. The first view, for example, is straightforward and incredibly simple: you watch, pause, go to the next or previous video in your playlist. You may also switch “channels” that are represented by familiar characters on the right hand-side. This is perfect for the 3-5 age group, and allows them to navigate independently without getting too overwhelmed. It also is a largely tappable interface, which caters to younger kids' lack of dexterity.

Advanced gestures are reserved for sections of the app aimed at an older crowd. By dragging the character drawer to the right, an older Guest can select a specific video from the chosen playlist. This interaction can be intuitive for the more selective 4-6 age group. It's also a quick way for parents to curate their kids content experience.  

The "Grownups" section can be accessed similarly, by swiping up on its tab at the bottom left of the screen. Though this area of the screen is very accessible to any age group, only much older Guests are ergonomically able to complete the "swipe up" gesture that close to the screen's edge. (I also appreciate its placement to the far left, where it will not interfere with accessing the iOS control panel.)

3. Visually Distinguish Sections of Navigation

Through my work with Disney Junior and DisneyLife, I've seen many kids struggle with way finding.  To address this common challenge, PBS Kids Video utilizes color to clearly communicate transitions in navigation. Warmer, brighter colors, for example, are used in the kids' experience, whereas cooler, muted hues distinguish the grownups experience. 

Using "drawers" as a paradigm also makes each view distinct. When dragged in, the view's contents layer over the previous view, like pieces of colored paper. This makes it clear that the views are separate from one another, and helps the user comprehend where they are at all times. 

Prototyping Exercise: TinyCards Card Flip

For some time,  I've wanted to learn more about using 3D animation with interaction paradigms. Through my paper-crafting hobby, I've come to understand tangible, 3D space rather well. Simulating it in digital space with code, however, felt tougher to grasp. 

My infatuation with TinyCards, the new app by the creators of Duolingo, finally inspired me to give 3D animation a try in Framer. I began by recreating their card flip interaction, which is performed as a user attempts to refresh his or her memory of a subject. 

Click here to try the prototype. 


CODE NOTE:

To complete this prototype, I chiefly utilized the "Flip Card Module" created by Jacky Lee. To understand the concepts behind Jacky's work, I examined similar projects by members of the Framer Facebook Community

Learning Framer 03: Joel on Demand

After three short months, I can safely say I love Framer JS. Its powerful front-end capabilities have reignited my curiosity about animation and motion design, two skills I look forward to augmenting as I continue using this wonderful tool. I also appreciate Framer's ability to make me feel like a builder. When I make something with Framer, I feel as I do when I craft paper or build models. I feel the rush of discovery and wonder as I bring something to life. I feel the push to make it better with each iteration. And I feel the connection to others when they see and interact with my work. 

Building with Framer, a code-based tool, has unexpectedly revived my efforts to strengthen my programming skills. I want my prototypes to be even more functional than they have been. This can help with communicating my vision to others, accommodating various use cases, and robustly testing with real users. With all this in mind, I took a small step to add more complexity to a Framer prototype. In this this quick prototype, I aimed to (a) read text inputs and (b) complete specific actions based on the text written.

As the backdrop to this experiment, I chose to put my love of Billy Joel on display. The concept is called "Joel on Demand," an imagined app that allows a user to search for and play any Billy Joel song his or her heart desires. 

You can try (and download) the interactive Framer prototype here


CODE NOTE:  Gratefully, this exercise forced me to dive deeper into CoffeeScript, the language on which FramerJS is based. I also used Modules, an advanced feature, for the first time. These allowed me to integrate open-source code directly into my prototype, freeing me to focus on marrying the functionality to the user goals and interaction design I imagined. 

The Module used for this prototype is called "Input-Framer" by Adria Jimenez. 

Learning Framer 01: AlphaBits

Over Christmas break, I began learning Framer to build up my prototyping skills. From day one, I must admit, I was hooked. The ability to realistically simulate interaction ideas in a concrete and compelling way is liberating. Already, I can feel my confidence growing. 

Learning Framer has also allowed me to strengthen my beginner-level coding skills. Once I got through the basics, I began to dive into the juicer stuff. I revisited old friends like Fraulein For-loop and Constable Conditional, and I met new acquaintances such as Event Listener, Esquire and Señor Random(). With these tools in tow, I realized I could make things beyond interactive animations.

The first of these projects is a digital toy called, AlphaBoxes. I created it for my 18-month-old goddaughter, Olive. Currently, her two favorite things to do are reciting her ABCs and swiping on her mom’s iPhone. This is a productive way for her to do both. 

A video of the prototype in action. 

Once I had the prototype in working order, I sent it to my aunt, Olive’s grandmother. Together, they tried out the toy and recited their letters. Even Olive’s cousins, all under the age of 4 at the time, joined in. Knowing it was engaging to my favorite kids was exciting, and it inspires me to create more playful experiences for them to enjoy. 

Click here to view and download the prototype

 

A quick sketch to capture thoughts on how the prototype should function.  

A quick sketch to capture thoughts on how the prototype should function.  


CODE NOTE: 
For this prototype, I learned how to create and parse a JSON file. I’ve become familiar with JSON through my professional work, but this is the first time I’ve practically applied it to code. Seeing its power first-hand has augmented my appreciation for the folks on my team who wrangle JSON on a daily basis. I’m also excited to apply it to another project in an even more compelling way.