emma savage - Emerging Media

Final Outcome

To the left is the fully functional final app prototype.

For a full screen version (opens in new tab) click here.

A video walk-through version, taking you through the app is available at the bottom of this page.

“At the heart of sustainability is an experience of the connectedness of things”

– (Fletcher, 2012:143)

INTRODUCTION

When it comes to magazines, the tactile nature of flicking through pages of a traditional publication demonstrates a mindful activity in a way that it could be argued that digital swiping simply cannot replicate. In this digital age, online magazines offer accessible, visually attractive web formats that can share multimedia content and reach audiences in an instant.

For all its wonders, technological advances can negatively impact our well-being, but Moss aims to reconnect us to the natural world through the very medium that contributes to this disconnect- technology. Moss will be an interactive magazine that engages with the user in its own unique way, with an effective design that draws readers into the content through its interactivity, ‘creating a more active experience than the passive reading experience inherent in print magazines’ (Burke, 2013:43).

Moss promotes ‘slow living’ in a digital world that functions at such speed, and with increasing disconnect from nature. With over half the people on the planet living in cities, ‘the need for a connection to nature has never been more important’ (McGeeney, 2016:17).

Research by psychologist, Roger Ulrich (et al. 1991) found that simply by looking at videos or pictures of nature, stress and anxiety levels can be reduced. Moss supports this theory through its nature-themed visuals, allowing you to access the beauty and mental benefits of nature from your phone screen.

RESEARCH

EXPLORING IDEAS

At the beginning of the module, I set out two potential ideas to pursue for Emerging Media. Both focus on themes of sustainability and environmental issues and draw on my interests in fashion and nature. It was important for me to come up with a project that would inspire and motivate me and hold my interest throughout the Semester. I also wanted to create something that hasn't already been done.

My two initial ideas were:

A fashion film themed around the environmental impact of the flower industry.

_

Inspired by my Design Practice project, this idea draws on my experience as a florist and my exposure to the environmental pitfalls of the flower industry.

The downside to this idea would be that given Covid-19, actually producing a video by means of filming with people, or even traveling around to film content would be very difficult. I also have limited experience with video and video-editing, and it would be a lengthy process to teach myself the medium in order to produce a high quality final outcome without collaborators.

A digital magazine or app showcasing sustainable fashion and lifestyle, and promotes mindfulness.

_

I decided to go with the digital zine idea as it was a project I am most passionate about, and gave me the opportunity to pursue one of my goals to make a magazine while challenging myself with an entirely new format in app design.

I felt it was a project I could work on independently from home which was particularly important given the current circumstances. A magazine also offers instant opportunities for collaborators can be included, and allows for remote contributions.

Powerpoint slide from my first peer review presentation, sharing my initial project idea.

INFLUENCES

An app would be the best way of presenting this new form of digital magazine, as apps hold increasing dominance in the future of mobile technology. Apps also embrace the effectiveness of storytelling through interactivity, multimedia content and usable design.

There are no existing direct competitors for Moss, and its multi-functional aims required research to be carried out across several existing forms of media to identify key design and usability requirements.

Top left: Headspace app screenshots, Top Right: Asana app screenshot (found online)

Bottom left: Animal Crossing, Bottom Right: The New Yorker app screenshots

DIGITAL MAGAZINES

I looked at magazines that have been converted to app form, including Vogue and Dazed. Of the digital magazines I researched, by far the most successful in its app form was The New Yorker. The New Yorker app offers a user-friendly and innovative experience that differentiates itself from its printed and website versions. The intuitive app effectively shares multimedia content including articles, videos and audio. The incorporation of animated magazine covers and the ‘delightful swiping motion allowing users to thumb through the cartoons with a simple gesture’ (Best Designs, [online]) immerses the user in a way that conventional ‘digital replica’ magazines (Burke, 2013:39) struggle to do.

MINDFUL / MEDITATION APPS

I also explored ways of practicing mindfulness through apps, referring to Headspace as a core inspiration. Many aspects of technology and digital media are contradictory to the practice of mindfulness, however apps such as Headspace are a popular way for those of us with busy lives to take a moment of peace. Headspace’s brand is reflected in its design- with uplifting, positive colours and endearing, smiley-faced characters. Research conducted into the effectiveness of Headspace has revealed that ‘short guided mindfulness meditations delivered via smartphone and practiced multiple times per week can improve outcomes related to well-being, with potentially lasting effects.’ (Bostock et al., 2019).

'GENTLE-PROGRESSION' GAMES

Games have the potential to possess relaxing and therapeutic qualities connected with mindfulness. The latest ‘gentle-progression’ game Animal Crossing: New Horizons was released earlier this year, providing a welcome distraction and escape during the peak of this year’s pandemic, and its ‘loose narrative and slow-paced activities’ have been compared to acts of mindfulness by mental health professionals (Wynne, 2020 [online]). Animal Crossing is also a good example of popular gaming amongst adults; as despite its cute, colourful graphics, the majority of players are in their 20s and 30s (Nogami, 2020 [online]).

ANIMATED CHARACTER INTERACTIONS

Productivity app, Asana, is a perfect example of how playful characters can boost mood and even productivity. 'The most user-cherished elements are animations of a unicorn and narwhal that surprise users by flying across the screen after a task is marked complete.' (Google Designs, [online]). I knew I wanted to incorporate a character into Moss' branding that gives rewards to the user, as it would offer great potential from the perspective of marketing and promotion.

DESIGN RESEARCH & THEORY

EMOTIONAL DESIGN

Don Norman’s Emotional Design was a key framework as part of this project’s development. With its core values based in mindfulness and sharing uplifting content, emotion design is critical in order to communicate the Moss brand and ethos effectively. Considering the 3 Levels of Emotional Processing as part of Moss’ design has been essential to resonate with users and create positive emotional responses. The incorporation of micro-interactions, personalisation and expressive imagery have been used in Moss' final outcome, in order to ‘cultivate that positivity’ (Baker, 2019 [online]).

DOUBLE DIAMOND

The Design Council’s Framework for Innovation has the original Double Diamond method at its core. This revised methodology also takes into account four core design principles, one of which is collaboration. This non-linear process works particularly well for collaborative tasks, as it allows for the constant development of ideas that bounce between team members. It appreciates that as new problems develop or ideas arise, the design process must return to the beginning. I have referred to this method while producing my GANTT chart.

Emotion Design & Double Diamond design processes

COLLABORATION

As project leader, it was essential I effectively communicated my vision and engaged with my team regularly throughout this process. I started by reaching out to each of the potential collaborators. As we are all working remotely and dealing with difficult external factors as a result of the pandemic, it was important for me to establish if the team I had in mind would be happy and able to take part and be flexible in my expectations.

First of all, I reached out to Ali Clifford, who is an advocate of sustainable living, ethical brands and marketing consultant. Ali acted as my advisor in the early stages of Moss' development. She pointed me in the direction of some sustainable fashion and homeware brands, as well as some social media accounts and websites to look at who focus their content around sustainability.

A magazine is a naturally collaborative process; a result of the collective efforts of many. As I am only producing a sample of content for the magazine, I drew on the strengths of two core team members who contributed creative content to the app prototype. I am incredibly grateful to them for contributing, especially given the difficult personal circumstances we all face at the moment.

My two creative collaborators are:

SASHA MAN

- Artist -

Sasha was initially approached to provide artwork for Moss, in as much or as little capacity as she was able. Sasha supported me throughout the design process, particularly in the early stages of Moss' character development when I was trying to put my thoughts across, as well as testing the app prototype.

Ultimately, Sasha contributed a magazine cover artwork, which would be located on the home screen of the app. She also provided a line drawing to act as a colouring page, a mindful activity inspired by adult colouring books.

Sasha's artwork can be seen under the Collaborator Content stage.

PEGASUS PRO

- Videography -

A Spanish production company who I interned with in 2018 immediately came to mind when I was considering creating a 'Mindful' video for the app. As Pegasus specialise in outdoor footage, particularly with the use of drones, they were a perfect fit in providing a video that would communicate my ambitions effectively and with professional quality.

After sending some visual examples and discussing the project, Pegasus provided me with a video clip of the Spanish countryside which perfectly communicated its mindfulness aims.

The final video can be seen under the Collaborator Content stage.

BRANDING

COLOUR PALETTE

Moss' main colour palette is variations of green to reflect on its natural origins and the varieties of moss you can find in nature. A forest green shade was used a significant amount (for example, in the navigation bars) as it is a calming colour which isn't straining on the eyes. I didn't want the app to just be green however, so accent colours of earthy yellows and oranges were also incorporated into the design.

Moss meaning & acronym as it appears in the app.

BRAND NAME

The organism that this magazine is named after- moss, encompasses the brand’s celebration of slowness, as the tiny plant takes time to grow. Recent studies have also revealed mosses have the ability to ‘detect pollution’ (Bedford, 2018 [online]) which ties in neatly to the concept of promoting sustainability and valuing nature.

I came up with the name 'Moss' spontaneously while I was out walking. Moss is found wherever you are, whether it's on the ground, in the cracks of a wall in the city or blanketing the trunks of trees in the most rural of spots. This reflects on the app in that it is a means of having the wonder of nature with you at all times, wherever you are.

I also felt like MOSS may could also act as an acronym that defines the core values of the app. These keywords could also potentially act as themes for particular issues of the magazine.

Some keywords I brainstormed were:

M - Mindful, Maker, Meaning, Material, Mother (Nature)

O - Organic, Optimism, Outdoors

S - Sustainable, Source, Style, Slow-living

S - Style, Sculpture, Seed, Sun, Solitude, Spring, Summer

Existing fonts found with Google fonts

My hand-written logo which became the final outcome

LOGO

Once I was decided on the app's name, I started searching for pre-existing fonts that may work as Moss' logo. I also drafted some hand-written logos. Ultimately I chose my hand-written title which I incorporated the Moss character into, as he became the 'O'.

MOSS CHARACTER DEVELOPMENT

Referring back to the endearing characters of games like Animal Crossing, I am aware of how cute characters have the ability to uplift and engage even adults. The use of a character of some kind was an idea I developed in the early stages of brainstorming, particularly as I considered ways of differentiating the app from other magazines. Creating a character enhances Moss’ interactivity and can be used as an endearing mascot for the brand that differentiates the magazine from competitors.

Having established the name Moss quite early on into the project, the obvious choice for a mascot would be just that- moss. In Japan, there is a cultural appreciation and fascination with the natural world, and moss is a particularly respected natural form. There is such a craze around moss in Japan (Nozu, 2015 [online]), that it's not uncommon to go on moss tours, or even keep moss as 'pets'- little moss balls that live in water, called Marimo. Ultimately, my moss character is most closely inspired by this 'moss pet'.

Primary ideas included a moss ball who would spontaneously roll onto the screen to interact with the user, for example when they have read an article or watched a video. The user would then click on the character to get their ‘reward’ for the personalised plant game. The more you interact with the app, the more plants you earn.

Stylistically, I created my illustrations using Procreate and used a watercolour texture brush as the basis. I found that the simplest design ended up being the most effective, starting with a watercolour blob which I then added features to. Finalising Moss' character design was crucial to the further design process of Moss, as my choice of colour palette and illustration style moving forward would have to tie in with the character for a seamless brand identity.

Time-lapse of final Moss character's illustration process.

Sample sketches for potential Moss character - Movement

Sample sketches for Moss character - simplistic shape and features

INTERFACE DESIGN

I included multiple types of interface design within the final prototype, including different types of magazine article, interaction, several variations of mindful activities and illustrated assets. I have made a selection to talk about here, and the full spectrum of content can be viewed either in the interactive prototype at the top of this page, or in the walk-through video at the bottom of this page.

PLANT GAME

The plant game element to Moss is a simple and novel extra engagement with the app. When the Moss character pops up on the screen (after you've completed reading an article, or watching a video- only appearing spontaneously) he may gift the user with a new plant for their 'Plant Collection'. The more users engage with the app, the more they will receive rewards like new plants, or extra water to water plants and make them grow.

The gentle-progression game (Scheurle, 2020 [online]) reflects on Moss’ ‘slow’ approach as a relaxing novelty, and the use of plants is fully in keeping with the magazine’s name, branding and ethos and acts
as a way of differentiating the app and strengthening the brand identity.

Unfortunately, I was unable to create this rain effect in the app itself. I created this gif by layering multiple rain droplet frames I created in Procreate onto my Plant Collection illustration.

Time-lapse of plant illustration

MY MOSS

As a way of storing user's Favourited articles, Mindful Moments and Brands, I designed the 'My Moss' section of the app to be like a snug, complete with bookcase containing their favourited app content. You can view your Favourites by tapping on the bookcase. The Plant Collection can also be accessed in the top right corner.

SOUND CLIPS

I created some illustrated sound clip covers for the Mindful Moments section of the app. I decided to keep these designs quite abstract and represent the sun/moon/nature through simple shapes and colours. While I didn't create or source any audio for the prototype, these sound clips could be a variation of natural sound, bird song, calming music or podcasts with audio meditation exercises to follow.

FASHION EDITORIAL

As part of Moss' magazine section, I wanted to demonstrate an alternative way of presenting a magazine feature which digital medium allows for creativity in. While the written articles worked well on a vertical scroll, horizontal scrolling offered the swiping motion most similar to turning the pages of a magazine.

I set up an editorial using a photoshoot I previously photographed and hadn't yet found a use for. It fitted in well with Moss' content as the styling was created through vintage fashion- a more sustainable fashion choice, as well as being shot against a backdrop of minerals, reflecting the nature theme.

Brand graphics created for sustainable brands, Po-Zu shoes and Bybi beauty.

BRAND SPOTLIGHT

As magazines traditionally contain adverts, I want to look at a way of incorporating a form of advertising but still keeping it engaging and informative for the user. Giving sustainable brands a section on the homepage- and allowing users to add that brand to their 'My Moss' favourites, provides a good incentive for brands to want to be part of Moss. Brand collaboration could result in profitability of the app through schemes such as affiliate marketing.

I selected two sustainable brands that I admire, and took the logo and a product photo from each brand's website and created two variations of graphic. These would be used in the app under the 'Brand Spotlight' section on the homepage as a way of showcasing a new sustainable brand each day.

I created the background pattens and colour scheme with reference to the ingredients that make up the advertised product- with Pinatex (a leather alternative made from pineapple leaf fibre) for Po-Zu's shoes and watermelon and prickly paw cactus as key ingredients in the Bybi Supercharge Serum.

COLLABORATOR CONTENT

MINDFUL VIDEO

My video collaborator, Pegasus Pro, contributed this mindfulness video for Moss.

Adobe XD's limitations mean that I couldn't upload a video into the final prototype, but this file demonstrates the portrait, fullscreen crop as it would have been intended in app.

The video is complimented by a relaxing background music to act as a moment of mindfulness, bringing nature to the palm of your hand, wherever you are.

Psychologists have found that even being shown videos or images of nature have the ability to have calming effects.

Video Credits: Pegasus Producciones

MAGAZINE COVER ARTWORK

My artist collaborator, Sasha, contributed this digital illustration with collage for Moss' homepage.

I gave Sasha free reign to create something for the app, but made her aware of the app's developing interface design, so that she could tailor the content and colour scheme around Moss.

This artwork appears as a Magazine cover, which appears on the Moss 'Today' screen. If Moss was to be a real app, this cover would change weekly with a new guest artist contributing, as is common practice with traditional printed magazine covers.

Sasha also created the illustration used for the mindful colouring page, which can be viewed in the prototype.

Artwork Credits: Sasha Man

SECONDARY REFERENCES

ARTICLE | The Art of Forest Bathing

Unfortunately my potential research/writing collaborators were unable to contribute, and so I had to think of a feature to include. I really wanted to be able to show an authentic article within the app, but due to time constraints I referred to two core online resources which extracts have been taken from and applied to the article.

These references were Forestry England's Forestry for Wellness booklet and this article by Time Magazine.

I chose the topic of forest-bathing as it applied to much of Moss' concept- referencing the benefits of nature and mindfulness. With forest bathing originating in Japan as shinrin-yoku, it also seemed fitting given that Japanese philosophy is influencial in Moss' branding origins.

ART GALLERY | Henri Rousseau - Surprised!

I located an extremely high-resolution version of this painting on the National Gallery website, which allowed me to zoom and crop in on the painting without losing any of the quality.

PROTOTYPE DEVELOPMENT

WIREFRAMES

Moss Low-Fidelity Wireframes: Intro, Homepage & Magazine Content

Moss Low-Fidelity Wireframes: Mindfulness content & Plant game

Moss Low-Fidelity Wireframes - Settings / Other

Design elements for Moss set out on Adobe XD workspace

PREPARING ADOBE XD WORKSPACE

I set up this space on my Adobe XD canvas so that I would have easy access to icons and fonts throughout the design process. As I knew that I would be working with many artboards and assets, it was important to keep the workspace as organised as possible.

Having colour swatches enabled me to quickly and efficiently apply colour to content using the eyedropper tool, and allowed me to keep a consistent colour palette throughout.

I also set aside iconography and my custom navigation icons (see below) and had a sample of typography sizes and fonts.

Moss custom Navigation icons created by hand using Procreate.

NAVIGATION

I custom drew all of Moss' icons using Procreate as I couldn't find existing icons that met the app's needs, and I decided that mixing pre-existing icons with my own would cause an inconsistent design. I decided that the slightly uneven brush strokes lent itself well to Moss' informal and organic brand identity.

Grouping the navigation bar components together made it much easier to apply them to each artboard.

I applied a larger square around my icons to create transitions with, allowing a bigger surface area to be tapped, which is beneficial for small screens.

I also added a small detail with the use of a red and yellow flower, which acts as a marker to show which tab you are currently on.

ANIMATING IN ADOBE XD

I have not animated beyond simple GIFs in Photoshop before, but I was keen to incorporate some simple animation to my app wherever possible. Animation is an effective way of evoking positive emotive responses in UX design, as these animated details, no matter how small, add a touch of personality and character to an interface.

Adobe XD is also quite limited in terms of animation and it doesn't currently support GIFs or video to be included in prototypes. Therefore I created my animations by giving each frame an artboard and applying the auto-animate function when creating the transitions. Below are a couple of examples of animation in GIF format, that I hoped to incorporate into the app, had time and software constraints allowed.

Animated Moss character gif created in Photoshop.

I created a simple bouncing ball animating using Procreate. I hoped to have created this same movement but with the moss character in place of the simple circle. Unfortunately I didn't have time to recreate this animation in more detail, and with Adobe XD's animation limitations it would have been a difficult effect to achieve for the prototype.

FINAL OUTCOME

ARTBOARDS

Final artboards for completed Moss app

Mockup phone presentation of Moss final app prototype

MOSS APP

(VIDEO WALK-THROUGH VERSION)

TESTING & FEEDBACK

I sent the prototype to several family and peers for review. The most important thing was to ensure that the navigation all worked effectively and that the core message of the app came across.

Some encouraging feedback I received included:

A professional looking app, I would love to use this!

The colours and illustrations have an organic feel.

AREAS THE APP COULD BE IMPROVED

If I had more time, I would work on my animation knowledge and look for ways of working around Adobe XD's limitations in animated content. I particularly would like to have been able to demonstrate a higher standard of animation for the Moss character within the prototype.

During the process of creating the transitions between artboards, I was unable to exclude the top and bottom navigation bars from the transition effect. This is particularly noticeable in the Swipe Left/Right transitions and causes the overall flow to be quite jarring and distracting on these pages. This was also noticed by one of my testers. Unfortunately I was unable to work out a way of fixing these navigation bars so they wouldn't move so the issue couldn't be rectified.

EMERGING MEDIA

REFERENCES

Books:

Arnold, C. (2009) Ethical Marketing and the New Consumer. Chichester: John Wiley & Sons

Fletcher, K. & Grose, L. (2012) Fashion & Sustainability: Design for Change. London: Laurence King

Saffer, D. (2010) Designing for Interaction, Second Edition: Creating Innovative Applications and Devices. United States: New Riders

Thompson, C. (2013) Mindfulness & the Natural World. East Sussex: Leaping Hare Press

McGeeney, A. (2016) With Nature in Mind: The Ecotherapy Manual for Mental Health Professionals. Jessica Kingsley Publishers. [E-Book] Available at: http://web.a.ebscohost.com.winchester.idm.oclc.org/ ehost/detail/detail?vid=0&sid=7da00736-5dc9-48b1-89bb-31d87a3d763c%40sdc-v-sessmgr03&bdata=Jn NpdGU9ZWhvc3QtbGl2ZQ%3d%3d#db=nlebk&AN=1197147

Online:

Design Council (Date Unknown) What is the framework for Innovation? Design Council’s evolved Double Diamond. Design Council online article. Available at: https://www.designcouncil.org.uk/news-opinion/ what-framework-innovation-design-councils-evolved-double-diamond [Accessed on: 14th November 2020]

Google Designs (Date Unknown) Asana: Productivity with Personality. Google Designs Online Article. Available at: https://design.google/library/asana-productivity-personality/ [Accessed on: 14th November 2020]

Baker, J. (2019) The Art of Emotion – Norman’s 3 Levels of Emotional Design. Medium online article. Available at: https://medium.muz.li/the-art-of-emotion-normans-3-levels-of-emotional-design- 88a1fb495b1d [Accessed on: 14th November 2020]

Nozu, M., Thompson, B. (2015) What’s behind Japan’s moss obsession? Online article. Available at:https://theconversation.com/whats-behind-japans-moss-obsession-50500 [Accessed on: 10th November 2020]

Bostock, S. et al. (2019) Mindfulness on-the-go: Effects of a mindfulness meditation app on work stress and well-being. National Library of Medicine PMC article. Available at: https://pubmed.ncbi.nlm.nih. gov/29723001/ [Accessed on: 10th November 2020]

Best Designs (Date Unknown) The New Yorker Today. Best Designs online review article. Available at:https://www.bestdesigns.co/best-design/the-new-yorker-today [Accessed on: 10th November 2020]

Scheurle, J. (2020) Why Animal Crossing calms you down, explained. Polygon online article. Available at: https://www.polygon.com/2020/4/2/21201065/animal-crossing-new-horizons-calm-mindfulness- coronavirus-quarantine [Accessed on: 15th November 2020]

Wynne, K. (2020) ‘Animal Crossing: New Horizons’ Is Great for Your Mental Health Through COVID-19, Professionals Say. Newsweek online article. Available at: https://www.newsweek.com/animal-crossing- new-horizons-great-your-mental-health-through-covid-19-professionals-say-1494525 [Accessed on: 15th November 2020]

Nogami, H. (2020) Animal Crossing’s developers say the series ‘must continue to evolve’. Video Games Chronicle online article. Available at: https://www.videogameschronicle.com/news/animal-crossings- developers-say-the-series-must-continue-to-evolve/ [Accessed on: 15th November 2020]

Bedford, B. (2018) Mosses could help rapidly detect pollution. Mongabay Online Article. Available at:https://news.mongabay.com/2018/12/mosses-could-help-rapidly-detect-pollution/ [Accessed on: 17th November 2020]

Apps:

The New Yorker – App: Available at: https://apps.apple.com/app/apple-store/id1081530898?_branch_ match_id=848562936426573201&utm_medium=marketing [Accessed on: 10th November 2020]

Headspace – App: Available at: https://apps.apple.com/gb/app/headspace-meditation-sleep/ id493145008 [Accessed on: 10th November 2020]

Asana - App: Available at: https://apps.apple.com/gb/app/asana-mobile/id489969512 [Accessed on: 10th November 2020]