Animated Fields of Color


In researching the connection between animation and breath awareness, I have been contemplating what how visual space can facilitate the experience of mindfulness. Ambient visuals, landscapes, calming lighting, sacred geometry and slow motion movements have all inspired my direction. I recently discovered the film Colorfield Variations which includes audio / visual content in what the artist calls “chromatic abstraction.”

UXD: Week 7

It is hard to believe it is already the final week. Reflecting back on the last seven weeks I have learned so much about UX including all of the various facets that fall under this umbrella term. Some of the ideas I will take with me include the Jesse James Garrett elements of UX model; UX vs. UI; habituation; the concept of minimizing friction in UX; workflow; and endless resources. While I am familiar with many of the ideas surrounding color theory, I enjoyed watching the videos on the children’s illustrator and RISD professor, Mary Jane Begin. After watching the videos, I ended up reviewing her online portfolio and felt inspired by all of her incredible work—both teaching and creating art. Similar to me, she also works teaches art to children (I have an MA in art education and teach art during the summers). I am excited by all of the incredible designers/researchers/teachers I have found over this last semester and am now following through social media.

screen-shot-2016-10-15-at-7-27-41-pmAs I mentioned in my previous post, I have accepted an adjunct position to teach two sections of Interactive Design at Edinboro University in the Spring. This past week I looked through the Safari online catalog of ebooks through KSU to locate strong sources for web design. I was blown away by all of the books on UX that we have access to! While I looked through about a dozen books, one of the books that really stood out to me was The Best Interface is No Interface, by Golden Krishna. One of the ideas presented in the book was one that I also felt—that there are far too many apps out there. When I first decided to embark on the idea of a mindfulness-based breathing application, many mentioned creating an app. However, I did not want to design another app that would require people to be disrupted and have something else to do. Personally speaking, I have many apps on my phone that I never use. It is imperative that I meet people where they are. After this last week, I have realized that I do not want to use reminders as a means to help people breathe. I do not want this to be another distraction, but rather an intentional tool. Rather that using notifications, I want to create a tool that people can choose in the moment to quickly use. However, rather than pulling out another tool, it needs to have a presence on the screen so the user does not forget it is there. I am getting closer….pressing onward!


UXD: Week 6

The content of this week centered around typography—which is a great love of mine. I used the type system assignment as an opportunity to seek out a new typeface that I hope to use in future projects, potentially my portfolio website. Electra paired with Gotham is one of my favorite combinations I have come across in some time. I probably spent way too much on the third page of the assignment, but the typeface inspired me, and I let myself have fun with it. The italic serif makes me weak in the knees. Despite my familiarity with the content of this week, I never stop learning and appreciate the fresh perspectives on a familiar topic. I also enjoyed the group discussion on sharing favorite typefaces—though it was challenging to pick just one!

One of my favorite aspects of this course is the weekly UX pins. It pulls in so many resources and content to add to my toolbox. As of this week, there is a chance I may be teaching an interactive course this upcoming Spring and I plan to go back and sift through all of the resources to supplement my course. I will surely be drawing on these resources for some time to come for courses, projects, and raw inspiration.

Regarding my thesis, this week also brought a turn of events that is leaving me spinning my wheels. Apple developed a breathing tool on their watch that is nearly identical to my vision. I have been very inspired by sacred geometry for the form, and their form is incredibly similar. I am unsure what this means for my project. I may go this route, but I have to switch gears enough so it does not appear as a copy. This was a very frustrating development, but one I must push through.

Image result for apple breathing app

UXD: Week 5

As a visual designer, I have always loved composition and layout. Originally, I thought I wanted to work in magazine design because I loved this area so much. Alas, life had a different plan, and I love the world of design in higher education. Though many of the concepts this week were review, there is always more to learn, and I love reading through the comments and seeing the examples/perspectives of the other students. I haven’t worked in web design for many years, and things are changing so fast—the process, mindset, and tools. The Pinterest Board has become something I look forward to each week as I find so many great resources and always learn something new.

This week another student posted an article, How to Integrate Motion Design in the UX Workflow. My thesis research integrates a motion component and I am also taking a motion course through VCD at KSU. It is nice to make connections between all of the different areas you are working in. I appreciated the “key functions of animation” list in this article and found these functions to correspond with the animation component of my thesis. Why am I using animation to assist breathing?:

  • to direct the user’s attention
  • to guide them on when to breathe in and breathe out (breath-syncing)
  • create visceral aesthetics and appeal that encourage usage and increase adoption
  • provide a deeper level of clarity in regards to focused breathing

While I am not at the user testing stage of my research yet, it will be nice to review the feedback I get and refer back to this article.

Regarding the tools I will use to prototype, I began by working in Tumult Hype. This article references multiple other tools that could come in handy. Now that I am learning After Effects this might be an option. Since I am leaning toward a desktop application, I am unsure the best way to user test outside of the browser window (or if this is possible). While I have some coding experience, the prototype will more than likely be produced using an application over using code.

One thing I am now aware of is that all animation in UX must be functional. When taking over a user’s screen, this experience can be disorienting as to what is happening. If all of a user’s content disappears, they may momentarily freak out. Having a directional animation expand outward orients the user as to what is happening. Visual feedback is also important and an area I still have to give more consideration to so the user feels connected to the exercise. Continuing onward…

UXD: Week 4

This week, I was most inspired by the content in (ch. 14) Designing with the Mind in Mind that talks about user’s perception of time and responsiveness. The more an application can be responsive to the user, the better their experience will be. Users want to feel like they have control and what they are doing is having an effect. Users do not want to feel like their time is being wasted, that they are being interrupted, or that they are being delayed from being productive (i.e., waiting in line at a grocery store). As a significant component of my breathing application is (1) reminding the user to breathe and (2) giving them to option to open a breathing exercise, I have been questioning the best ways to execute these functions. Last week I focused on the reminder functionality, while this week I have been contemplating the breathing exercise component.

Taking over a user’s screen can be extremely frustrating (per my last post) if not done correctly. Per this week’s reading, if any application takes over an entire screen, it must be something the user chooses and can be aborted at any moment without any loss or changes to their previous screen-based workspace. Regarding responsive feedback, the current ideas I have include (1) showing a progress indicator (2) users tracking their number of breaths by keyboard strokes (3) the ability to slow down or speed up the animation. For the progress indicators, a helpful tip from the reading is to show the time remaining over the work completed. Rather than using a numerical timer, I am considering making this indicator visual. When I was user testing the Breathe browser extension, I noticed that it had a numerical countdown and my brain immediately began to cognitively quantify the experience rather than focus on the sensory experience of breathing. Using a visual may be easier and produce less cognitive strain. The keyboard tracking is still something I need to think through more but would create metrics that could provide the user with more feedback. The breathing exercise will revolve around a smooth, calming animation. It was interesting that the reading mentioned that all “jerky” animations should be avoided. Changing the visual, timing, breathing speed, colors, and music are all functionality I plan to include to make the application more—as Don Norman states—flexible over fixed.

Don Norman also mentioned using technology to “make visible what is invisible” and I think that is a lot of what I endeavor to do. Breathing is an automatic function (of the old brain) and is practically invisible to us. By following a visual, the process moves to the more conscious “second brain” and allows conscious awareness over subconscious processes. While I am unsure my research will go in depth into the “two minds”, it was interesting to read about to broaden my perspective in this area.


UXD: Week 3

Reflecting back on readings, as well as our Pinterest discussion and assignment, I have been thinking a lot about what it means to meet users where they are. After testing the “Breathe” browser extension over the last week, I have been frustrated by its functionality. The breathing exercise takes over your entire screen for an entire minute without warning. Despite being interested in this topic, I have found it annoying and inconvenient. Usually, I am writing an email and I am forced to wait an entire minute before I can return to my task. There is no way to close the exercise—unless I close the window. Doing that would mean I would love all of my work. I am forced to wait. Don Norman talks about not “impeding the user” through constraints, this one acting as a physical constraint. The design of a breathing tool needs to cause less stress rather than more. Taking over a user’s screen without their control is a negative in terms of user experience. Is there a way to remind users to breathe without stressing them out? How can I remind people without interrupting them? Do all notifications cause stress? What is the best way for users to interact with the notification to launch the breathing exercise? Will a user ever be comfortable with an application/extension taking over their screen? I seem to have more questions than answers at this point in my research.

Designing with the Mind in Mind (ch.8) mentions using external aids to keep track of what we are doing. These tools can be helpful because our attention is limited. There is a need for reminders when our attention is spread across too many tasks. The book also points out that users prefer familiar, faster, easier paths. For a user to user a breath awareness tool, it must make their life easier in the process. It might not be enough for promises of a future state of well-being after extended practice.

The question that came up recently was does this tool need to live on a screen, if the goal is to help users that work on screens for long periods of time? Another student posted a pin of the Moodstone by AQ design agency. This tool mimics a smooth stone and focuses on haptic sensory experiences to monitor a user’s emotions. What I like about this tool is your mind can feel unimpeded while your hand can calming rub a tool. Keeping this nearby can serve as a reminder without being forceful. It can create relief, rather than interruption, for the user. My only hesitation with designing an external tool is that I did not want users to have to purchase a tool. I wanted to make it easy to download and install—similar to a browser extension.

UXD: Week 2

While reading Don Norman’s Design of Everyday Things, I was particularly interested in the section where he spoke about Reminders. I am particularly interested in this topic because this is one I am exploring in my thesis research. I am researching a breathing application that will remind users to breathe; however, the goal is to minimize stress and notifications can be inherently stressful. I have been pondering how to remind people without increasing their stress. Norman mentions that there are two parts to a reminder—the signal and the message. Originally, I was envisioning a notification that softly drifted in from the side of ones screen (signal) that would include the text “remember to breathe” (message), though depending on my user testing, this could change considerably. My design research question has evolved to “what is the best way to help long-term screen users [designers, developers, information workers] to breathe”? How can I help them breathe without increasing their stress-levels in the process? Will this tool be a desktop application, a browser extension, or something I haven’t even considered yet? I want to meet users where they are, rather than require an additional, external tool.

This week, through another student’s positive/negative UX design assignment, I was introduced to the browser extension, Momentum. Once installed, every time a user switches tabs, users are greeted by a beautiful landscape, the time, a positive quote, and a reminder of their daily intention. I immediately recognized the mindful design principles inherent in this design. After installing the extension, I searched through the list of extensions to see if anyone created any breathing tools. I found two—Breathe and Breath. The first opens a breathing exercise in the tab (similar to what I wanted to do), with the ability for users to change the frequency and length of breathing exercise. There is not a visual, but rather text-based instructions. When the exercise opens over the content, there is no way to turn it off. I found this frustrating because it would automatically launch right when I was doing something important. The only way to close the exercise is to switch tabs and reopen the website you were working on. The second extension opened a breathing exercise opened up a small box over the browser window. It also include a visual but user preferences are limited. There is much to consider in regards to how this tool will work, but determining what users want + need is the foundation of my design research.


UXD: Week 1

I am taking an online course, UX: Principles and Concepts, and each week we are required to reflect on what we are learning. The content of this course is relevant to the direction of my thesis on mindful design, as well as a project I am collaborating on with other grad students. My thesis research is rooted in mindful design—merging mindfulness (through breath awareness) with user experience design for individuals that work on screens for long periods of time. I look forward to connecting the coursework with my thesis research. In terms of a user’s experience, I am looking at how design influences a user’s well-being and quality of awareness. Originally, I thought about creating a web-based desktop tool that facilitates mindfulness through breath awareness using the functionality of calm notifications and an immersive visual + auditory breathing experience. I am also exploring the notion of wearables or design that transcends a singular device. I am hopeful my weekly reflections can help shed light on the connections I am making.

In the TED Talk by Tony Fadell, “The First Secret of Design is…Noticing,” he talks about how “it is seeing the invisible problem, not just seeing the obvious problem.” However, he also adds that if we had to notice details all of the time, it would be exhausting. This perspective makes me wonder how to increase individual awareness without slowing them down or making them too aware of the tool they are using. It is about shifting their attention inward, rather than outward.

Through my reading and UX Pinterest research this week, I have come across a few ideas that may apply to my research:

Remember to Breathe

The summer started off with a bang as I made significant progress on the direction my thesis will take in Critical Making. Needless to say, I took on far too much this summer and was left not having any time to work on my thesis. The last couple weeks I have been disconnected from everything desperately needing to recharge my being. Rested and ready to move forward, I can feel the urgent tug of my thesis reminding me it is time to get to work. When you step away from something for a period of time it can be anxiety-provoking to begin again. Yet, begin I must. Due to the significant workload I have taken on, I have decided to push my thesis defense date to Spring 2017. While the date is not set, I am leaning toward late March or April next year. Today, I plan to reassess and redefine my logic model. When there is much to do, breaking everything up into manageable chunks is imperative. Once my logic model is complete I will post it here: Logic Model: V2

Despite the fear of falling behind, I feel confident in the direction my thesis is moving in. In Critical Making, I made leaps and bounds exploring different directions Mindful Design can take and the route I could pursue for my research. Here, I would like to reiterate and define my focus.

Thesis Statement—Mindful Design: An investigation into how mindfulness-based digital media facilitates mindful user experiences through a designer’s decisions.

XYZ—Investigating mindfulness through breath awareness through designing a web-based tool to facilitate mindfulness using design and to better understand mindful digital experiences.

Aha Moment—After asking the question, what is the connection between design and mindfulness, I discovered the missing link—the breath. When people are aware of their breathing, they are mindful. By designing a tool that focuses the user on their own breath, a user’s mindfulness may increase as a result. 

Looking at the concepts of “screen overload” and “screen apnea,” there is an opportunity for designers to look at how design affects a human’s quality of attention. Since 2000, the human attention span has dropped from 12 to 8 seconds. In 2015, the average American spent 9.9 hours using screen-based technologies with 5.2 hours on mobile/desktop/laptop devices (Meeker, 2015). Screen apnea is a term coined by Linda Stone, technology consultant. 80% of people experience shallow breathing or breath holding while doing email, or while working or playing in front of a screen. This creates increased stress levels, impacts emotional well-being and attitude, and affects productivity (Stone).

Goal—We live in a fast-paced, busy culture, and users are not getting off the screens any time soon. My goal is to meet users where they are (on screens) and help users in the midst of multi-tasking.

How—A breath awareness design tool: After brainstorming potential directions to take, I felt pulled to explore the creation of a desktop application that will help to facilitate breath awareness (mindful moments). How it works: (1) This application will use subtle, non-intrusive notifications to remind the user to breathe. (2) If they choose to further engage, they can click on the notification to launch a breathing exercise. (3) By focusing on an animated visual, users can become aware of their breath in the moment. The design of the visual is inspired by fractals, slow-motion imagery, and sacred geometry. The application itself will be customizable to meet user preferences including visuals, breathing speed, colors, sounds (breathing, music), text prompts vs. audio guidance.

Moving Forward

  • Continue research & writing
  • Develop notifications: is this the best method for soft interaction?
  • Integrate breath counting (used as a metric to assess mindfulness)
  • Develop more visuals
  • Sound: record voice-over guidance
  • Anonymous surveys: assess how tool affects mindfulness

One day at a time. Pressing forward…


Meeker, M. (2015, May 27); Microsoft Canada, 2015
Stone, Linda. “Diagnosis: Email Apnea?” OReilly Radar. N.p., n.d. Web. June 2016.

Case Study: Infomagical

Infomagical: A series of experiments designed to help you find focus and discover the magic of clear thinking.

  • 60 percent said they feel like the amount of effort they must exert to stay up-to-date on a daily basis is “taxing.” Another 15 percent said it’s downright “impossible.”
  • 4 out of 5 said information overload affects their ability to learn.
  • 1 out of 3 said information overload was affecting their close relationships.