Changing the UI slightly and new blue backgrounds

I decided to change the background colour of the screens which relate to exercises, classes and class information, after liking the change that I made to the "Find A Class" page.  Someone had commented in my survey that a different colour of background (in this instance it had been a dark background) helped them to identify where in the app they were.  As the exercises are a different kind of content to the general information, I had been thinking for a while if I should act on that.  

The pale blue is also particularly suited to the exercises as it is proven to trigger a calm, serene physiological reaction, which is what the exercises aim to do, after all!

I have also made slight changes to the navigation - to enhance the interactivity further and subsequently foster more of a flow experience within the app, I added a feature where users would tap once to select an icon, which would be highlighted.  Users now progress to the subsection by double tapping - I will have to add this to the page somewhere as an instruction.

The user interface has been shifted slightly upwards to make more space between the breadcrumbs and the modal window.  I hope to implement a function where the breadcrumbs disappear when the user is idle (i.e. not tapping the screen), but the deadline is very soon so I may have to add that as an extra little feature for the showcase (if I am allowed, which I have yet to ask about).

How the blue background looks with the "Body Scan" pages.  I think it lends itself better than the neutral here, and is fitting with the idea of "Headspace" as the backdrop suggests some clear floaty blue  sky.

With the raisin exercise.

Mindfulness and body section

I finally found time to finish up the "Mindfulness and Body" section of the app!

I already had a diagram to go on, which I created much earlier in the semester (Fig 1).  It was a big help in speeding the research process for this stage up a bit, as it had been a while since I had looked at anything body-related in terms of mindfulness benefits.

I split the body section into three subsections, having found links between some of the benefits and parts of the body or their conditions (you can probably tell from the diagram above).  Just noticed that all of the breadcrumbs say "Disease Management", which was originally the title of the body landing page.  This will be changed to be "Home> Body" as seen in Figure 2.

Users will be taken into modal windows for each subsection, which they can come out of at any time.  As I said in the post about changing to modal windows , this means the navigation is not so complicated and users should find it easier to get back to main sections should they wish.

Heart, lungs and blood windows

Covers heart disease, HIV, flu, blood pressure.

I'm debating moving this one to "Allergies and Conditions" as the flu is an illness, but on the other hand, the "Allergies…" subsection has the highest number of modal windows at present.  "Heart Disease" could also arguably go into that section, but because it touches on general heart health I am keeping it in this section for now. 

Allergies and conditions

Covers rheumatoid arthritis, asthma, psoriasis.

The psoriasis one was a difficult one to do because I wasn't sure how I could present it.  I decided to show the patches of flaky skin on the face of the character, rather than having an arm or body part where it would not be so nice to look at.  When that was finished, I realised I wanted to show the difference it made after meditation, so deleted the patches on half of the face.  The contrast wasn't very obvious as the details are small, so I made half of the circle blue to highlight the "before and after" effect.  This was also used in the "Mindfulness Reduces Stress" window to show the difference one can feel from practising mindfulness.  Because this page references mindful meditation, I put an option to go to the meditation excise at the bottom, both to aid the exploratory navigation style I wanted users to experience and to re-enforce the emphasis on the meditation. 

Pain and stress 

This one is slightly different - there is an introductory window about the effects of stress and why mindfulness helps which comes before the more specific facts.  I thought this was relevant, because most of the conditions that were helped by mindfulness practice were linked to stress and aggravated by it.  It was important to highlight that the link between mindfulness and stress-reduction was what caused pain-related and stress-induced conditions to get better.  Had I launched straight into the "Immune System" page, for example, the user might not have understood why mindfulness can help them get better.

Overall I feel like I have given a well-rounded view of benefits, even if I have framed them from an illness/condition treating point of view (which I suppose mindfulness is anyway).  

Modal windows and navigation changes

As detailed in the post about survey feedback, one of the main issues was with navigation and the user interface.  People were not happy about using breadcrumbs and back buttons to go back to the roots of subsections, so I had to do a lot of distilling down of content.  With the home page (see previous post) re-jigged, I had a starting point to figure out how on earth I was going to do so.  There were so many subsections of subsections, how could I sort it?  Then I remembered my brief foray into using modal windows back in February, and realised I had my answer.  If each subsection page could appear in a pop-up window, there would be no delving into another area of the app.  Users could simply view a sequence of mondal windows on each topic while remaining in the same main subsection - all they had to do to return to a main page was close the modal window.

I tried modal windows on the "Anxiety" section first:



Tapping on the first illustration opens up this modal window:

Looking at the old screens in comparison to the new modal ones shows that the modal windows help visually tie everything together through the "bounding box" they create.  This adheres to the Getsalt law of proximity, which states that elements in close proximity to each other can be identified as having a relationship of some sort.  Figure-ground contrast is maintained by the paler colour of the modal window, which has a gaussian blur drop shadow applied to it to lift it off the page.  

I also tried adding in a "Got It!" button, which was something I has spoken about with Simone in the week before.  I have been reading a lot of flow theory for interaction design for my dissertation, and one of the ways flow is achieved in interactivity is a measure of progress.  One way I could try to bring this in was to have users pressing an "I understand" button at the end of each page, which would give them access to the next page.  This can also (arguably) re-enforce the understanding of the page content itself, as a button with a phrase which prompts the user to have understood what they read might encourage them to read the text properly and not skim.  

You will see I have made changes to the look of the drop shadows too.  I got sick of the self-made drop shadows and wanted to try something that was seen regularly in user interfaces, which is a generated drop shadow with a blur.  I tried it out and found that it added the depth I was looking for without looking like an extra element on the page.  The softness of the shadows feels less clunky to me than the ones I created myself using the Pathfinder tool! 

Before and after the modal windows

Since I was distilling the navigation down, I realised I could link to relevant exercises at the bottom of some pages.  For example, the anxiety pages refer directly to meditation, so asking the user if they want to try a meditation after immediately reading about how it can help made sense, and opens up another way for the user to reach the meditation page. 

The windows also proved beneficial for the exercises screens, which I had always felt were a bit cluttered.  Below are some before and after of some meditation screens.  You can see how much of an improvement the layout is, especially in the first example!  It's amazing what you see in hindsight...

I am going to go through and add modal windows to all necessary screens now.

Exercises screens updated

I have updated all the exercise screens to have modal windows, so they look nice and concise now!

Section screens where users start for exercises.  As before, the illustrations are tapped on, opening up the modal windows.

Meditation

 Ice Cube Exercise

Compared to earlier screens: 

Body scan

Compared to older screens: 

Raisin Exercise

Compared to older screens: