L.A.U.G.H. App Case Study

Teaching Kids Mindfulness in the Digital Age

Hours of screen time each day can leave kids feeling anxious and disconnected

The National Institute of Health’s Medline Plus reports that the average kid spends 3 hours per day watching television and 5-7 hours total on screens. Another study, like this one from the American Academy of Pediatrics, states that 7 hours per day is the average that kids spend on entertainment media including televisions, computers, phones and other electronic devices. All this screen time can leave kids feeling anxious and disconnected. As parents, we can try our best to limit screen time usage, but the reality is, technology is digital devices are increasingly becoming a part of daily life. To combat this trend, Catherine Mayer of The Catherine Mayer Foundation had a vision to create the L.A.U.G.H. App, nicknamed “The Un-App App®”. This iPad® app would combine the visual arts, music, movement and breathing exercises to create calming and positive energies for kids.

Re-aligning an Artist’s Vision

Nine months into design and development by another agency, it appeared that the output was not in alignment with Mayer’s vision, and that their capabilities were being tested. It became clear that she would need a new partner and Mayer turned to UpTop to pick up the pieces of the project.

Project Info

User Research, User Experience Design, Mobile App Development
“I approached UpTop because of their expertise in user-centered design and development, but also because of my prior working relationship with their UX Manager, Michael Woo,” said Mayer. “I knew that the synergy of this partnership would make communicating much easier and allow for more creative moments to happen.”
— Catherine Mayer, Founder
Besides delivering a fully functional app that aligned to her vision, there were two other important objectives that UpTop would need to address. The first was preparing the app for a series of clinical studies at the Seattle Children’s Research Institute that would ultimately result in the evidence supporting the app’s effectiveness. The qualitative and quantitative findings of these studies would be key in shaping the direction of the app. The other second objective was to develop a product strategy and roadmap for the app and all it’s possible future enhancements.

The Approach

Translating an Artist’s Ideas Into Tech

We kicked off this project by getting into Mayer’s headspace as best we could. It is our job to help clarify and articulate their vision of our clients. As a visual artist by trade whose work is not based in technology, Mayer knew exactly what she wanted to accomplish, and how it should look and feel, but translating these ideas into an app was challenging. 

Key Components

From our discovery process, we learned that the core of the app was comprised of the following components.
Guided Path - A large part of the app is for the user to follow a guided experience, led by Ambi Ant®, to achieve a mindfulness state that has been clinically proven.Double Click to Edit
Interactive Exercises - A fundamental goal of Mayer's is to enable individuals to express free-flowing creativity creating positive energies
Breathing Exercises - These exercises are core to most health apps and are tailored o the user and biometrically proven to calm the user
Multisensory Experience - Carefully orchestrated visuals, movement, music and sound is generated on each screen tuning into psychological triggers to help maintain that mindfulness state
“The app is unlike most apps and philosophically goes against many of the traditional UX design and marketing principles that we would use to encourage user engagement.”
— Michael Woo, UX Manager

Picking Up the Pieces and Pushing Forward

Once the projects assets were in our hands, we completed a thorough audit of the current existing app was completed to document all of its components including images, audio, video, code and script. Double Click to Edit
In parallel, we put together a screen interaction map with recommended changes for the two A/B variants that were in-flight. The goal for us was to optimize the flow of both test variants ahead of the clinical study.Double Click to Edit

Prototyping the App Experience

After receiving approval for these test variants from Mayer Catherine, we deliberated about wanted to figure out the best way to communicate these test variants to the Seattle Children’s Research Institute for their preliminary approval review before investing the time and resources into building out these experiences for the actual study. To achieve this, We decided to used Keynote to best simulate a multimedia experience, leveraging the existing media components from the original design with basic UI updates to get relay the general concept across. Unsurprisingly, Members of the institute were shocked by how realistic the prototype appeared was when they found out that discovered what they were looking at viewing wasn’t an app.

Course Work Required by UpTop

In preparation for the study, members of the UpTop team were required to complete a Human Subjects Training Course because of our participation in the clinical study process (preparing the test app and recorded observation of participants using the app).

Design Exploration of the Lead Character

While the study was underway to determine which variant was more successful, the design team continued to pressed forward exploreing UI direction and concepts of Ambi Ant®, who is a prevalent tour guide in the app. We believed that the original Ambi Ant character was a bit off the mark in terms of the specific target audience and that she was not easily scalable because she required 3D rendering. From a general UI standpoint, we had to think a lot about consider psychology of color, imagery, movement, sounds and how it these elements might affect the end user – a child. Making We wanted to make sure that design choices were carefully orchestrated to invoke a certain feeling or state of mind.

A mood board was created with a range of known ant character renderings to consider for the new Ambi. We included both 2D and 3D options and clearly stated the pros and cons for each, like 2D being easier to scale. An informed choice was made by the client per our recommendation to go down the 2D road. We sketched and explored different options for this 2D character, layering on the personality that Mayer had envisioned. We incorporated guerilla testing with kids to see how they responded to the new Ambi vs the old. Once enough information was gathered, we confidently moved forward with animation.

The Star of the Show is Animated

Once we honed in on an appropriate look for Ambi, we worked to communicate the necessary profiles and expressions to our animator so he could begin building the keyframes for her movement.

Validating Our Hypothesis

During the study, the initial test was conducted as formative research measuring the effects on physiological markers of relaxation and concentration between two test versions variants. A breathing exercise was not included in Version A, while it was included in Version B, did not include the breathing exercise to start, which was a to test to see if this whether this exercise would statistically have an impact on the app. Version B included the breathing exercise. The results were almost the same statistically for both versions, but it was determined that relaxation may be at its greatest during the breathing section, which aligned to our original hypothesis that this exercise was critical to achieving that a mindfulness state.

Armed with this new insight the options narrowed, we began storyboarding the specific animation sequences appearing throughout the app as we we entered going into the second phase of the study. We made the necessary adjustments, replacing all the old material that was re-used during initial testing.

The Main Event

Applying the Finishing Touches

By this time, the team had pulled together a working app of the ideal experience for final testing with participants. We decided to use the RITE (Rapid Iterative Testing and Evaluation) testing method which means we required us to integrated incorporate any obvious findings as quickly as we could to be incorporated within into the next round of participants.

Internally, we took to prototyping within InVision to more rapidly validate our designs before pushing out a new build. Double Click to Edit

Future Thinking

At the conclusion of this project, we challenged our team to brainstorm As part of thinking about the future possibilities for this app. The entire design team, including members not working on this project, conjugated for an hour to brainstorm “How Might We…” questions. The ideas were grouped using affinity diagramming and presented back to the client Catherine. The best ideas were then prioritized by impact vs effort, added into the roadmap and broken into phases. Specific technology ideas that came out of the brainstorm session were filed as potential patents for the app. 
Video play speed increased to 400%


The L.A.U.G.H. App for iPad was released to the Apple App Store in March of 2017. UpTop is working on supporting the PR blitz surrounding this event – See the coverage. We are also working with The Catherine Mayer Foundation on additional post launch testing opportunities with Kindering, a Seattle Public Schools Montessori classroom and the University of Washington Research Program to gather additional insights for future iteration.

Additionally, a version of the L.A.U.G.H. App for Adults is underway for the iPad. Although the target audience is different, the fundamental goal is the same. Tune back in Stay tuned for more!