meMap App Design Project

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


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
they’re 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 individual’s own point of
reference, and focusing on their
unique and specific needs, meMap
provides a personal measure.
MeMap doesn’t evaluate, judge or
give advice to the individual, it is an
application for the user.


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
member’s 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 group’s 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 page’s 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 I’m 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.


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
school’s Wellbeing Week, which gave
a snapshot of this group’s 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


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 BBC’s 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


Research into technology found
an easy-to-use text messaging
application, in which appointments
are supplemented by the patient’s
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 doctor’s,
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

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.
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 user’s 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 user’s 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 user’s
meditation, attention and brainwave
recordings and extrapolates data
into charts and visualisations.

Technological deliverables

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.

technological-deliverables.html

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 user’s 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 individual’s 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.
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


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 she’s 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 she’s 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 it’s 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 he’s 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

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 doesn’t
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.

No specific household chores
Technology
Owns smart phone and laptop and xbox

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
Urban, state school, high achiever
Family environment
Middle child, 2 parent household, both parents work
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-sets’and as
a result he has been separated from his early school friends. He doesn’t
“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 day’s 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.

responsibilities
social networking
environmental
stresses

“This isn’t going to
help me – nothing can.”


11

SPRINT 1

Sad

Angry

Stressed
I’ll just
make these
up...

Input symptom
measures

Tired

Teary

That looks
creative!
Popup
tutorial

Day 1

Download app

App store

Register
account

Wow,
that’s
beautiful!

Homepage

Spider graph
formated

Adjust
symptom dials
to reflect current
state

Spider graph
reforms

Export visual
report
Popup
tutorial
I’ll show my
firends

Animated spider
graph
Day 2

Share on user
network

Day 3


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 person’s 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


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


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 app’s 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


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 app’s UI


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.
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?
prototype-v2.html


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 spider’s
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).
testing-prototypes.html

To prototype this concept, a jQuery
plugin was found on GitHub that
graphs radar charts using HTML5’s
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.
prototype-proof-of-concept-for.html


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


•

•

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 user’s account
including adding contacts for
sharing meMaps.

•

Finding map patterns
This is the user’s 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.

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


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 weren’t sure
how we’d implement this style in a
prototype, it was put aside for the
moment.


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
app’s 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.
freehand-design-scheme.html
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 Apple’s guidelines on its
developer site. These were then
incorporated into new assets and a
prototype.
http://kingstonux.blogspot.co.uk/2014/01/ioscontrols.html


22

SPRINT 2
Visual design iteration: 2


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:


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


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


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.


27

meMap App Design Project

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to meMap App Design Project

Similar to meMap App Design Project (20)

Recently uploaded

Recently uploaded (14)

meMap App Design Project