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