DIGITAL STUDIO PRACTICE | MODULE CODE C17810 http://kingstonux.blogspot.co.uk

PROJECT TEAM Jennifer Evans TECHNICAL LEAD Laurie Johnston VISUAL UX Grace Kim IA LEAD David Mitchell DESIGN LEAD Suzy Willis ARTIST DIGITAL STUDIO PRACTICE | MODULE CODE C17810 http://kingstonux.blogspot.co.uk

SPRINT 1 Introducting meMap meMap is an app for young people that allows them to monitor, record and understand their emotional wellbeing. Using art to reflect their moods, it enables them to recognise patterns and potential impacting triggers. It encourages personal reflection and expression and offers an environment in which users can share their visual journeys safely. It is an opportunity for teenagers to share and reflect, to see that theyre not alone, and to say this is me. The user group (11-18 years) is going through substantial personal development mentally and physically while becoming more independent from their parents/ carers and familiar support networks. Using an individuals own point of reference, and focusing on their unique and specific needs, meMap provides a personal measure. MeMap doesnt evaluate, judge or give advice to the individual, it is an application for the user. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 3

NER D LE RAB E ELIV ing and erst nd ies OW of of id Dav t wha lf t se en curr zy + Su + Jen y Suz ) web ile, ixed All m mob ce pe ( ketch / Gra ty id + ogy up / s ol te Dav ri and ew ers, us rie als, Lau f go o w tion f ho id os o Dav ri ena sc o 5 used be , to ses ility pab tions, u al s ca ca Jen gic ical ame ifi on n e techn g spec echnolo t g in 3 pa ghtlight licable rie pp hi a Lau up and f 1-2 y no oSk ctio sele en ps d J ons cati ownloa grou pli ing dd ning Jen + Jen + g ap test stin ase an to gai ble i rie y te urch p k Lau d dma sue NeuroS s to p i r roa Dav le on ate d in ssib pplicati e - cre sse c dre a 1-2 clearan ance o be ad Jen 2 r t l iling ct. 2 hica rch clea areas deta nt es O e a Tu ume ese - Outlin doc pe ue 5 avid lan ners p D co .1 niq n Oct king ow e, u t titl lutio n - Wor s and ues o T ec la ble proj an p elivera tling d t ou sis ion, ly men All ocu T ana f - D SWO Brie ive nt, and oi / ng p uiry l inq omain tua et d ntex All / co nto targ g y etin aph sight i e gr up M thno e in Jen Gro s - E in mor ew a rvi to g ey m inte a ser terview hic surv U ce p n rch s- diagr he a ra ri z? Gra ese ation use demog ith Jaz nt o m r plic pps roo ap and ssibly w id of a lass r Dav ut c f simila rt falls Po o * y ar nd on o ho or s d se prim ti id 3-4 ft an explora ntages Dav bing or Dra er va scri ne f d h de seli Furt ribing a y nas - ba Suz sc erso ion t p de et lora y+ 3-4 k p ne lid mar ona ex y jour - so Suz ers nas tion hero P ple o m tion pers ona co pes truc ty ons or rs r Pe es f se C use cas Jen ain se Ca se m lU d al u eMap a nti r m Initi boar o pote rt m sketch room f tory s ra of a ies rapy diag dels- int out ar , w d po Mo k flo umm e the rview Davi Tas rience a type, case ge s a singl an ove pa e n Exp perso in each - 5 one ons on luding id i t c h Dav eac rtunity oncep r variat sting in y c o o Suz opp herapy tions ( user te board y a t Art py cre bring to ick stor y Suz qu era n) to y th tio bod ce s nd a Gra ona and crea ching, a pers eaders t for y n ske h ratio plates posed r jo rne Jen ploPRACTICE roMODULE u DIGITAL STUDIO n tem - p | ex se CODE C17810 go g ou Lo esi t copy n her ign w al d io n Des Jen e e ne Visu l conte pplicat reat ri "c itia t for a d Lau e In en cop tion an t s a les con ar mm SPRINT 1 Developing scope This was a team project to research and design an industry-standard, digital media product. In response to a supplied brief, the team consisting of design lead, technical lead, IA lead, artist and visual UX collaborated to research, design, prototype and test a mental health monitoring product. We shared roles and tasks by pulling on each group members strengths. This means that everyone worked to shape and contribute to each deliverable. During creative brief development and research, the team identified a teenage target audience with a need for a positively-framed, selfmonitoring product that engages their creativity. http://kingstonux.blogspot.co.uk/2013/10/initialproject-understanding-outline.html http://4.bp.blogspot.com/-1DLXRNYzPzg/ Umf7BmxbfpI/AAAAAAAAAAg/L0VA18pdVHE/ s1600/CreativeBriefAnalysis.jpg Research proved that the best technological solution to fulfill this need was a mobile app. Because of the groups limited coding ability, technological deliverables initially focussed on paper and HTML prototypes. Ultimately a mockup video was felt to be the best method of communicating the Document wide icon to link to each pages assets 9 ct. 2 .2 Nov Sun Nov. 5 s Tue design vision in order to build a fully functioning, interactive prototype. This is what we will proceed with to try to gain funding to develop and test the app. Two project plans were made, describing deliverables for each phase of the design and build cycle.Each task had an overall owner although most of the team contributed to each aspect. The two versions reflected the fact that project management began in a waterfall style and developed into agile once we learned the benefits of that methodology. We ended up with a project management style that was mostly agile as it iterated through multiple research, design, implementation, and testing phases. We also incorporated a few scrum methods, such as having a sprint 0 to ramp up for the project, because we found it beneficial to align ourselves on a project vision and approach before delving into our respective tasks. Plan 1 https://docs.google.com/spreadsheet/ ccc?key=0ApLf1P9_IrfPdFM1NlQ3Qk5rcG96NWpQTFRBUW50eEE&usp=sharing Plan 2 https://docs.google.com/spreadsheet/ ccc?key=0ApLf1P9_IrfPdEZuNzd0VlBGY1BaYmZFdDlrWGpqOHc&usp=sharing 4

SPRINT 1 Interpreting the brief As a starting point for research and design development, the brief presented a diagnostic, digital tool for self-monitoring created by business coach Jazz Rasool. In researching this tool, the project team each completed an online questionnaire that generates a personalised Atmascape a heatmap-type visualisation. The team was tasked to explore the application of new technologies and design to increase the success of this method for a specific user group. Our interpretation of the brief was to develop the ideas of selfmonitoring and visualisation to design an original and successful digital media product for mental health. Before we defined our user group, we researched the jargon used in the health market and existing tools, products and services for monitoring wellbeing. Most of these focus on mobile, tablet, Internet and desktop technology the types of technology that many people have access to and which would fit into daily routines. Trends were identified in: questionnaires; spectrums and rankings; mood meters; graphs; social/support community; educational content; personalisation/customisation; little mention of medication; comparison to general and to personal definitions of health. From these findings, we were able to brainstorm concepts and discuss user groups, and intended goals and tasks. Defining the users Research into mental health monitoring solutions identified that there is a huge gap in the teenage market, so we decided to focus on this demographic. By focusing on teenagers as the target audience, we saw opportunities to: We were then able to define user goals: elp me understand, learn about h and express what Im feeling in a safe and creative way help me identify triggers that affect my mood elp me work out and meet my own h mental health goals and parameters evelop a non-judgmental tool d designed for teenagers, rather than adults help me see the growth of my awareness and understanding mpower teenagers to define e and take control of their mental wellbeing help me create something that depicts mental health in a positive way. encourage self-responsibility Brainstorming acilitate communication and f conversation about mental health to combat stigma attached to monitoring and diagnosis. Some concepts were identified for exploration: Identifying aims and objectives therapeutic use and value of visualisation and creative artefacts In discussion of what would make our product successful, it was agreed that the main aim was self-monitoring. So success was defined as: visual representation of mental health that is easy to understand ncreasing users self-awareness i and insight, rather than diagnosis or specific problem-solving reating opportunities for c evaluating mental health safely reaching boundaries that prompt self-help creating a community in which self-created art is shared. http://kingstonux.blogspot.co.uk/2013/10/takeaways-from-tues-15-oct-workshop.html nabling users to look outwards e for community and support. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 5

SPRINT 1 Primary research We were able to conduct a limited amount of primary research. Due to timelines for ethical clearance, we were forced to conduct all direct research with teenagers through an intermediary or parent. As a result, we carried out some classroom research via an intermediary teacher, albeit at a US school. The teacher administered a questionnaire to her class during the schools Wellbeing Week, which gave a snapshot of this groups concerns and priorities. http://kingstonux.blogspot.co.uk/2013/11/rawclassroom-research.html Concept testing During concept development, a user test was done with two 13-year-olds, a daughter of one team member and her friend. The participants were briefed as follows: Pick a range of emotions, work with strips of paper, and colour each to represent how you feel. Colouring the whole strip will show that you feel your emotion at its greatest level. (See image, left) We wanted to find out: which words participants would choose to describe their emotions (in this case standing in for persona Lisa), to help us use vocabulary appropriate to our target audience how they would use colour to represent particular emotions and levels of emotion (eg. 90% if very happy, 30% if not so happy?) what patterns they would make with their colours how much they would enjoy representing their emotions using art and colour. Testing outcomes: choosing an attribute of wellbeing, setting a level and applying a colour to it was a comfortable exercise participants took their time adjusting their patterns, suggesting they were engaged by the pattern-making participants wanted to customise their efforts further, suggesting that a creative approach encourages commitment. http://kingstonux.blogspot.co.uk/2013/11/ concept-testing-plan-art.html IMAGE: Coloured lollipop sticks created by participants during concept testing DIGITAL STUDIO PRACTICE | MODULE CODE C17810 6

SPRINT 1 IMAGES: Cerebal Hut by artist, Guvenc Ozel Secondary research We conducted secondary research to gain insight into the target market. We explored several sources from news stories to documentaries to competitor applications. The Future of Health Survey identified that patients would like, among other things, to be empowered and have more control, find out more about their condition, and learn new skills and tools to help them manage their health. http://www.mentalhealth.org.uk/publications/ starting-today-future-of-mental-health-services/ The BBCs Diaries of a Broken Mind, in which teenagers documented their feelings, gave valuable background and insight into some mental health issues for this group. These included body image and eating disorders, depression and anxiety, panic, anger and obsessive compulsive disorder. Some participants mentioned creativity and forming communities to be helpful to their condition. Firstperson stories were also found through mental health charities and services such as Young Minds and Right Here. http://kingstonux.blogspot.co.uk/2013/10/userstories-research.html We also contacted three Londonbased youth groups for possible user interviews and testing. Interestingly, we found anecdotally that even young people in more extreme circumstances such as homelessness, usually have smartphones. http://kingstonux.blogspot.co.uk/2013/10/youthgroups.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 Research into technology found an easy-to-use text messaging application, in which appointments are supplemented by the patients simple mood monitoring. Each day the patient receives a text giving five choices, A through E, and texts back the letter that best represents their mood. When the patient next visits the doctors, the doctor already knows how the patient has been feeling since their last meeting. The application aims to support and extend the time between appointments. We also wanted data to be captured, understood and used meaningfully, and made the following observations from this research: The discretion and lack of intrusiveness of this self-monitoring system chimed with our goals and objectives. One user said, It is a simple thing, but because it is so regular it gives you a structure and the strong impression that someone at the other end is taking your data. providing a window into mental illness can lead to early intervention and diagnosis. the need for data to go somewhere meaningful may be very important http://kingstonux.blogspot.co.uk/2013/10/ monitoring-mental-health-with-technology.html comfort can be gained from fitting into existing behaviours small effort every day has a positive impact monitoring your mood daily is a good foundation for selfmanagement of mental health gathering data over time and being able to communicate it to a mental health professional is powerful 7

SPRINT 1 Evaluating existing applications Our research included a review of competing products to evaluate current best/worst practice and visual styles. Moodboards were created to reflect patterns in the web and mobile marketplace. http://kingstonux.blogspot.co.uk/2013/10/ researching-market-mental-health-and.html It was noted that in social media apps used by teenagers, visual style tended to be simple and functional, while wellbeing apps were generally dull and uninspiring, often referencing science and new age therapies. The interface of one app called optimism had a brighter and more contemporary look, but was still felt relatively cool and unengaging. This evaluation encouraged the team that following a more creative approach would differentiate our product. http://kingstonux.blogspot.co.uk/2013/11/visualstyle-research.html Auditing technology The team felt that mobile technology was the best fit with our teenage target audience because mobile phones: are permeating society 9 out of 10 teenagers in the UK own one are private teenagers are moving away from public social networks to private messaging apps (so they can self-monitor without the worry of sharing sensitive information with anyone other than trusted contacts) fit within the scope of existing teenage behaviour are kept close at hand every day. This decision was also supported by our research into teenage app usage trends (see Secondary research page 7) which found that privacy and closed sharing were important. Desktop NeuroSky Our brief required us to explore the potential for incorporating technology such as brain-computer interfaces (BCI). One example is the NeuroSky helmet, which reads the users EEG brain waves via a sensor clipped onto the ear lobe and another touching the forehead. Software is used to translate the brain activity into meaningful data, the two main measurements being attention and meditation. NeuroSky is a useful, affordable tool that taps into the users biological changes, a measurement that cannot be taken by simply asking a user. This could be especially relevant for researching an area that people are likely to be uncomfortable talking about. We decided to use it for concept testing and hoped the data produced would help us identify which interactions best engage our user group. An overview was made of the relevant and applicable NeuroSky applications. These were considered against our goals and constraints and ranked accordingly. The process DIGITAL STUDIO PRACTICE | MODULE CODE C17810 led us to choose the Meditation Journal, which tracks the users meditation, attention and brainwave recordings and extrapolates data into charts and visualisations. Technological deliverables http://kingstonux.blogspot.co.uk/2013/10/ neurosky-technical-audit-v1.html http://kingstonux.blogspot.co.uk/2013/10/whatis-best-neurosky-app-for-testing.html Ideally, we would have preferred our final prototype to be a fullyfunctioning mobile app, but due to limited coding experience within the team we made use instead of low-tech solutions to create our deliverables: Mobile NeuroSky a simulated paper prototype from the concepting phase wireframes demonstrating UI, information design and interaction a mock-up video of a functioning prototype. Our first, desktop NeuroSky helmet was faulty and had to be replaced with a mobile version (desktop out of stock). The functionality is basically the same but we had to look again at applications as the Meditation Journal works with desktop only. We chose the NeuroSky Visualizer for our user testing because, although there is no recording functionality, it is easy to read the measures for relaxation and attention, our two main focuses. http://kingstonux.blogspot.co.uk/2013/10/ technological-deliverables.html http://kingstonux.blogspot.co.uk/2014/01/ revisiting-neurosky-new-mobile-approach.html 8

SPRINT 1 Creating a design concept We wanted to build our design concept around a visualisation of the users mental wellbeing. Discussion of art therapy led us to the view that inputting data should be a more hands-on, creative activity than ticking boxes. It was felt that a spidergraph-based interface would be intuitive and enable users to create unique and attractive visualisations, which could be kept private or shared. In line with our goals and objectives, it was important that the user identify areas of concern and set mood measures themselves. With benchmarking to show when they feel at their best and worst, the visualisations would reveal patterns in mood data and how the user is coping. The patterns might also reveal relationships between user concerns, with one mood impacting on another, for example. A journal facility would enable users to connect their moods with events and help to identify potential triggers. As well as developing selfawareness, there would also be a positive gain from engaging in creative activity. Each visualisation could be seen as a digital artefact representing a unique moment in time for the user and, collectively over time, would express a unique picture of them. Brainstorming a name The design concept is based on an individuals point of reference, providing a personal measure of self and enablling private reflection. It was also noted that a common characteristic of the user group is to seek independence from the support of parents/carers. The design concept therefore became the inspiration for the name, meMap. http://kingstonux.blogspot.co.uk/2013/10/initialproject-name-options-project.html Brand logos were researched and eight meMap concept logos created. With our limited testing ability, we asked children of a team member to rank their preferences, and this canvassing conincided with team consensus. The chosen logo uses curved, friendly, sans serif typography with a magnifying glass motif to represent the focus on selfmonitoring. http://kingstonux.blogspot.co.uk/2013/12/ memap-logo-designs.html http://kingstonux.blogspot.co.uk/2013/10/logotypes-selection.html DIGITAL STUDIO PRACTICE | MODULE CODE DMM417 9

SPRINT 1 Developing personas Three personas aged 13-17 were constructed, defined by intensity of focus on mental health and potential interaction with the application high (eg. frequent use, exporting weekly reports, online sharing), medium, and low (eg. motivated by curiosity and fun). Because of research limitations for this age group, we could not verify the personas. So we constructed lightweight models according to background, motivation, frustrations, and a brief day in the life. Brands were added to help define personality further. http://kingstonux.blogspot.co.uk/2013/10/take-aways-from-tues-22-octworkshop.html http://kingstonux.blogspot.co.uk/2013/10/initial-personaprofile.html http://kingstonux.blogspot.co.uk/2013/10/persona-profiles.html http://kingstonux.blogspot.co.uk/2013/11/personasv2.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 10

PERSONA 3 // Motivations: Background Perfectly healthy intrigued by self discovery. Curious and creative. Mental health not a term she would use when reflecting on her emotions Wants to make sure shes part of her group Likes to share secrets with friends Likes making videos with her friends Education environment A student at single sex, public school. Mixed ability favouring the Arts Frustrations: Parents wanting to know everything. Not meeting any boys because shes at an all girls school. Dad not allowing her to wear make-up Family environment Lives at home with both parents and 2 older brothers. Both parents work Mum works part-time. Dad works from home a lot both brothers are at a similar school Day in the life Lisa age 13 Home responsibilities Keep room tidy keep on top of all homework Lisa loves her iPad, constantly checking and replying to countless Kik messages. Then its on to instagram to see how many likes she has on the latest series of photos she has uploaded. Lisa attends a local private school and she is happy and liked there. She has many good friends, and joins in as many after school club activities as she can. She particularly likes football and Art club. Focus on mental health Low Developing personas Technology Smart phone, ipad and a laptop technology knowledge At home, Lisa has a good friend who lives nearby they regularly visit one another, and often make videos on the iPad of themselves dancing and messing around. PERSONA 2 // Motivations: responsibilities Wants to prove to himself that hes doing ok Wants to stop certain people/events getting to him Wants to get a good job Background Anxious about specific events, gets stressed at times Frustrations: environmental stresses Education environment Recently finished school, unemployed some friends working others looking towards university. Left school with 6 GCSEs. No real income social networking Family environment Lives at home with mum and younger sister. Single parent household. Mum works. Father lives with new partner His parents constantly asking about his search for work Not being able to keep up with his friends financially Constant battle to motivate himself for his job search Day in the life Michael My friends are the best! age 17 Focus on mental health Medium Michael has left school and is currently unemployed. He wants to work, but wants to get a job he can feel proud of. Most of his friends are working, or preparing for University. His frequent interviews at the job centre have produced nothing. He lives with his mum and sister, and although his mum is very supportive, he finds her constant questioning of his daily activities wearing. When he visits his dad he gets more of the same questioning though this doesnt feel as supportive. Though his mum helps out, Michael struggles to keep up with his friends financially and often has to take a back-seat if they go shopping. Home responsibilities No specific household chores Technology Owns smart phone and laptop and xbox technology knowledge responsibilities social networking environmental stresses I just want to find a good job. PERSONA 1 // Motivations: Wants to help himself with his depression Wants to feel some relief from symptoms Needs to collect and collate data about well-being and send to counsellor Frustrations: His parents constant questions about his feelings Not having friends to talk to Feeling that nothing can help Day in the life Harry age 14 Focus on mental health High Background Clinically diagnosed depressed Sees counsellor once a month Education environment Urban, state school, high achiever Family environment Middle child, 2 parent household, both parents work Home responsibilities Walk little brother to school, load dishwasher, tidy room Technology Owns smart phone for home use, cheap one for school. Family has a shared laptop As a high-achiever at school, Harry has been moved to the top-setsand as a result he has been separated from his early school friends. He doesnt connect with his new class-mates, and feels incredibly lonely all day. At home, he is conscientious with his homework, but looks to complete it quickly so he can play x-box. Though he enjoys the games he is alienated from the online chat as he has missed out on the days events. He has been aware of his depressed now for approx 6 months. A teacher at school first commented on his sadness, and referred him to the school counsellor. technology knowledge responsibilities social networking environmental stresses This isnt going to help me nothing can. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 11

SPRINT 1 Sad Angry Stressed Ill just make these up... Input symptom measures Tired Teary That looks creative! Popup tutorial Day 1 Download app App store Register account Wow, thats beautiful! Homepage Spider graph formated Adjust symptom dials to reflect current state Spider graph reforms Export visual report Popup tutorial Ill show my firends Animated spider graph Day 2 Share on user network Day 3 DIGITAL STUDIO PRACTICE | MODULE CODE C17810 Modelling user journeys: 1 Experience models were used to help translate personas into user journeys. These conceived a primary use case for each persona, chunking it into stages, adding a range of emotions, and outlining opportunities for the application. From these storyboards, we were able to identify where the application could add value to each persons journey. http://kingstonux.blogspot.co.uk/2013/11/experience-models.html http:// kingstonux.blogspot.co.uk/2013/10/user-journeys.html 12

SPRINT 1 ONBOARDING ON-BOARDING REVIEW / REPORT CREATE r cto Do its Vis tw be ts en tm oin pp tor oc na ee oD nt I feel empowered to get better im an o ati th wi COMMITMENT on ay tod pp ENTRY POINTS tom ce sa en Op NHS documentation tan ins Professional recommendation mp sy ew an to ed tes ea lax re Cr Social recommendations (forums / social media) im er ds ad Third Party Website nd Se I can understand my feelings s: This user journey follows interaction with the app of our persona Harry during an average day. els lev on w ati vie te lax ar re sta nd od low ale d mo nc an nt si re ms ce ur xa tan tc low ne ins Se ts ee t3 se tw d els las be an l lev ws oo es od vie ur ch mo Re as rs s fte me u xio an Google t sin cu dis to on cti ne on sc er ov sc Di els Fe Modelling user journeys: 2 the sa bu nt sta tho d C O N S I D E R AT I O N ACT I O N ne te This is quite engaging C o ntext ph te sta ra d s bu rg ide the o mo on nt sp re pp s om es ng pt ym ts ur ra tc na lec ha n lc I can see clear behaviour patterns Ge Se e Op Se ra vio ha sio es pr de be al d nic an cli ht th ug wi I can set my own goals and variables te d se no ise od dv mo ra cto ag Di emotion re ur tc Se Do R E A L I S AT I O N S c h o o l exa m i n at i o n s time DIGITAL STUDIO PRACTICE | MODULE CODE C17810 13

ON-BOARDING CREATE REVIEW / REPORT SPRINT 1 START / END Download app PAGE Open app MULTIPLE PAGES Select symptoms Homepage TIME USERS MOOD STATE Create new [instance] Review Set current state Confirm symptoms Select review period Instance view Export report Generate spider graph View spider graph Calendar view Customise colours Animate spider graph Planning task flows This task model shows the flow of interactions within vertical swim lanes to distinguish the three phases of the user journey; from initial log-in during on-boarding, to exporting a meMap report. http://kingstonux.blogspot.co.uk/2013/11/takeaways-from-tue-29-oct-workshop.html http:// kingstonux.blogspot.co.uk/2013/11/task-flowand-user-journey-vs-2.html Email to Doctor / friend DIGITAL STUDIO PRACTICE | MODULE CODE C17810 14

SPRINT 1 Sketching concepts and ideas Having solidified our art therapy concept and objectives through research, we spent some team workshops mapping out the apps UI and interactions in sketches. http://kingstonux.blogspot.co.uk/2013/11/takeaways-from-tue-29-oct-workshop.html http://kingstonux.blogspot.co.uk/2013/11/takeaways-from-tue-5th-nov-workshop_9.html http://kingstonux.blogspot.co.uk/2013/12/takeaways-from-tues-10-dec-workshop.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 15

SPRINT 1 http://kingstonux. blogspot. co.uk/2013/11/takeaways-from-tue-29oct-workshop.html Sketching concepts and ideas Building paper Having solidified our art therapy concept and objectives through prototypes research, we spent some team workshops mapping out the apps UI DIGITAL STUDIO PRACTICE | MODULE CODE C17810 IMAGE: Creating the POP screen frames 16

SPRINT 1 Building paper prototypes An initial prototype was built using an iOS app called POP (Prototyping on Paper), which simulates a functioning user interface by linking photographs of paper sketches. Using POP enabled us to test two tasks in a user journey creating a new account and creating a new entry. http://kingstonux.blogspot.co.uk/2013/11/ prototype-1-paper-new-account-and-new.html A second paper prototype was expanded to include all screens in our site map. User tasks included: creating accounts creating new maps finding patterns in historical maps sharing maps adjusting settings. Questions that emerged from the second prototype concerned: reversability - which actions can be cancelled and which screens enable the user to go back? actions - what are these on each page? functionalities - in what ways can we personalise the visualisations? http://kingstonux.blogspot.co.uk/2013/11/ prototype-v2.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 17

SPRINT 1 Proof of concepts One of the main focuses of our design concept was the method of inputting data for tracking wellbeing, as users would need to rank their emotions on some kind of scale. Our first paper prototype used sliders as the input method. But our design concept was based on the idea of an interface that was therapeutic in itself, in which users interact with the spidergraph the chart allows users to enter and manipulate multivariate data on a single axis, so that when all values are plotted, it looks like a spiders web. The two options, sliders and spidergraph, are shown in the screenshots. They can be tested out at http://evansjx.com/dmkPOC/slidersTest.html (sliders) and http://evansjx.com/dmkPOC/test. html (spidergraph) To test our proposition that users would be more engaged and satisfied by the spidergraph inputting method than the sliders, we prototyped both and decided to preference test them with three teenagers (see NeuroSky testing page 25). http://kingstonux.blogspot.co.uk/2014/01/ testing-prototypes.html To prototype this concept, a jQuery plugin was found on GitHub that graphs radar charts using HTML5s canvas functionality. The code was amended and more added to bring our interactive spidergraph vision to life. Using HTML5 enabled the prototype to run in-browser on desktops, tablets, and iPhones. This gave flexibility in how we could administer tests and how users could access the finished product. http://kingstonux.blogspot.co.uk/2014/01/ prototype-proof-of-concept-for.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 18

SPRINT 2 Information architecture site map Iteration 1 Iteration 2 This frst iteration of the site map included slider-based data input screens because, at this point, we were unconfident of being able to prototype the spidergraph method. This iteration was also a learning experience as we incorrectly showed certain filters and actions as screens. In iteration 2 we replaced the slider method with the spidergraph, which reduced the number of screens overall. The meMap App is organised into sections: signing up, creating a new map, global settings, finding map patterns, sharing meMaps and customise settings. http://kingstonux.blogspot.co.uk/2013/11/draftsite-map.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 Signing up A quick five-screen on-boarding phase: creating account, selecting mood measures, confirming the selection and setting targets. It is only necessary to complete this phase once; thereafter, by default, the user journey will start at the homepage. Creating a new meMap This comprises a short journal entry, choosing a mood value (smiley face icon) for each day, setting the spidergraph mood values and personalising the graphic output with creative filters via Customise Settings. The result is a visual artefact a meMap. chronological order by day, by week or by month. Users can review a single entry or a series of entries as an animated report. Global settings This is nested in the top navigation to make global changes to the users account including adding contacts for sharing meMaps. Finding map patterns This is the users meMap history, which lists past entries is Sharing maps This is optional. Users can share with parents, health practitioners and friends. Additional email addresses can be added both here and in the settings menu. http://kingstonux.blogspot.co.uk/2014/01/ sitemap-v4.html 19

SPRINT 2 Information architecture wireframes Iteration 1 As wireframing was shared among the group, an OmniGraffle template and stencil set called Konigi was used for consistency and to design the required assets, such as buttons, text fields, font weights and sizes, icons, and so on. http://kingstonux.blogspot.co.uk/2013/11/ omnigraffle-wireframe-stencils-and.html The wireframe page template included styles for the document title, annotated gestures and interactions, and authoring. Each asset was designed in Illustrator, rasterised in Photoshop and placed on an OmniGraffle stencil sheet. The elements were then dropped and dragged into the template, creating speedy and consistent wireframes. http://kingstonux.blogspot.co.uk/2013/11/ wireframing-draft-new-entry-frame.html http://kingstonux.blogspot.co.uk/2013/11/wirefrarme-1.html http://kingstonux.blogspot.co.uk/2013/11/memap-settings-v1.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 20

SPRINT 2 Written content We thought it essential for the app to avoid negativity and have an inspiring tone overall, so we used positive language and mood benchmarkers throughout, with friendly face icons instead of good/ bad day. To connect with our target audience as much as possible, we also ensured that wording was consistent with teenage vocabulary (see Primary research page 6). Visual design iteration: 1 Iteration 1 The initial visual design aesthetic was simple and strong, with a dark background to emphasise the colourful aspect of the maps. The designs for all the wireframes were then created following this style. A style based on watercolours on a circular grid was also created, which the group felt was very engaging and would work well with animation. However, because we werent sure how wed implement this style in a prototype, it was put aside for the moment. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 http://kingstonux.blogspot.co.uk/2013/12/map-art-style-watercolour.html http://kingstonux.blogspot.co.uk/2013/12/visual-assets.html http://kingstonux.blogspot. co.uk/2014/01/visual-designs-sign-up.html http://kingstonux.blogspot.co.uk/2014/01/visualdesigns-settings.html http://kingstonux.blogspot.co.uk/2014/01/visual-designs-home-new-map. html http://kingstonux.blogspot.co.uk/2014/01/visual-designs-find-patterns_7 html http://kingstonux.blogspot.co.uk/2014/01/visual-designs-choose-dates.html http://kingstonux. blogspot.co.uk/2014/01/visual-designs-shared-maps.html 21

SPRINT 2 Visual design iteration: 2 Iteration 2 Reviewing the visual designs, it was noted that the modern, flat design scheme did not communicate the apps creative functionality and its connection with art therapy. The scheme was reworked to introduce a looser, freehand approach, which was intended to be friendlier and more personal. It was also imperative that the meMap itself was beautiful. Users needed to enjoy the tactile interactions and the visual output for the process to be successfully therapeutic and attract repeated use. We created textured filters to generate organic, painterly meMaps. http://kingstonux.blogspot.co.uk/2014/01/ freehand-design-scheme.html http://kingstonux.blogspot.co.uk/2014/01/ freehand-design-2.html We also realised in this review that our UI controls were inconsistent and dated. To ensure an up-to-date experience and design, a list of iOS controls and usage was compiled from Apples guidelines on its developer site. These were then incorporated into new assets and a prototype. http://kingstonux.blogspot.co.uk/2014/01/ioscontrols.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 22

SPRINT 2 Visual design iteration: 2 DIGITAL STUDIO PRACTICE | MODULE CODE C17810 23

SPRINT 2 Visual assets and style guide The final design iteration was based on a warm and unintimidating visual language, with hand-drawn, lo-fi interactions and buttons. This was an important connection with the art therapy idea, aiming to make visualised output feel like personal expression as much as possible. Juxtaposed with iOS icons, this formed a fresh, friendly and playful interface. Visual assets Style guide Design assets were produced for developing the final prototype. A set of bright paint daubs, corresponding with the map colours, refers to current mood scores. When the user taps the settings menu, a translucent window slides across, blurring the content below. The user can then customise the map by choosing from six colour-ways and six texture filters to create a personalised artwork. Happily, the filter option also gave us the chance to reintroduce the iteration 1 watercolour style. An iteration 1 meMap style guide was produced to: DIGITAL STUDIO PRACTICE | MODULE CODE C17810 describe the concept specify logo use, colour palette, fonts and the naming convention give examples of screen designs. http://kingstonux.blogspot.co.uk/2014/01/styleguide-iteration-1.html 24

SPRINT 2 NeuroSky user testing P1 We wanted to use the NeuroSky EEG helmet in user testing and identified a key objective to be assessing and comparing users emotional engagement with the two different data inputting prototypes sliders vs the interactive spidergraph. We decided to do a quick user test. Participants followed the process of inputting their data using the two different methods and we used the following satisfaction metrics to gauge their emotional involvement: P2 P3 NeuroSky and NeuroSky Visualiser app for measuring participants physiological response to the two prototypes. We hoped that the brain activity data relating to relaxation and attention, together with selfreporting of satisfaction, would give a multifaceted view of emotional reaction. Field notes with observation of verbal and non-verbal behaviours. Post-test satisfaction questionnaires System Usability Scale and Product Reaction Cards. http://kingstonux.blogspot.co.uk/2014/01/qucktesting-plan-of-two-prototype.html http://kingstonux.blogspot.co.uk/2014/01/ satisfaction-metrics-for-prototype.html The Product Reaction Cards elicited all positive terms from all participants, with several chosen by more than one person. Usability also scored highly. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 25

SPRINT 2 Final prototype Our final prototype was a video mock-up which, despite its technological limitations, was reasonably polished and conveyed our design concept and how it would feel to the user. http://kingstonux.blogspot.co.uk/2014/01/failedfinal-prototypes.html http://kingstonux.blogspot.co.uk/2014/01/finalprototype-mock-up-video.html If the video fails to play automatically, follow the link to the blog http://kingstonux.blogspot.co.uk/2014/01/final-prototype-mock-up-video.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 26

EVALUATION Retrospective Considering the project in prototyping, the original retrospect, we can make the aspiration was revisited and following points: met, resulting in an exciting viable product to bring into The project team was very seed funding. cohesive and supportive. Team members shared tasks The team made an error in not while fulfilling their individual clarifying the brief thoroughly assigned roles. at an earlier stage, so our We started with a clear design vision to create a therapeutic and creative way for teenagers to monitor their mental status but evolved our vision based on findings from our primary and secondary research and user testing. Although there was a danger confusion over the client role delayed detailed research into the Atmascape product. Although the project direction stayed on track, this uncertainty created unecessary stress and an unproductive, mid-project hiaitus. The positive outcome was valuable experience in working with clients and of the design vision being negotiating a mutually lost in the mechanics of beneficial solution. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 27