Final reflections on honours year

So that is the project wrapped up as much as it can be for now!  Even though I only really had one semester to focus on the mindfulness app, I am happy with what I have achieved.  I'll admit there are more things I wanted to add in, such as GIF animations and other little interaction extras, but I feel that the essential things and information are there.  As apps go, I feel I have made a good go at creating something that feels and looks like an app.  Being a complete novice to app design and user interface at the start of the semester, I think I would be amazed to see what I achieved in 12 or so weeks in that regard.  Through making an app prototype I have learned about user interface design, user experience design, interaction design, advanced colour theory, web typography, semiotic theory, Gestalt theory, and may more which have helped me learn and grow my skills as a designer.  Even between 6 weeks ago and now I see a difference in the way I lay out pages and choose typefaces - I hope it is all for the better, as I have new knowledge to go on when making important design choices now.

I definitely did not expect to have made an app prototype for my final project but I am so happy to have done so.  I have never tried something like this before, and learned a lot about screen design/app design/interaction design.  I don't know what my style has developed massively over this semester, but over the year my vector illustration skills have markedly improved from the beginning of the year.   There's something exciting about having an interactive piece for the degree show too, for some reason I am just very pleased with this!

In relation to mindfulness, I hope that the app achieves what I aimed to do, which is to present mindfulness in a way that was removed from the hippy connotations, using information design to present the important and persuasive facts about how it can be a useful tool for everyone.  I definitely took inspiration from some of the mindfulness apps out there, but I like to think that my app has its own angle on educating users about mindfulness.

One area I would have like to be able to work on more was print design, as not having a huge amount in my portfolio has meant that I don't have as well rounded a skill set as I would like for the big bad job market I am about to launch into.  Ideally I wanted a cross platform campaign ready to hand in, but having taken on 3-4 extra-curricular activities there is only so far I was able to spread myself in terms of workload.   I will however get a brief foray into it for the degree show posters, so there's that!

Regarding the whole year, my project has shifted a lot.  I wish I had settled on this idea sooner, but perhaps if I hand't tried out all of these other ideas I might not have come to this one.  I cannot say that the research I did last semester helped me hugely with this project, but propaganda was something I was really interested in and still am, so I suppose if I hadn't tried it I would always have wondered "what if?".

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.

New Test videos

Today I got my boyfriend to film me using the iPad again, this time to see how the "Body" subsection screens look.  Overall I am happy with them but the app is still running very slowly, which is a little bit stressful considering deadline is tomorrow!  I have had a look at InvisionApp's FAQs and they suggest that the lag may be down to using big files (I uploaded my .ai files straight into the build) and having a lot of hyperlinks, which I do.  So I at least know how to cut them down and hopefully speed things up a bit.  Fingers crossed for tomorrow!

If you can't view the video on here, follow this link:

https://www.youtube.com/watch?v=b4W0tohlSSk

How to use and Find a class section

The "Find a Class page, local to Dundee as the app would theoretically make use of location tracking.

 I took the information in the second image from the Nilupul website, as it seems to be the only place doing mindfulness classes.  The idea is that the app would update as more places started to hold classes, or that users could look into nearby locations (such as Carnoustie, Kircaldy, etc, if we are being hypothetical about the Dundee location).

Exposition research and business cards

I have been rather terrible at doing anything in preparation for the degree show, but after a meeting with Lynn this week where she showed us how to load work onto our assigned computers at our degree show stands, I decided I do need to at least have a think about how I am going to present stuff, especially since it is graded.  At the moment I am afraid to say I only have the beginnings of ideas for business cards - all my focus has been on my dissertation and honours project and right now just want to get those two wrapped up as best as I can.

Thankfully, Simone and I discussed what I would put on business/handout cards and posters much earlier in the semester: little slogans which were aimed at busy, stressed people while advertising Mindcloud.  I believe I posted something much earlier in the semester which was a start on a poster, but I'll pop it here to save any curious readers some searching.  This will be the only taster on this blog on the posters unfortunately, because it is due in on Monday and any work I turned around for then on top of finishing my project would be a piece of rubbish! You will just have to keep you eyes peeled for the final product during my degree show instead.

Another area I felt it was useful to look at was the branding of meditation and spiritual people, since they often visually link to themes in meditation and mindfulness.  There weren't too many of these to go on but I collected a few where I thought the imagery and text styles may help.  Notable commercial examples are Gabby Bernstein's website (Fig 2) and Ruby Wax's Sane New World - both have been commercially very successful.  Interestingly, they both use blue, as it is the universal colour for calm and relaxation.  

Fig 2 Gabby Bernstein

Fig 3 Sane New World Ruby Wax

Along the way, I bookmarked some artists for this stage too, as their work was text based and evoked a mood I wanted to go for at the time.  The visuals of Mindcloud may have moved on from their style a little, but I think since the posters will be text-based, there is still something to take from them.

Fig 4 Jill de Haan

Fig 5 Jill de Haan

A lot of Jill de Haan's art is hand-drawn, which gives it a lovely personable quality which I hope to get a little bit of in my own work.  I don't have the time or the skill to hand-draw type, but it can be simulated digitally which I may well do.  I want my posters to feel like they are being spoken, rather than a stern message like the famous Gill Sans "Keep Calm" posters!  Loopy, whimsical type like de Haan's can give the feel of a conversation or friendly advice.

Lisa Collier's work is for a wellbeing event, which is relevant to the mindfulness theme.  I found the colour schemes interesting here, as in the last week I have been doing a lot of reading up on colour theory for my dissertation so was able to gauge what the intention was behind the colour scheme.  The blue is very relaxing and the grey is neutral, to convey a clear state of mind.  At this point, I don't see myself using grey as I feel it's quite a bland colour, but Collier has used a warm hue which means it does not feel cols next to the pale turquoise.  Collier's work also demonstrates how posters can be linked to business cards, which is something I plan to do.

Fig 6 Lisa Collier

Fig 7 Lisa Collier

Chris Piascik's work is punchy and vibrant, and uses type as the centrepiece in each bit of work.  I love the injection of personality; it's loud and exciting.   My posters will need to get people's attention, so perhaps the big lettering could work in my favour.

Fig 8 Chris Piascik

Fig 9 Chris Piascik

Fig 10 Chris Piascik

Fig 11 Chris Piascik

I thought the over-crowded presentation here was relevant to the theme of "over thinking" or an over crowded mind, which is one of the slogan ideas I have for my own posters.

Fig 12 Chris Piascik

The drop shadow emphasis here is really nice, and affords more contrast between the type and the background.

Each student's section can fit, at the largest, an A0 portrait poster.  Now I definitely don't want one giant poster, but it was a useful guide to the amount of space we would have.  At the moment, I have two layouts in mind, as shown below.  The one I will chose will probably depend on how the arrangement looks when I begin to put it together.

Fig 13 Degree show option 1

Fig 14 Degree show option 2

References

Fig 2: Bernstein, G.  2015. Spirit Junkie website. [online] Available at: http://gabbyb.tv
[Accessed 25th April 2015]

Fig 3: Siedlitz, S. 2015.  Sane New World [online] Available at: http://www.amazon.co.uk/Sane-New-World-Taming-Mind/dp/1444755730
[Accessed 25th April 2015]

Fig 4: de Haan, J. 2014.  Fancy Quotes [online] Available at: http://jilldehaanart.prosite.com/9535/2150125/portfolio/fancy-quotes
[Accessed 25th April 2015]

Fig 5: de Haan, J. 2014.  Washingtonian Cover [online] Available at: http://jilldehaanart.prosite.com/9535/4184646/portfolio/washingtonian-cover-may-2014
[Accessed 25th April 2015]

Fig 6: Collier, L. 2014.  BE: Wellbeing branding [online] Available at:
https://www.behance.net/gallery/17107931/BE-Wellbeing
http://jilldehaanart.prosite.com/9535/4184646/portfolio/washingtonian-cover-may-2014
[Accessed 25th April 2015]

Fig 7: Collier, L. 2014.  BE: Wellbeing branding [online] Available at:
https://www.behance.net/gallery/17107931/BE-Wellbeing
http://jilldehaanart.prosite.com/9535/4184646/portfolio/washingtonian-cover-may-2014
[Accessed 25th April 2015]

Fig 8-12: Piascik, C. 2014.  Mixed illustrations.  [online] Available at:
http://chrispiascik.com
[Accessed 25th April 2015]

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).  

Changes to the homepage

So previously the homepage to Mindcloud looked like a start page, which confused a lot of people.  It was suggested that this should be a landing or loading page, rather than classed as "Home" in the app.

The next page in to the app was what is now the Home page.  Before, it looked like this:

Fig 1

Instead of the three counter layout I had used for every other page, I wanted to have a little illustration which summed up mindfulness.  I used the character I already had in the meditation pose and added a brain in a thinking bubble.  Not exactly breaking out the box, but I thought it was important for the introduction page to include the essential "idea" of mindfulness.  The buttons linked to the illustration in the same way that all of the text does on each screen of the app.  In hindsight, I don't know what the difference between "Learn More" and "How Can It Help Me?" was supposed to be! One lead to more information about mindfulness itself, and classes, and the other lead to pages about the brain and the effects mindfulness has on it.  Information like body benefits and classes were buried among these somewhere, and looking back it was really not the best way to present some of the important information! 

Simone was worried that the options from the homepage didn't give the users enough starting points to explore the app.  How would they get to the exercises?  How would they navigate to the subsections of the subsections from only 2 starting points?  She encouraged me to put "Exercises" on the homepage, so users who would become familiar with the app could access them quickly instead of having to go through a load of pages first.  I also thought that a "Find a class" page would be important for people who wanted to be taught mindfulness properly - there is a trend for this in the market so it is reasonable to expect that a portion of users might find this helpful.  

Fig 2

I added separate sections for mindfulness and brain, and mindfulness and body, so that they weren't lumped in together and users could digest the topics in separate places in the app.  The little bubble at the top is where the previous "Learn More" section has gone, and leads to more general information about mindfulness itself (see Figures 3, 4, 5).   I didn't feel that it fit into the main section of buttons, so put it up in the top corner instead.

Fig 3

Fig 4

Fig 5

It is hoped that this new homepage will make the start of navigation easier as it gives the user more options upon opening the app, and leads to less confusion and searching.  Making information easier to find is a factor of interaction design that facilitates flow, which is something I hope to foster as much as I can.