Lessons in Feedback: Toca House

The concept of feedback in product design has fascinated me for some time. At its minimum, it serves as a clear signal to the user that your experience is alive and thinking. At its pinnacle, it’s a vehicle for rich communication to your user, inspiring delight, trust, and stickiness. 

While designing for kids, feedback is a critical part of the experience. As in life, each action they take merits positive reinforcement that pushes them to continue learning and challenge themselves. Grander achievements, similarly, call for celebration and reward. Feedback in apps—whether visual, audible, or tactile—serves as that reinforcement in the digital realm, and it can have a tremendous impact on your experience for young users. 

Feedback is a wide topic, and there are many good examples of it in kids apps. I began my investigation with Toca House, one of my favorite app experiences in general. (Full disclosure: I am an adult who owns 10 Toca Boca apps!) 

Though framed as completing household chores, the games in Toca House are quite fun and addictive. To understand why, I recreated a matching game in which the user is asked to sort the house’s mail.   

A prototype that recreates a drag and drop interaction from Toca House. Made with Framer.

Lessons Learned

1. Emphasize Where Interaction Begins

As soon as the view loads, the first letter pulses, calling the user to action. This is a crucial first step, as it achieves two things:  

  1. It tells the Guest which items are interactive.
  2. It offers a starting point, and allows him or her to quickly comprehend the goal of the task at hand. 

2. Offer Neutral Feedback For Mistakes

True to its pillar of “free-play,” there are no mistakes in Toca apps. I can’t recall ever seeing negative feedback in a Toca experience, and Toca House is no exception. 

In our example, a user can try to drop a letter in the incorrect mailbox. Instead of displaying an error state, the letter simply returns to its starting point. Though a more subtle approach, making the user restart the task encourages him or her to try again. This road of repetition not only moves the user toward success, it may also teach a lesson in perserverance. 

3. Celebrate With Gusto

In his book, Creativity Inc., Pixar president Ed Catmull encourages his readers to be “generous with praise.” This principle is certainly exercised in Toca House, where the user is congratulated for both small and big successes. 

In our example, several events occur when a user drops a letter in the correct mailbox. First, the mailbox scales with a slight, jelly-like bounce as the letter passes over it. Then, when the letter is dropped, the mailbox rotates a full 360°.

While such a bold animation may not gel with an adult-focused app, it communicates two things to Toca’s younger users:

  1. It clearly tells the user they’ve completed the task correctly.
  2. It also ends the interaction on a satisfactory and high note of congratulations, compelling the user to repeat it over and over again. 

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: "Reigns" Card Interaction

Prototype URL: http://share.framerjs.com/zpz7bfeusghc/

One of my favorite games to arrive this year is REIGNS, an addictive choice-driven game from the folks at Devolver Digital.

The game places you in the throne of a kingdom's ruler. One by one, you hear a request from one of your subjects. You simply respond "YES" or "NO," to each ask and bear the consequences that follow. Go too far down the wrong path and your reign will come to a bitter end. 

A video of my "Reigns" prototype in action. 

As a player, the game's rich use of narrative and choice entice my frequent return to the kingdom. As a designer, I am enchanted by its interaction design, particularly the tactics used for the game's main mechanic: answering each request.

The designers chose to abstract the ceremony, depicting each subject as a card in a seemingly endless stack. You cast your decision by swiping the subject's card left (to say "no) or right (to say "yes). As you consider your options, the subject's eyes move toward your potential ruling, making you feel the genuine weight and pressure of a ruler. 

Rebuilding the interaction helped me understand its moving parts and how they all work together so effectively. One fascinating thing is the harmonious use of character and motion design, which humanizes the interaction while also directing the player's eye up towards the display of consequences. Doing so causes the player to slow down and contemplate the gravity of his or her decision. All together, this interaction brings to life the player's role as king or queen, and the experience feels both empowering and chillingly addictive. 

Try the prototype and see for yourself:  http://share.framerjs.com/zpz7bfeusghc/


CODE NOTES: 

Like many of my latest prototypes, this one was built using Framer JS

As seen above, the cornerstone of this prototype is dragging. This exercise pushed me to understand how I may use drag position and direction to specific events. I will certainly be using these learnings more in the future. 

If you're interested in learning more about using drag events in Framer, take a look at this article by Cemre Güngör.

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 02: Whise

I admire the open office concept for many reasons. The ability to see interact with colleagues in a "free-range" environment provides accessibility and sparks collaboration. When in my own open office, I often enjoy the soundtrack of conversations around me: lively, cheerful and humorous banter. This soundtrack is a constant reminder of the talented minds I I work with and the fact that they are deeply invested in what they do and one another. 

There are times when a design challenge requires complete focus, compelling me to fade out my surroundings. To do this, I summon my precious noise-cancelling headphones and drown the audible world in white noise. Finding a choice of good quality, long duration, and an appropriate vibe is frequently a challenge. The search through YouTube and all my subscribed music platforms breaks my connection with the task at hand. When I finally do settle on a track, it takes a bit more time to get back into the original "flow." 

The scenario described above inspired my next Framer JS project: an app concept called "Whise" (short for "White Noise"). The core functionality of "Whise" is to curate the best white noise options based on your preferences. The Framer prototype below demos the core interaction of "Whise," which is choosing and playing a noise track. I decided this task should be incredibly quick, allowing the user to swiftly return to their task. 

You may download the Framer JS prototype here.

Though this was mainly an exercise in learning Framer JS, I chose to put some thought and effort towards the UX and UI of the prototype (it's often hard not to!). I chose a layout of a 2x2 grid to offer few options that could be quickly identified, compared, and selected but the user. Though the audio tracks would hypothetically come from various Internet sources, I felt that fact should be hidden from the Guest. Harmoniously individual colors and descriptive hieroglyphic icons identify each track with a consistent look and feel. 

Sketching helped me narrow down the symbols I'd use in the prototype. 

Other visualizations of "Whise," which I originally dubbed "10 Hours of White Noise." Man, that's a lot of white noise....


CODE NOTES: 

This exercise built upon my practice of integrating JSON data into a Framer JS prototype. This time, I blended hard-coded data (stuff that I typed) and live data (urls from the Web) to create something a bit more dynamic. 

I also used this as an exercise to get better at using "for" loops to apply a single instance of properties and behaviors to multiple objects. After many iterations—and some help from the awesome Framer Facebook community—I was able to keep my code DRY! Each white noise track object is following the same interaction and UI template (with a few overrides such as symbol and identifying color). This is a technique I expect to use in countless future prototypes, particularly ones that echo games and other robust interaction patterns! 

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. 

'Early' Concept Maps

After taking a break to help launch DisneyLife, I was able to return to "Early," my endeavor to create a better alarm clock. 

Starting from the UX Ninja Exercise I conducted in October, I first created a concept map of the product. Doing so helped refine the product idea without distraction of the UI or interaction details. 

Version 1 Concept Map for "Early" 

Version 1 Concept Map for "Early" 

An additional round of refinement occurred when I layered the concept map with a lovely low-fi UI kit called TinyFrames. By lightly visualizing the UI system, I found myself asking tough questions regarding the validity of certain features and the app concept itself. Did users really need advanced settings for version one? Is the morning checklist idea too prescriptive? What conventions of an alarm clock must we keep? 

Version 1 WireMap for "Early"


I quickly realized I didn't know the answers to any of the questions I was asking. The app was quickly becoming art, an expression of my own viewpoint. Though moving forward would be fun,  I did not want to sacrifice my primary goal: to help people have good mornings and begin the day with their best foot forward. 

First and foremost, this is an app for other people. I just need to know more about them. To do this, I plan to create a survey. The goal: to learn more about the habits and lifestyle of people who have trouble getting out of bed in the morning. 

I look forward to posting the survey soon. I also am excited to write a post about my experience crafting a qualitative user survey. Wish me luck! 

DisneyLife has Launched!

I'm pleased to announce DisneyLife is now live in the UK. I look forward to adding more details about the project and my role within it soon. 

In the meantime, please check out the product website: https://disneylife.com/

DisneyLife Has Been Announced

After two years of work, my latest project has been announced to the world. In an interview with the Financial Times, Disney CEO Bob Iger described the product as "the future, in many respects." On par with HBO Now, DisneyLife is part of the creator-led movement to share content directly with our Guests. 

I look forward to sharing more details once we launch. In the meantime, enjoy the Financial Times's write-up of the product:  http://www.ft.com/cms/s/0/df3e6064-776e-11e5-933d-efcdc3c11c89.html#axzz3pX7Hqpth

Redesigning My Website

I took a user-centric approach to the rethink of my personal website.

I first envisioned the audience I want to impact most. Creating personas for each helped identify content that would serve their needs while viewing the site. For my needs, the primary personas to serve are recruiters and hiring managers.

I also included colleagues and students as a secondary persona. I often browse other UX designer's websites for inspiration and resources. I'd like to return the favor :) 

Once I had a list of needs, I took a first stab at a concept map: 

Both items require another iteration. I look forward to building out the personas and refining the concept map.

I'll also look at other designers' websites for inspiration. I'm particularly interested in uncovering effective tactics for presenting process.

Trying the UX Ninja Exercise

I recently read Molly Inglish's article on the Whiteboard Design Challenges done at Tradecraft. I perceived the 20-minute exercise as an effective means of fleshing out a product concept or a design solution quickly. 

I chose to test the technique out on Early, the alarm clock app I began to dream up a few months ago. Perhaps this exercise was a chance to resurrect and refresh the idea: 

 

A snapshot of the design exercise done in my sketchbook. Doing all of this work in 20 minutes removes any intimidation. I can now use this work as a base for breaking the remainder of the project into bite-sized action items. 

Annotating the sketches was an effective way to track thinking while maintaining brevity in the process. 

Surprisingly, the exercise propelled me to sketch out wireframes right off the bat: 

 

These wireframe sketches represent the general flow of the alarm app. It's not perfect, but it's certainly a start.  

My Square Cash UI Kit is Now Available

I am largely interested in developing product concepts and flows, such as the alarm clock app I wrote about in June. While I plan on continuing that project, I am also keen to develop my UI design skills.  

To achieve this, I've chosen to borrow a tactic I learned in art school: study "the masters." Seek out and dissect the best work out there. Learn how they use the fundamentals of interaction and visual design. Integrate their best practices and philosophies into future projects. 

The products of these studies will be a series of UI Kits built in Sketch. Each of these kits will be modeled after an app or website that I admire and will be made available for the wider community. 

First up is a UI Kit for Square, and you can download it here for free. 

Designing an Alarm App: Part 1

We are not ourselves when we wake up. Each time the alarm goes off, we become irrational creatures with one desire: to stay in bed as long as we can. Our noble goals for the day become secondary, and, without the right triggers, they are not enough to make us leap out of bed. Often enough, this "creature" blocks our path to self-betterment.
 
For the past month, I fought back. I read dozens of articles about rising early and applied suggested techniques to pull myself out of the covers. I also tried several apps for the iPhone. These included  ones that measured my sleep cycle, employed sound waves, and even forced me to do physical activity. After weeks of experimentation, I experienced mild success. Still, nothing I tried addressed the primary problem:  I couldn't remember why I was waking early in the first place. 

The most effective solution I found was one of the most rudimentary. After setting the alarm on the built-in iOS Clock app, I'd plaster my phone with sticky notes. These notes range in content. One may mention the first task of the day. Another may tell me of an event I can look forward to, or challenge me to remain standing for 30 seconds. These triggers jog my memory and help awake my true self. 

These notes are yesterday's helpful reminders for waking. 

My success with this technique inspired a project to remind others of their waking ambitions. I began to wonder: How can I help people battle their wicked morning "creatures," so they can do all the good things they plan to do?  And if they did those things, could the world be a better place? 

I think it could, but it'll take some elbow grease to find out. Here's the start of the journey: 

I performed an exercise to form initial questions and personas. I also documented the unique features of competing alarm clock apps. 

The exercise yielded three potential approaches to the problem. Due to its focus and level of achievability, I chose to pursue a concept that reminds users of their reasons for waking up. 

Once settled on the concept, I sketched out a user's flow of actions within the app. My first sketches used verbs only. I integrated visuals into later iterations.

I further refined the flow through paper prototypes. In these beginning stages, I find paper inspires a variety of different ideas and allows for delightful discoverability. I also appreciate the feeling of tangibly crafting the product from the start. 

Quickly testing a layout's ergonomics is another advantage of paper prototyping. These artifacts will prove useful as I move into the digital renderings of the product. 

Invision's Wonderful Solution for Form Labels

While recently working on a sign up form, I came across a common question concerning labels: should we display them within or outside of the text field?  

Through some research, I gathered an embrace of minimalism has compelled younger products to put labels within forms as placeholder text. This arguably keeps the eye focused and reduces visual clutter, but the label does disappear once the user interacts with the text field.

Most usability connoisseurs say this problematic, causing the user to easily lose context of the information they are inserting. If further interrupted by the distractions of everyday life, the user may even forget the task at hand.

Last week, I signed up for Invision, an online prototyping and collaboration tool for designers. Within minutes of using the product, I fell in love. There were many reasons for this, but perhaps a smaller detail was the most impactful: they had found an elegant solution for the form label problem. 

 

Labels appear within the text field upon first load, allowing Invision's designers to keep the sign up form condensed and focused. 

 

When the user clicks on the text field, the primary label disappears, creating room for the user's information. A secondary state of the label then slides in from the side to reinforce intent. 

 

Once the user has completed the task, the secondary label persists. This serves a courtesy reminder when the user reviews the provided information. 

You can see the solution in action on Invision's Sign Up page.

A Beginning

I've written this first post over a dozen times. Each time, nothing has been good enough. I always hit the save button and leave behind a draft, convinced better words will come later. 

The truth is, there are many ways to approach this milestone. I've deliberated, strategized and scribbled my heart out on countless paper scraps. But now, it's time to pick a path, write its words, and see how it all works out. 

To me, this decision emulates the core of the design process: weigh your options, choose a plan, execute it, and evaluate how its success. Oddly enough, that's also the way I've begun to view life. We can endlessly think and search for the "right" approach, but we really can only learn when only when we actually do something. 

The parallels between design and life have recently piqued my interest. The more I see them, the more I learn about each domain and my role within them. I've noticed the missing piece is a place to house and share these lessons--to tell the story of their discovery and how they each shall guide my journey to create things that help, delight and inspire humans. 

Now, let's hit the "Publish" button, shall we?