Audio & XD walkthroughs

Audio That Would play using the app (my meditation tapes alongside Adobe XD walk throughs):

Enchanted Forest Meditation

Under The Sea Meditation

Complete Map:

Projector Page

Projection

I will now enable people to use a projector, enhancing their user experience. I want to have a link on this page to a guide to making their own projector, (https://www.youtube.com/watch?v=Tx4vPeL9y2g) available if they don't already have an iPhone specific third party projector.

This being my initial concept for how this mid-way projection page would look, I experimented with this layout in Illustrator but instead of using block like light rays coming off the body of the projector, I thought using the same curved lines coming off the lighting icon would be more consistent. However in context I feel this doesn't look quite right, the image was too literal and I feel I can afford something more subjective, as I have done with the camera/ screenshot icon. I then tried out a more conceptual image, using the lighting icon outline, I made it look like the lens of the projector with light specs. Although it doesn't necessarily look like a projector, it's more fitting with it's aesthetic.

I put this in context, linking it as an in-between from the menu screen to your chosen Happy Place.

I'm unsure wether this page is too plain, but don't want it overly dramatic due to it's informative functionality, I feel perhaps a way to get around this, maintaining purpose but upholding style may be to edit the contents of the iconography.

I feel this is the perfect solution, it's not too hectic as I want to maintain a calming process, but it's not as clinical as it was in black and white, the imagery used I've decided should correspond to which ever Happy Place you're about to visit. 

Happy Places Icons

At first I made very simplistic icons, slightly rendering existing iconography. The images didn't fit particularly well together, the thickness of lines especially frustrated me, they didn't look like a uniformed set of images. I did however really like the use of the smiley logo as the special features icon as it seemed fitting and not like it was assigned to any Happy Place specifically. I thought about using the screenshot icon as a camera at first but thought a landscape icon may be more appropriate as it references nature, a place away from social media which the camera icon is so typically used in and recognised in mainstream media, with connotations of selfies and Instagram for example which harbours social pressure typically pronounced with younger audiences. 

I then started to think about a more uniformed approach, leading with the smiley special features icon, I thought it would make sense to use this outer circle as a barrier for all my icons, this coincides with the circular aesthetic of Mandalas, symbolic of a microcosm of our universe. 

A Madala is a complex abstract circular design, the name itself is Sanskrit for "circle" with one identifiable center point.

(Use of colour purely so it was easier to design)

I really liked the first lighting icon's sun rays so kept these, image tracing it without the details in the center so it looked less like the sun and more an orb of light.

After using the pen tool to construct all of my icons, I tested them out on a colourful background. Clearly as they're white the visibility is quite a concern, however as the backgrounds of the Happy Places are mean to be videos, this worries me less as you will be able to see them the majority of the time 100% clearly and some elements may not be so clear infrequently due to the nature of the lighting of the videos.

I'm happy with these and feel they look a lot more consistent than my original designs which were also not sketched out by me which felt inappropriate, especially as this project has a personal place in my heart as something that helped me. Hence fitting the brief of resolving an issue which for me remains the stigma behind meditation not being particularly contemporary or accessible.

Happy Places Places.. Enchanted Forest

I really love the last image, however in practice I feel the second image below is a better screenshot to use as it's more of an open space and looks more like a walk through video than the first, it's also less gloomy which could be construed as threatening.

 

Going with this second image, I'm building up the interface as I did with the Under the Sea Happy Place. I chose these two because this enchanted forest path is possibly my favourite kind of guided visualisation, whereas for me 'Under the Sea' would be my idea of a nightmare, I wanted to test myself to make this as relaxing as possible, myself being quite a good tester of this as the idea of being underwater frightens me. 

Like with the Under The Sea Happy Place I have replicated the same functional layout, with links going to and from the different hues, as well as the camera icon, audio and special features.

Having got the hang with the previous happy place, it was quite simple to recreate this for a different environement as initially I had never used XD before and found simple things difficult to complete, for example finding the methods of linking pages.









Below are the special features for Enchanted Forest, you can select from wildlife, fairies and sun beams.

I now have two different complete experiences for Happy Places, the Enchanted Forest and Under The Sea. It's a shame XD won't support a video background or enable me to actually include the audio elements but I'm really pleased with the design outcome, and these elements would obviously be available if this app was actually developed. 

Meditation Audio- Enchanted Forest

I plan to record this, which would then be added to the audio option of the Enchanted Forest Happy Place, I was inspired by my favourite youtuber Jason Stephenson who post meditation videos, his meditations have helped me overcome difficult nights sleep, I can now fall asleep in 20 minutes instead of tossing and turning for hours, as well as reduced sleep paralysis. This script is loosely based on his reducing anxiety guided visualisation 

Hello and welcome to your enchanted forest. To experience all the benefits from this guided meditation, find a well- ventilated room and a comfortable place to sit or lie down. Make sure that you not be disturbed and settle into a position where you could sit or lie comfortably for the duration of this exploration. Prepare for a deep sense of relaxation and well-being. Embrace the opportunity to escape from the here and now. At this moment in time, there is nothing for you to feel concerned about. You are at peace. You will allow the tensions of the day to dissipate and to connect with the universe. Remember that this is your time.

As you begin to explore your own Happy Place, I want you to relax your breathing, do so with rhythmic breathing by inhaling for a count of four, holding for two and exhaling for four. Try this with me now…

You can use this technique anytime you feel tensed or nervous. Try it whenever you are feeling stressed as it will enable you to breathe your way through any tensions and to be able to release any worries, anxieties or physical tensions each time on the out-breath. Now, breathe normally, feeling the tension leave your body. As your walk through your enchanted forest, let all worries of the day be replaced with the details you see around you, this is your opportunity to create a place of tranquiity specific to you, using the icons on screen adjust the lighting, if you see pink or yellow or green as a colour that resonates with you, adjust the hue. If you find the sounds of Tantra music and binuaral beats typically used for meditation soothing, play these along with sound effects from the audio icon. Or continue to listen to my voice, the choice is yours as this is your time to escape the everyday. Notice the shades of green… imagine the feel of the bark… the moss covering the trees, how nature thrives and blooms, unspoiled by the stresses of the city. Imagine this forest, it’s plants and oxygen rich air are all around you, you are alone and you are safe, there are no anxieties here, the beauty of this forest is retained by it’s lack of stress, stress being destructive, if you are to retain your inner happiness, you must learn to let go of negative emotions. 

Naturally thoughts negative or happy may arise, every time they do, accept them for what they are, and simply exhale them, imagine them leaving your body on your exhalation, the forest swallows them up, the plants and nature around you recycle them. If you’re happy with your Happy Place, you may capture this moment using the camera icon on the far right. You can take this with you everywhere, places you cannot meditate, during moments of stress this will be a reminder of this moment, and breathe…

If you click on the smiley, here you will find special features to help make your forest even more personal, if you like wildlife, light rain or the wind through the trees you can add these to your happy place. Adjust the settings until you are happy…

Look into the depths of the trees, the dense forest welcomes you, regardless of your background, your anxieties, your intrusive thoughts and your actions of the day. Allow yourself to acknowledge this… You move through the forest even further, until you are ready to come back to right here, right now.

Happy Places Places.. Under The Sea

Beginning to mock up how the places will look I need to select from screen shots and edit over these, testing out the lighting / hue changes, audio playlist, special features and camera function.
As these screenshots from my chosen walkthrough videos are often quite pixelated due to them being taken from moving image that may not be in HD, I plan to choose snapshots which are the highest possible resolution, as well as the most calming. Although the best resolution below is the last image I found when trying to put it into the frame of an iphone layout it was too close up when a selection was chosen to feature and looked awfully distorted when I played around with resizing.



I tried to take some more stable shots, going through the video waiting till the camera focused.



I found the second image worked the best, I flipped it and made it fit the iPhone wire-framing mock up and it includes coral, fish and the gradient of sea blue I hoped to include as this is a very calming colour, but not too much is dark blue as often (especially me) people may find the unknown darkness of the sea threatening.


Here is a mock up on an iPhone of how the app would look, obviously it would have the video playing, with the icons at the top, the set meditation I'm writing and recording specific to each individual happy place will automatically start playing, in this audio file it will explain how to adapt your place to something more personal. You have the option of turning this off and selecting from a music / sound effect playlist.











I started to piece together the functions of the app in Adobe XD:

I made it work so that clicking the icons would actually be links to opening the drop down menus which are to appear over the top of the video rather than being a separate page however due to the nature of XD this is not possible and the video cannot be played, but it obviously would if possible.





After feedback saying it would be better without the thin outline of the boxes, I agreed and changed it as this has a more minimal modern feel. In the image above I've linked the camera / picture screen back to the 'homepage' of the Under the Sea happy place, by clicking anywhere on the page you will be directed back. Happy Place captured of course meaning a photograph of your happy place has been saved to your phone for you to enjoy whenever, on the move especially when meditation may not be possible. This will hopefully aid as a reminder of how relaxed the user felt at that point.

I've made all the transitions the same (slide left) to maintain consistency and in keeping with the relaxing overtones.







So I added in the list of audio possibilities, the first on the list being what is automatically played (but can be turned off by selecting other options or back on if clicked) which I will write another script for and record, although XD won't allow me to add this into the interface but if I had the tools to, this would be possible. Another addition is these screens featured below, these have links to the lighting/ hue icon, ranging from pink to blue you can select these on the menu and easily get rid of it by simply clicking anywhere on the screen, that is don't simply in this application by redirecting you back to the homepage of Under The Sea.

Another element you can alter being the 'Special Effects' icon, for Under The Sea this includes more fish, mermaids and bubbles. Again, clicking anywhere on screen will then get rid of these.



I was thinking of having a menu button on every interface so you could go back and choose another Happy Place, however I feel it's a good limitation not allowing so as people cannot flick through the app so quickly, they have to reopen it to select another user experience; which for this app I feel is appropriate so they're more likely to spend time focusing on one happy place, for skeptical users this could be really beneficial.