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

2. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 http://kingstonux.blogspot.co.uk Jennifer Evans Laurie Johnston Grace Kim David Mitchell Suzy Willis TECHNICAL LEAD VISUAL UX IA LEAD DESIGN LEAD ARTIST PROJECT TEAM 3. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 3 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. 4. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 4 nderstanding of what David + Suzy mmaries of current self ology type (mobile, web) Jen + Suzy e write up / sketch / mixed All tion of goals, users, and David + Grace o 5 scenarios of how to be used Laurie on names David 3 page technical capability up hightlighting specifications, uses, oSky and applicable technological Jen ible testing groups - selection of 1-2 rsue Laurie ssible NeuroSky testing applications - 1-2 applications to purchase and download Jen hical clearance - create roadmap to gaining esearch clearance Jen cope - Outline areas to be addressed in olution Laurie+ Jen + David an plan - Working plan document detailing ion, deliverables and owners Jen ive Brief - Document outling project title, unique ng point, and SWOT analysis David Group Meeting All Tues Oct. 15 Tues Oct. 22 User interviews - Ethnography / contextual inquiry / user interview to gain more insight into target domain and demographic * Possibly with Jazz? All Draft and send out classroom research survey Jen Further exploration of similar applications- diagram describing advantages or short falls of apps on the market Grace Persona exploration - baseline for 3-4 primary personas David Persona completion - solid 3-4 personas describing main user types David Initial Use Case Construction - hero journey + storyboard Suzy Task flow diagram Suzy Experience Models- sketch potential use cases for each persona type, point out room for meMap opportunity in each case Jen Design Art therapy concept- 5 one page summaries of art therapy creations (or variations on a single therapy creation) to bring to user testing including an overview, sketching, and a quick storyboard David Logo exploration David Visual design templates for personas Suzy Initial content copy - proposed headers and body content for application hero user journey Suzy Grace les scope Jen ation and "create new Jen Laurie ct. 29 Sun Nov. 2 Tues Nov. 5 DELIVERABLE OWNER 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, self- monitoring product that engages their creativity. http://kingstonux.blogspot.co.uk/2013/10/initial- project-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 mock- up video was felt to be the best method of communicating the 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_IrfPdFM1NlQ3Qk5rcG96N- WpQTFRBUW50eEE&usp=sharing Plan 2 https://docs.google.com/spreadsheet/ ccc?key=0ApLf1P9_IrfPdEZuNzd0VlBGY1BaY- mZFdDlrWGpqOHc&usp=sharing DIGITAL STUDIO PRACTICE | MODULE CODE C17810 4 Document wide icon to link to each pages assets 5. 5 Our interpretation of the brief was to develop the ideas of self- monitoring 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: develop a non-judgmental tool designed for teenagers, rather than adults empower teenagers to define and take control of their mental wellbeing encourage self-responsibility facilitate communication and conversation about mental health to combat stigma attached to monitoring and diagnosis. Identifying aims and objectives In discussion of what would make our product successful, it was agreed that the main aim was self-monitoring. So success was defined as: increasing users self-awareness and insight, rather than diagnosis or specific problem-solving creating opportunities for evaluating mental health safely enabling users to look outwards for community and support. We were then able to define user goals: help me understand, learn about and express what Im feeling in a safe and creative way help me identify triggers that affect my mood help me work out and meet my own mental health goals and parameters help me see the growth of my awareness and understanding help me create something that depicts mental health in a positive way. Brainstorming Some concepts were identified for exploration: therapeutic use and value of visualisation and creative artefacts visual representation of mental health that is easy to understand reaching boundaries that prompt self-help creating a community in which self-created art is shared. http://kingstonux.blogspot.co.uk/2013/10/take- aways-from-tues-15-oct-workshop.html 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. SPRINT 1 Interpreting the brief DIGITAL STUDIO PRACTICE | MODULE CODE C17810 6. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 6 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/raw- classroom-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) SPRINT 1 Primary research 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 7. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 7 SPRINT 1 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. First- person stories were also found through mental health charities and services such as Young Minds and Right Here. http://kingstonux.blogspot.co.uk/2013/10/user- stories-research.html We also contacted three London- based 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/youth- groups.html 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. 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. We also wanted data to be captured, understood and used meaningfully, and made the following observations from this research: 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 self- management of mental health the need for data to go somewhere meaningful may be very important gathering data over time and being able to communicate it to a mental health professional is powerful providing a window into mental illness can lead to early intervention and diagnosis. http://kingstonux.blogspot.co.uk/2013/10/ monitoring-mental-health-with-technology.html SPRINT 1 IMAGES: Cerebal Hut by artist, Guvenc Ozel 8. 8 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/visual- style-research.html DIGITAL STUDIO PRACTICE | MODULE CODE C17810 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 led us to choose the Meditation Journal, which tracks the users meditation, attention and brainwave recordings and extrapolates data into charts and visualisations. http://kingstonux.blogspot.co.uk/2013/10/ neurosky-technical-audit-v1.html http://kingstonux.blogspot.co.uk/2013/10/what- is-best-neurosky-app-for-testing.html Mobile NeuroSky 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/2014/01/ revisiting-neurosky-new-mobile-approach.html SPRINT 1 Technological deliverables Ideally, we would have preferred our final prototype to be a fully- functioning mobile app, but due to limited coding experience within the team we made use instead of low-tech solutions to create our deliverables: a simulated paper prototype from the concepting phase wireframes demonstrating UI, information design and interaction a mock-up video of a functioning prototype. http://kingstonux.blogspot.co.uk/2013/10/ technological-deliverables.html 9. 9DIGITAL STUDIO PRACTICE | MODULE CODE DMM417 SPRINT 1 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 self- awareness, 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. 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. 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/initial- project-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 self- monitoring. http://kingstonux.blogspot.co.uk/2013/12/ memap-logo-designs.html http://kingstonux.blogspot.co.uk/2013/10/logo- types-selection.html 10. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 10 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-oct- workshop.html http://kingstonux.blogspot.co.uk/2013/10/initial-persona- profile.html http://kingstonux.blogspot.co.uk/2013/10/persona-profiles.html http://kingstonux.blogspot.co.uk/2013/11/personasv2.html 11. 11 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 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. 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 Focus on mental health High age 14Harry social networking technology knowledge responsibilities environmental stresses This isnt going to help me nothing can. PERSONA 2 // Motivations: Wants to prove to himself that hes doing ok Wants to stop certain people/events getting to him Wants to get a good job Frustrations: 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 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. Background Anxious about specific events, gets stressed at times Education environment Recently finished school, unemployed some friends working others looking towards university. Left school with 6 GCSEs. No real income Family environment Lives at home with mum and younger sister. Single par- ent household. Mum works. Father lives with new partner Home responsibilities No specific household chores Technology Owns smart phone and laptop and xbox Focus on mental health Medium age 17Michael social networking technology knowledge responsibilities environmental stresses I just want to find a good job. PERSONA 3 // Motivations: Wants to make sure shes part of her group Likes to share secrets with friends Likes making videos with her friends 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 Day in the life 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. 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. Background Perfectly healthy intrigued by self discovery. Curious and creative. Mental health not a term she would use when reflecting on her emotions Education environment A student at single sex, public school. Mixed ability favouring the Arts 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 Home responsibilities Keep room tidy keep on top of all homework Technology Smart phone, ipad and a laptop Focus on mental health Low age 13Lisa social networking technology knowledge responsibilities environmental stresses My friends are the best! Developing personas DIGITAL STUDIO PRACTICE | MODULE CODE C17810 12. 12 Register account Download app Day 3 HomepageDay 1 App store Day 2 That looks creative! Export visual report Animated spider graph Adjust symptom dials to reflect current state Share on user network Spider graph reforms Teary Stressed Sad Angry Tired Input symptom measures Ill just make these up... Ill show my firends Spider graph formated Wow, thats beautiful! Pop- up tutorial Pop- up tutorial 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 Modelling user journeys: 1 DIGITAL STUDIO PRACTICE | MODULE CODE C17810 SPRINT 1 13. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 13 SPRINT 1 ON-BOARDINGONBOARDING CREATE REVIEW / REPORT emotion time C ontext S ch ool examin atio n s I can understand my feelings I feel empowered to get better I can set my own goals and variables ENTRY P O INTS ACTI ON CONSI D ER ATI ON COMMI TMENT Google Third Party Website Social recommendations (forums / social media) Professional recommendation NHS documentation RE AL ISATIO N I can see clear behaviour patterns This is quite engaging VisitsDoctortodiscusinterim betweenappointments Send animationtoDoctor Discoversconnectionbetweenexamsand low relaxationlevels Reviewslast3instancesincalendarview Setcurrentmood state Feelsanxious:addsrelaxedtosymptom measuresand setslow Createsanew instancewithtodaysmood levels Opensapp onthebusafterschool Generatespidergraph Setcurrentmood state Openapp onthebus Selectsymptoms Doctoradvised thoughtand behavioralchanges Diagnosed withclinicaldepression Setcurrentmood state Modelling user journeys: 2 This user journey follows interaction with the app of our persona Harry during an average day. 14. 14DIGITAL STUDIO PRACTICE | MODULE CODE C17810 SPRINT 1ON-BOARDING Download app Open app Select symptoms Confirm symptoms Set current state Generate spider graph View spider graph Customise colours Homepage ReviewCreate new [instance] Instance view Calendar view Export report Animate spider graph Email to Doctor / friend Select review period START / END PAGE TIME MULTIPLE PAGES USERS MOOD STATE REVIEW / REPORTCREATE 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/take- aways-from-tue-29-oct-workshop.html http:// kingstonux.blogspot.co.uk/2013/11/task-flow- and-user-journey-vs-2.html 15. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 15 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/take- aways-from-tue-29-oct-workshop.html http://kingstonux.blogspot.co.uk/2013/11/take- aways-from-tue-5th-nov-workshop_9.html http://kingstonux.blogspot.co.uk/2013/12/take- aways-from-tues-10-dec-workshop.html 16. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 16 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 http://kingstonux. blogspot. co.uk/2013/11/take- aways-from-tue-29- oct-workshop.html Building paper prototypes SPRINT 1 IMAGE: Creating the POP screen frames 17. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 17 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 Building paper prototypes 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 SPRINT 1 18. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 18 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. 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 Proof of concepts 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 SPRINT 1 19. 19DIGITAL STUDIO PRACTICE | MODULE CODE C17810 Iteration 1 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. http://kingstonux.blogspot.co.uk/2013/11/draft- site-map.html Iteration 2 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. 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 Information architecture site map DIGITAL STUDIO PRACTICE | MODULE CODE C17810 19 SPRINT 2 values and personalising the graphic output with creative filters via Customise Settings. The result is a visual artefact a meMap. 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 chronological order by day, by week or by month. Users can review a single entry or a series of entries as an animated report. 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 20. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 20 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/wire- frarme-1.html http://kingstonux.blogspot.co.uk/2013/11/me- map-settings-v1.html Information architecture wireframes SPRINT 2 21. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 21 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. Visual design iteration: 1 SPRINT 2 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). Written content 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/visual- designs-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 22. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 22 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/ios- controls.html Visual design iteration: 2 SPRINT 2 23. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 23 Visual design iteration: 2 SPRINT 2 24. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 24 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 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. Visual assets and style guide Style guide An iteration 1 meMap style guide was produced to: 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/style- guide-iteration-1.html SPRINT 2 25. 25DIGITAL STUDIO PRACTICE | MODULE CODE C17810 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: 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 self- reporting 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/quck- testing-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. NeuroSky user testing SPRINT 2 P1 P2 P3 26. 26DIGITAL STUDIO PRACTICE | MODULE CODE C17810 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/failed- final-prototypes.html http://kingstonux.blogspot.co.uk/2014/01/final- prototype-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 27. DIGITAL STUDIO PRACTICE | MODULE CODE C17810 27 EVALUATION Retrospective Considering the project in retrospect, we can make the following points: The project team was very cohesive and supportive. Team members shared tasks while fulfilling their individual assigned roles. 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 of the design vision being lost in the mechanics of prototyping, the original aspiration was revisited and met, resulting in an exciting viable product to bring into seed funding. The team made an error in not clarifying the brief thoroughly at an earlier stage, so our 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 negotiating a mutually beneficial solution.