• Recent Tweets

    Could not authenticate you.

The 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 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, but 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

client
Catherine Meyer
services
User Research, UX Design, Mobile App Development
type
iOS
“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 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.
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 to 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 existing app to document all of its components including images, audio, video, code and script. 
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.

Prototyping the App Experience

After receiving approval for these test variants from Mayer, we contemplated how best to communicate these to the Seattle Children’s Research Institute for their preliminary review. How could we simulate the app without investing the time and resources in coding anything further? To achieve this, we used Keynote which was best suited for multimedia. Unsurprisingly, members of the institute were shocked by how realistic the prototype appeared when they found out that what they were looking at 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 press forward exploring 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 consider psychology of color, imagery, movement, sounds and how these elements might affect the end user – a child. 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 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. A breathing exercise was not included in Version A. Version B included the breathing exercise which was a test to see if it would statistically have an impact on the app. 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 a mindfulness state. Entering the second phase of the study, we began storyboarding the specific animation sequences throughout the app, making the necessary adjustments, and replacing all the old material that was 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 R.I.T.E. (Rapid Iterative Testing and Evaluation) testing method which means we iterated on any obvious findings as quickly as we could to be incorporated within the next round of participant testing. Internally, we took to prototyping within InVision to more rapidly validate our designs before pushing out a new build. 

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%

Release

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!
Close
Close
Scroll to the bottom to agree