From paper tO prOtotype: MEDITATE NOW! Exercise

Here because of a class assignment? See numbered sections below for the content you are meant to review.
About this page

This is a presentation for a UX class, showcasing the steps to take a design from paper to a digital interactive prototype deployed for design critique and review. The task I was given at the outset was to develop an app that was specific to meditation, with the idea that the app would help the user locate the appropriate meditation easily on any size screen (even watches). The website itself is not online, ultimately, as this was a class exercise.

To my classmates who are tasked with reviewing this page, welcome! I appreciate the feedback. Feel free to collapse this paragraph of text, as the materials to review are listed below this line:


1: ROLE

As this is a class assignment, my role was as a sole producer throughout the design process described below. Accordingly, there are aspects of this process that I find myself already well-suited for, as well as aspects where I found myself wishing I had additional team members there to assist in development.

2: GOAL

The purpose of this exercise was to design toward a specific end goal, that of allowing users to determine what path of intention would be best for their meditation, and to organize meditations in a way that is culturally appropriate for those who use meditation as an intention-setting tool.

3: END USER PERSONAS

The users I designed this for were very specific personas, developed from multiple conversations with a dozen individuals over the years who use meditations and pathworkings. Here is a look at the initial research documents I developed for these user studies.

Carousel imageCarousel imageCarousel imageCarousel image

4: Key Constraints

During user testing and research I uncovered some constraints and pain points. One tester asked that the ability to trigger a meditation be present front and center, so that upon waking they would only need to click once or twice to start a meditation on their earbuds. The other asked that there be meditations that mapped to the various intentions or pathworkings that they'd regularly want to utilize.

5: RESEARCH

Once a lo-fi prototype was developed, this was tested in an unmoderated teledistant review session. The practice of active listening, while encouraging the participants to think out loud, provided a recording that could be reviewed and transcribed so as to glean insights to apply to the development of the class assignment.

Carousel imageCarousel image

6: Conceptual STRATEGY

The website should be able to showcase a menu of meditation possibilities that would also allow a user to select a pathworking around a specific set of intentions or affirmations, or select the meditation of the day. My design instructions were to develop with small watch screens in mind, as well as mobile or desktop, so I devised unique icons for each meditation that could be recognizable down to the small round icons that predominate in watch face design. There was a design requirement to also consider the importance of accessibility throughout the design, so I also focused on mapping words to icons to allow screen reader users to navigate the website easily. I also wanted to provide quotations throughout, to help anchor the textual experience of reading through the website to the inner experience of the user when meditating with the assistance of the audio and video guides.

7: WIREFRAMES

My wireframes began with rough - and I mean - rough (I've lost the use of my right hand and have learned to draw, very ruggedly, with my left hand) sketches on paper. These hand-drawn designs were painful but required by the class, and as such I wanted to underscore the effort that went into developing this class exercise. Additionally, being conscious of my pain as I developed this website was important because one of my primary user personas is a user who relies on meditation as part of a pain management strategy. My own discomfort during the design process helps keep that user's needs front and center during my design work. Once the paper prototyping process was complete, those visual wireframes were redeveloped within a digital workspace, as you can see below.

Sketch Wireframe layout

Carousel imageCarousel image

digital wireframe layout

Carousel imageCarousel image

Screen Variations

8: USER TESTING

Once this was developed user experience and testing of these low fidelity prototypes were run to identify issues within the prototype that could be addressed within the next design iterations. The user testing took place using links to a visual demo through Adobe XD's cloud service platform. I went through several rounds of iteration on the first lo-fi prototype to get the interactions working properly during the first user testing. Here’s a link to that first version:

Carousel imageCarousel image

9: Final Class Designs

The insights from the user testing were incorporated into a final round of iteration, providing this high fidelity prototype of the Meditate Now! website. Here is a link to that second prototype:


10: CONCLUSION

Developing an app for a website from beginning to end revealed a number of procedural steps that I'd otherwise have taken for granted. Having my own chronic pain disability, I found myself thinking a lot about what touch gestures mattered in an interface, and the speed at which one can access a meditation when in pain, which informed my designs. As a result, I also completed the audio and video content that would flesh out this site, because these meditations helped me immensely with my own physical pain, and I would like to see this content available to help others who could benefit from these binaural meditations.

  1. Welcome Meditation on Empathy (Audio or Video)

  2. Abundance Meditation (Audio or Video)

  3. Attraction Meditation (Audio or Video)

  4. Binding Meditation (Audio or Video)

  5. Growth Meditation (Audio or Video)

  6. Hastening Meditation (Audio or Video)

  7. Healing Meditation (Audio or Video)

  8. Manifestation Meditation (Audio or Video)

  9. Psychic Meditation (Audio or Video)

  10. Protection Meditation (Audio or Video)

  11. Removal Meditation (Audio or Video)

  12. Reversal Meditation (Audio or Video)

  13. Spirit Meditation (Audio or Video)

  14. Transmutation Meditation (Audio or Video)

Appendix