Dsp me map-report

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

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

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

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
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, 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 group’s 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
Document wide icon to
link to each page’s assets

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 I’m 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

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

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 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. 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 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.
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.
monitoring-mental-health-with-technology.html
SPRINT 1
IMAGES: Cerebal Hut by artist, Guvenc Ozel

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.
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
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.
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.
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.
technological-deliverables.html

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 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.
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/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.
memap-logo-designs.html
http://kingstonux.blogspot.co.uk/2013/10/logo-
types-selection.html

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
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-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.
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 isn’t going to
help me – nothing can.”
PERSONA 2 //
Motivations:
• 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
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 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.
Background
Anxious about specific events, gets stressed at times
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
No specific household chores
Technology
Owns smart phone and laptop and xbox
Focus on mental health Medium
age 17Michael
social networking
responsibilities
environmental
stresses
“I just want to find a
good job.”
PERSONA 3 //
Motivations:
• Wants to make sure she’s 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 she’s 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 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.
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
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
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
responsibilities
environmental
stresses
“My friends are
the best!”
Developing personas

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
I’ll just
make these
up...
I’ll show my
firends
Spider graph
formated
Wow,
that’s
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 person’s 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
SPRINT 1

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:adds‘relaxed’tosymptom
measuresand
setslow
Createsanew
instancewithtoday’smood
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.

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.
aways-from-tue-29-oct-workshop.html http://
kingstonux.blogspot.co.uk/2013/11/task-flow-
and-user-journey-vs-2.html

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.
aways-from-tue-29-oct-workshop.html
aways-from-tue-5th-nov-workshop_9.html
aways-from-tues-10-dec-workshop.html

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

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

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.
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
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).
testing-prototypes.html
SPRINT 1

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
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 user’s account
including adding contacts for
sharing meMaps.
• Finding map patterns
This is the user’s 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.
sitemap-v4.html

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/wire-
frarme-1.html
http://kingstonux.blogspot.co.uk/2013/11/me-
map-settings-v1.html
Information
architecture –
wireframes
SPRINT 2

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

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/ios-
controls.html
Visual design
iteration: 2
SPRINT 2

Visual design iteration: 2
SPRINT 2

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

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

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

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.

Dsp me map-report

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (14)

En vedette

En vedette (16)

Similaire à Dsp me map-report

Similaire à Dsp me map-report (20)

Dernier

Dernier (20)

Dsp me map-report