YourSp@ce

Contents
3 What’s the problem?
4 Why is this a problem?
5 How much of a problem? Survey.
7 What’s already being done?

8 Case studies/competitors

12 Interviews
14 User personas
15 User mapping/journeys
17 Site map

19 Initial layout draft

21 Initial wireframes

22 User testing #1

24 Mobile design map

26 Desktop design map
27 Demonstrating responsive design

29 User testing #2
31 Alarm sounds (audio)

32 Final changes

34 Visual design
35 Illustrations
36 Typography
37 Design components

39 Linking back

40 Links to prototypes
3

What’s the problem?

After 30 years, since the introduction of GCSEs, the board of
exams have re-formed and revised GCSE content exams for
the first time. This has led to increased stress of GCSE students,
especially around the exam period.

GCSE students are stressed about exams, and are unsure of how
to stay focused on revision. YourSp@ce is a web application that
provides support to these students, through time management
and mental health networks.

With a focus on time management, and the importance of

regular breaks, YourSp@ce is different to many of the existing
GCSE specific sites (for example, GCSEPod and BBC Bitesize).
It is free, easy to use, and has a personalisation aspect which
is a unique feature to make the user feel more in control of their
workspace.

YourSp@ce combines the content of GCSE websites, with stress

relief applications, such as Headspace and Happify; both of
which are aimed at a larger audience. By tailoring the expe-
rience to GCSE students, we can have a more successful and
relevant learning experience, catered towards the age groups’
needs.
4
Why is this a problem?
Stress can lead to further long term issues, such as depression
and anxiety if not treated. Anxiety leads sufferers to lack any
sense of enjoyment, and from personal experience, I can con-
firm that this statement is true; long-term mental health issues can
stem quickly from stress, and can ultimately ruin your life.
As a GCSE student, I was known to be incredibly stressed. With
external distractions, overworking myself, and feeling pressured,
I suffered drastically more than I should’ve during this period.
This impact of stress has ultimately led me to have many mental
health problems currently.
As well as personal experiences, there’s a plethera of informa-
tion regarding the impact of stress on younger people, and how
students’ grades are suffering due to this sheer amount of stress.
Source: William Farr comprehensive school, http://www.williamfarr.lincs.sch.uk/
news/bbc-news-report-2018/is-mental-health-becoming-a-serious-issue-in-exam-
students
How to help children and teens manage their stress https://
www.apa.org/topics/children-teens-stress
Left unchecked, long-term stress can contribute to a long list of
physical and mental health problems.
It can lead to mental health problems such as anxiety and de-
pression—disorders that are becoming more common in youth.
In a 2018 study, researchers analyzed data from the National
Survey of Mental Health and found that rates of anxiety and de-
pression had increased in kids ages 6 to 17, from 5.4% in 2003
to 8.4% in 2011-12.
Stress can lead to sleep deprivation; Sleep is essential for phys-
ical and emotional well-being. Teens need eight to 10 hours a
night. Sleep needs to be a priority to keep stress in check.
https://www.qaeducation.co.uk/blog/mental-health-gcses
Often, people suffering from anxiety note that little to nothing
seems enjoyable anymore, as there’s something in everything
they do that makes them worry more or their feelings of anxiety
are so overwhelming that they cannot focus on anything else.
https://youngminds.org.uk/find-help/feelings-and-symp-
toms/exam-stress/
“Constantly revising without a break can make you feel emotion-
ally and physically drained, so it’s crucial that you take time to
step back and do something that you enjoy.”
If you’re anxious about the amount of studying you have to do,
try breaking it up into chunks and creating a daily timetable, so
you know what you want to study when.
Make sure you take regular breaks from studying. Your brain
cannot concentrate for hours at a time.
5

How much of a problem? Survey

I planned out a survey to be sent round my friends, family, and
people in social groups. This survey contained questions regard-
ing the impact of GCSE stress, and what advice people would
give regarding revision techniques and stress management.
The aim of this survey was to get an idea of just how severe the
problem is, and what most influences stress.
There was a mixture of ages participating, some of which were
in the GCSE age bracket. The others were people who had com-
pleted their GCSEs already, and were participating in the survey
to offer advice to those who are currently studying. 49 responses
were collected in total.
‘What do you think influenced your stress?’ had a range of
responses, although having collated them, top scorers were
distractions, lack of revision support, and general pressure to do
well (from self, teachers, or others).

What do you think influenced Tally Total What influences stress?

your stress?
14
Distractions (phone, laptop, 12
personal life)
IIII/ IIII/ II
12

Low self esteem 3

III 10

Time management issues 7

IIII/ II 8

Pressure to do well 12
IIII/ IIII/ II 6

Uncertainty / anxiety 6
IIII/ I 4

Lack of revision support 11

IIII/ IIII/ I 2

Lack of motivation 4
IIII 0
Distractions Lack of Anxiety Lack of support Pressure Time Learni ng
Learning environment 4 motivation management environment
IIII issues
6

There’s a general positive skew; more respondents felt higher

levels of stress. Of course, this is only a sample group, but the
major percentage of particpants rated their GCSE stress levels at
a 7 and above. This strengthens the importance of my problem,
as amongst a range of age groups the stress that GCSE exams
caused was above average.
For those who had completed GCSE exams, I asked for advice
and tips for those who are currently studying. As it was an open
question, with text input, there was a range of responses, but
after grouping and totalling up information, the top responses
were: ‘breaks’, ‘splitting up content’, ‘revision timetables’, ‘start
revision early’, and ‘past papers’ as a method of revising.
My final question asked what apps / websites people had used
in the past for stress and anxiety. Over 50% of respondents
hadn’t used any of the listed apps, 33.3% had used Headspace,
which is known as one of the most popular relaxation apps, and
12.5% had used newcomer app Forest within their revision.
This research, as well as the interviews to follow, help me get a
better understanding of competitors and alternatives to my future
solution.
7

What’s already being done?

Something I aim to do is combine the supportive atmosphere of

Competitors / Summary, pros and cons
these mindfulness websites, with the more content driven GCSE Alternatives
websites. The main competitor would be Forest, an app which
Headspace Meditation and mindfulness, popular
lets you time study sessions, and compete with friends if desired, amongst young adults
although it doesn’t have a “break” implementation, which is
something which my survey results concluded was incredibly Forest Works on timing, competitive aspect
beneficial in regards to alleviating stress.
Happify Mindfulness, positive attitudes
Something I’m considering is the introduction of virtual pets,
“Pets, especially dogs and cats, can reduce stress, anxiety, and Engross Timing, set break lengths
depression, ease loneliness, encourage exercise and playful-
ness, and even improve your cardiovascular health. Caring for GCSE Bitesize GCSE content and support articles, but
no collaborative learning or techniques
an animal can help children grow up more secure and active.
Pets also provide valuable companionship for older adults,” so The Student Room For all students (gcse, a levels, uni),
having a digital therapy pet could be beneficial on my webapp. support and revision tips
This will all have to be backed up by interviews and user perso- GCSEPod Subscription needed, but seemingly
nas, however. contains GCSE content

As ‘over 50% of respondents hadn’t used any of the listed apps,

33.3% had used Headspace, 12.5% had used Forest,’ I will look
at these in more detail, as well as The Student Room, which is
one of the most comprehensive revision websites.
8

Competitors / Alternatives

To get a better understanding of the features and design fun-

damentals of current revision and mental wellbeing platforms, I
will look at three competitors in detail. These will be The Student
Room, Headspace, and Forest. Analysing these three sites will
enable me to see how different sites use colour, navigational
features, and generally how they use layout to guide the user.
Main things I need to look out for is the layout of elements, espe-
cially on desktop, as this is a new field of work for me. I’m also
interested to compare action colours across sites and how they
are placed to enhance user navigation.
9

Covers a huge range of issues,

GCSE, A-Level AND University.
Seems very content heavy

Breadcrumbs, unsure if needed

Make note of spacing on web

view; there’s roughly 2 columns
either side of the main content,
The use of orange as a the content itself doesn’t take up
CTA, even within menus / much space to allow for sleek
navigation bars. responsive design

The Student Room

10

Burger menu is sectioned up; if I end up

with a lot of pages I may have to do this
too, but can’t imagine I will. Notice the
size of the type on this screen

Lots of space at sides, filled with

details which can be removed for
smaller screen sizes

Overall layout and design of

headspace is really clean, fresh,
and open. The use of space is
very successful for a calming
Interesting to see they’ve prioritized design.
the “start your journey”, over “try free
free” here. Where am I meant to go
if I don’t want to pay? Prioritizing
money-accessible features is wise
from a business point of view.
Headspace
11

Having reviews on the homepage could be

beneficial; gain more recognition and more
incentive to try the website/app

Strong imagery, and the concept is strong; but

it’s a paid site, which isn’t a great selling point
for younger people, especially those studying
for GCSEs. It’s almost working on a privellege
basis; if your parents can afford this then you
can have a good revision timetable. Isn’t very
user-friendly in my opinion.

Forest
12

Interviews
In order to get more detailed analysis of potential users, an
extensive set of interviews was conducted, with people from
within our existing networks. Within a smaller group of six, we
all conducted an interview with a user who could relate to our
initial ‘problem’. We then would create links between all inter-
views in order to formulate user personas with actual evidence
and research.
For my interview, I spoke to my sister, who is a current GCSE
student. As my website is targetting GCSE students, this was the
perfect user to interview. Some key quotes from this interview:

• “I really wanted to do well so I spent a lot of time on eng-

lish, and basically priotised that... I done hours of work after
school.”
• “I need to pass everything;I want to do well in maths, but I
hate it.”
• “Well, I play a lot of sims, and I’ve been listening to loads
of music.”
• “Yeah, my phone is the biggest problem. If, say for maths,
because I get so bored of it, I’d want to just go on my phone
or watch a youtube video, but if I had my laptop and like I
couldn’t open any other tabs, then I’d obviously pay more
attention to it (the maths). “

T­ he user struggles to prioritise subjects, and so some sort of

planner or list would be useful, to stay on track. They enjoy play-
ing games and listening to music, and find distractions a large
problem. There is also mention of having a “locked” tab on their
laptop. Personal interview transcript
13

Looking at my peers’ interviews, here are some key quotes and

point I picked out from each:

• “How do you manage your anxiety and stress these days?

“...take it easy and do things I like. I paint a lot and watch
films. I do more things which bring me comfort.” (Labiba)
• “Yes, I find myself getting so easily distracted, it is literally
any excuse not to work” (Poppy)
• “Use reminders and lists. Write down when things and due,
tick off once done.” (Immy)
• “Another way of dealing with it I try to give myself breaks,
change my environment, I don’t work well sitting in the same
space for ages.” (Immy)
• “I feel like teachers could do like a little survey each week
anonymously or each month asking how we’re finding each
term,” (Darcie)
• “So new sources of information? Yes! I don’t like it when
there’s nothing new” (Darcie)
• “I’ve used the forest one before but you could pause it or
something so you could go on other apps” (Darcie)
• “Do you use a revision timetable when revising? Yes to
structure my day and try to improve the efficiency of my Transcript of peers’ interviews
revision but creating a timetable was hard as there is so
much content to revise in a short space of time.” (Maya)
• “Are you easily distracted? Yes very because I don’t always
enjoy working especially when it’s a subject I find hard.”
(Maya)
• “listen to music when I feel stressed because it gives me
quiet time to think.” (Maya)
14
User personas
Using the interviews previously, I have created a set of user per-
sonas. The personas are based on evidence found throughout all
six interviews, and use a combination of characteristics to find
the most common types of user.
THE ANXIOUS
Beth
Female, 14, GCSE student studying in
Gloucstershire. She’s very anxious, and
perhaps overly commited to her learning. She
doesn’t have much technical ability, although
London can access basic websites and apps.
Behaviour
Beth feels very stressed, and anxious about her exams. She
feels as if she doesn’t know where to start with revision, and
keeps overworking herself. Beth is convinced she has anxi-
ety, and is self-diagnosed, although her doctor is blaming it
on lack of sleep and general, healthy stress.
Beth does a lot of work outside of school, and usually works
until the early hours. She’s tried breathing exercises, but
feels like they’re a waste of time. She doesn’t give herself a
break, and puts a lot of pressure on herself to do well.
Goals
Beth is already expected to do very well in her exams, but
she needs to make sure she is mentally able to partake in
said exams. Without more support and breaks, she will
ultimately be too stressed to perform her best.
She needs a way to monitor her time spent on school work,
and make sure she’s having a break, as well as stopping
revision early every night to allow for a better nights sleep.
THE DISTRACTED
Harry
Male, 13, student studying for GCSEs in
Berkshire. Like spending time with friends on
Xbox, and isn’t fond of doing school work at
home. He comes from a well-educated family
Berkshire who pressure him to do well. Technical ability
is very strong.
Behaviour
Harry is struggling with working at home on his GCSE work.
There are a lot of distractions at home and he feels like
there’s too much content to learn.
He comes from a well-educated family, and they expect
him to follow their lead, but Harry feels so pressured to do
well. Harry tries to do his school work at home by using
Quizlet and BBC Bitesize, but ultimately thinks there’s too
much content and feels overwhlemed. To combat this stress,
he tends to go on his Xbox and play games instead of
trying to use his half-made revision timetable.
To help with his timings he decided to try the app ‘Forest’,
but soon found out he could easily just get off the app and
do other things, so it was rather pointless in the end.
Goals
Ultimately, Harry needs to stay focused on his work, and
he needs to split his work up evenly with breaks inbetween
so the workload seems more manageable. He needs help
making a general revision timetable which he can stick to,
and allows him time in the evening’s to socialize with his
friends over Xbox.
THE INDEPENDENT
Izzy
Female, 15, GCSE student studying in
Oxfordshire. Independent learner, caring,
and self-motivated. Technically able, spends a
lot of time on the internet playing games and
Oxfordshire watching Youtube videos.
Behaviour
Izzy spends a lot of her time getting distracted by her
phone and laptop; meaning that she wastes time and
doesn’t listen to her maths lessons. She’s preparing to take
her GCSE exams, but is worried about whether she’s going
to pass maths or not, and doesn’t like to revise the subjects
she doesn’t enjoy.
Websites she uses for revision are Seneca, and EduCake,
which have comprehension style questions, and she
frequently does past papers in the subjects she likes.
However, she admits that she wouldn’t tell her teachers if
she was stressed or anxious about work, and tends to suffer
in silence.
Goals
Izzy needs to pass her GCSE subjects, or else she will feel
incredibly high levels of disappointment.
As someone who frequently listens to music, and plays vid-
eogames, she could benefit from a platform which provides
these things in small doses, or allows for monitored break
times in order to stay focused on the revision content. She
needs to stay focused, and feel supported.
15

User mapping
These maps detail any issues that the user must overcome, and
what I could design to combat these issues. Whilst this is only
in the planning phase, some features are subject to change;
for example, the planner seems as though it may cause design
issues for the user especially on a mobile setup, so this could be
refined as a list or something similar. Once the user journeys/
maps are complete with feature ideas, I will join them together to
create a full site map.

THE INDEPENDENT

find a comfortable break work up into sections plan time so you have
place to work and revise topics equally a rewarding break after stay focused on maths work!
doing work

I can’t stay focused on

my Maths revision HOMEPAGE LIST / PLANNER TIMER stay focused on maths work!

Playlist ( instrumental, calming
music) Information/about site
CTA: Play (music)
Input subjects,
generates timetables for you,
so no excuse for doing only
subjects you like?
CTA: Generate
Timer set up with pomodoro timing system, has
planned breaks, could have something like
‘Forest’, something growing? Maybe a pet that
you choose at the start, and as you progress
more pets visit? (incentive to revise)
CTA: Start (timer)
16
THE DISTRACTED
remove distractions
I have too much work
to do, I just want to HOMEPAGE
play Xbox
Lock site, so you can’t switch
tabs and leave the site?
CTA: Lock
THE ANXIOUS
spend time viewing coping
mechanisms for stress/
anxiety
I have no free time,
and spend all my time STRESSED?
working
Stressed? section to have ways
of coping with stress
List of techniques, click each for
more detail
CTA: Learn more
set deadlines and work
towards each one
LIST / PLANNER
Input subjects,
generates timetables for you,
so no excuse for doing only
subjects you like?
CTA: Generate
assess details on mechanisms
and choose one to try
DETAILS
Information on selected
technique
Steps on how to perform tech-
nique and tips
Prompts within timer breaks to try
the selected technique
CTA: I want to try this!
plan time so there are times
for breaks, and free time get the work done!
TIMER get the work done!
Timer set up with pomodoro timing system, has
planned breaks, could have something like
‘Forest’, something growing? Maybe a pet that
you choose at the start, and as you progress
more pets visit? (incentive to revise)
CTA: Start (timer)
when revising, use a
timer to give breaks and take a break!
manage time
TIMER take a break!
Timer set up with pomodoro timing system, has
planned breaks, could have something like
‘Forest’, something growing? Maybe a pet that
you choose at the start, and as you progress
more pets visit? (incentive to revise)
CTA: Start (timer)
17

Sitemap
To work out the overall flow of the website, I devised a sitemap
to work out where the users would go, and what needed to
be designed. The journey of each user can be seen with their SIGN UP LOGIN
respective coloured line of activity (e.g Izzy is the teal coloured
flow). Upon doing this, I realised that I should be organising my
site based on the users, and not basing my users’ journey on my
LINK TO TIMER
site layout. At the moment, it looks insanely complicated, and I
wish to condense the information / routes I have on this sitemap LOCK
to make the user journey quicker and, ultimately, the site more
usuable. To do this, I will separate the pages which need to be MUSIC BAR
designed for the users, and which can be used as an illusion.
HOME WELCOME [NAME]

(Prompt to go here first

to register subjects)

YOUR SUBJECTS STRESSED? REVISION TIPS PLAN YOUR ABOUT YOU

TICKBOXES (SUBJECTS) EXPLORE COPING MECHA- GENERAL TIPS TO-DO LIST PERSONALISE YOUR
NISMS

GENERATE TIMETABLE TALK TO SOMEONE HOW TO REVISE PLANNER HIGHSCORES (from timer)

COMPLETED WORK
LIST OF MECHANISMS
LINKS TO EXAM PAPERS TIMER PET

SUBJECT RANKINGS
DETAILS ON EACH LINKS TO REVISION METHODS SCHEDULED BREAKS

I WANT TO TRY THIS VISUAL PROGRESSION

NUMBERS TO CALL
18

Sitemap v.2
Here I’ve tried to condense and simplify my sitemap, thinking
about what the users really need/want in order to alleviate any SIGN UP LOGIN
issues they’re having.
For example, having ‘revision tips’ and ‘stressed?’ under one
bracket named ‘support’ is easier for the user; they could need
both revision tips and be stressed at the same time, so having the
overarching theme of support is beneficial. Furthermore, com-
bining ‘about you’ and ‘your subjects’ into ‘your space’ is more LINK TO TIMER

on-brand, but also limits the amount of pages on the homepage,

LOCK
leading for a more successful user journey. Under your space
HOME
would be your subjects, your progress, and your pet collections.
MUSIC BAR

TIMER PET YOUR SPACE SUPPORT YOUR SUBJECTS STRESSED? REVISION TIPS PLAN YOUR ABOUT YOU
TIME

YOUR PROGRESS REVISION TIPS

TICKBOXES (SUBJECTS) EXPLORE COPING MECH- GENERAL TIPS TO-DO LIST PERSONALISE YOUR
ANISMS SPACE
YOUR COLLECTION COPING W/ STRESS
GENERATE TIMETABLE TALK TO SOMEONE HOW TO REVISE PLANNER HIGHSCORES (from timer)

YOUR SUBJECTS CHAT

COMPLETED WORK
LIST OF MECHANISMS
LINKS TO EXAM PAPERS TIMER PET

SUBJECT RANKINGS
DETAILS ON EACH LINKS TO REVISION METHODS

I WANT TO TRY THIS

NUMBERS TO CALL
19

Initial layout drafts

To better visualise how my site could work, drafting out the base
frames and different options for laying out my homepage was
vital. This is the framework for my site, before making it digital.
You can see in these drawings that I had a lot of different layout
ideas for the homepage especially, and the timer page too. Dif-
ficulties came in when I had to consider functionality; the timer
for example, would probably struggle to be a functional piece
as well as highly designed.
20

Making the homepage digital was one of the more difficult pages; I used a combi-
nation of the ideas I had sketched out to create something which ‘fit’ on the screen,
but ultimately I will go on to change these. The cat in the circle placement is the
same, and it’s still accompanied by text, but the elements underneath were moulded
to fit the size of the screen as opposed to replicating my initial sketches.

Design kept the same going

from sketches to digital

When making this page digital, I had a large open

When creating digital wireframes off the back of
my sketches, most design features have stayed
the same, in order to test them out properly.
space between the cat and the list, so it felt natural
to have the timer in the middle; especially as the user
wouldn’t want to mess around and bring the timer up
like in my sketches suggested. This was designed with
more of a user-friendly approach as opposed to a
sleek design approach which I took when sketching.

Paper to digital
21

Off the back of my initial layout drafts, I started to think about

what I wanted the site to look like, and how it would function.
These are some very simple digital sketches of how components
would work together, and ultimately getting something together
which could be tested by users.
Without doing user testing, I am already aware that the sizing
of elements on the site is not how they should be, and there are
some elements which are far too small on mobile.

Initial lo-fi wireframes

22

DESKTOP: BEFORE DESKTOP: AFTER

User Testing #1 2
• initially want to click on “let’s play” button
(which is main CTA feature on the homepage)
• They like that it asks how you’re doing, but 3
would be best to have a link directly to where
they can get help (e.g button to go straught to
“feeling stressed”
• they managed to navigate to the timer easily,
but could have a clearer link at the top of the 1
screen in a nav bar
• imagine a user coming to the site without an
account, how would they be introduced to the
pet? about section for welcoming in new users?
• when on the timer, there was no way to get
back, or pause if needed (should there be?)
• having a navigation bar would be easier to see
all the options, but “my progress” and seeing
progress is important for the user, so should
be moved up in terms of priority and could be
combined with my subjects and personalisa-
tion/edit - “your space” tab
1: Changing the ‘how are you today?’ section to be a pop-up 3: General resizing of buttons and elemnts to allow for more
• everything is too big, feels weird was a decision to reduce space. By condensing the infor- breathing room on homepage. Following websites regarding
mation on the homepage, it would mean that the user would desktop design helped at this stage.
immediately see all information instead of having to scroll. Also
having the pop up makes for more dimension and layers on the
site, instead of it being flat. Other elements, such as the icons in boxes, stayed relatively
the same, but have been resized to fill the screen.
2: Intorduction of a navigation bar, allows for more user rec-
ognition in terms of navigation elements and just makes more
sense in general; how would the user have navigated to other
pages before?
23

MOBILE: BEFORE MOBILE: AFTER BEFORE AFTER

Comparing the sizes of these two

screens, you can see some massive
changes in terms of resizing. Notably
the burger menu / slide-out. When I
initially designed the mobile version I
didn’t think enough about how larger
things needed to be on mobile to be
geneuinely usable.
The to-do list was too small on mobile. To combat this, we need
a way to have the to-do list as the full screen, but potentially hide
it whilst the timer is going, as the tasks should be relatively simple,
and so won’t need looking at constantly. The user should then be
able to slide the list back out when they need to tick off a task.

You’ll also see design changes such as Here I’ve essentially split the original design over two screens to
the rounded boxes on the homepage, allow for more space.
to allow for more breathing space,
and also the lock and music button to
go to the top of the screen instead.
24

Developing wireframes from lo-fi; adding

in colours, images and micro-interactions
within Adobe XD.

Change made to the ‘play’

icon, making it a music note
instead; clearer what this icon
will actually do as the play but-
ton is also used with the videos
on ‘relaxation methods’

Mobile design map

25

Desktop design
As I have previously worked on design for mobile, I decided to
start with mobile and then when user testing came back positive,
without any major gaps, I would translate the design to desk-
top. This was a very difficult process for me, as someone who
hasn’t designed for desktop properly before. To help, I looked at
multiple websites for the design fundamentals regarding sizing
for buttons, type etc.
I used real websites to help me work out my spacing and sizing,
as I was still struggling with these elements. Comparing these
existing websites to mine, I could replicate spacing ideals, and
get a suitable typesize. Having this space at the sides of my
website is beneficial for creating something which is responsive,
and can be easily scaled down.

Using existing websites to measure space on either side of main content Designing my site based on these spatial analyses
26

This is where the user would ideally start, as an overview

for the site; it explains what the user can expect, and
almosty acts as a ‘section for parents’ term page.

Desktop design map

27

Responsive design
Without coding, we have replicated the illusion of having a
responive design by creating a site for desktop, and for mobile.
As this was a big part of the brief, I focused on making sure
that my design would work when resized. The following images
show how I have made my design responsive and what things
change at mobile and desktop breakpoints to allow for the same
successful user experience.

Main differences between desktop and

mobile here are mainly spatial, but also
notice that there’s more information on
the desktop version (which I may end
up bringing over to mobile in a more
condesned format), and also the ‘how are
you;’ pop up features on the desktop wel-
come page, as well as other navigational
aspects. This is something I should aim to
bring to mobile.

Overall, the main change is the lack of

visuals in the mobile version, as there is less
space and it doesn’t add masses to the
overall user experience.

The homepage was easily adaptable from

desktop, ipad, and to mobile due to the
space I allowed on the homepage. When
the site becomes ‘mobile’ sized, the pop
up “how are you” menu transforms to be
part of the main homepage, as the sizing
of a pop-up on mobile would end up
taking atleast half the page. The navigation
bar also then changes to a burger menu.
28

There’s generally little change on these

pages from desktop to mobile, except
the spacing and overall layout. Naturally,
when the desktop site becomes mobile,
the elements stack, as opposed to being
side by side. The relaxation methods page
shows that the left hand bar on desktop,
moves to a horizontal block on mobile.
Everything else except sizing is generally
the same, as my desktop design allows a
lot of space for resizing the webpage.

Between these pages, it is again just

layout and spacing which mostly
changes. On the timer page, there’s
slightly more to be seen in terms of
responsive change.

Due to space on mobile, I’ve had to

put the list in a slide out menu, which
the user can ‘pull out’ when needed to
tick something off.

Responsive design
29

User 1:
• “How are you today” pop-up not prominent enough? Hard to
find?
• “Breathing techniques” page, text could be left aligned instead?
• “What does time yourself mean?” What’s it for? It needs to be
clearer what “Let’s play” also does
• “What does the lock do?” Music notes and lock aren’t obvious
enough? Hint for these?
User 3:
• No one so far has clicked “How are you today?” first;
could this be something the user HAS to click before doing
anything else?
• “Buddies” section is unclear, more information needed on
buddies and pets and what they’re for; think about a new
user signing up, maybe another information point?
• Could the technique listing be different colour?

https://xd.adobe.com/view/
f9fbe54b-b933-4bb5-9701-
b7e68918680c-aca8/
MOBILE
https://xd.adobe.com/
view/2008866a-82f9-450c-8a58-
f082c32bd3f4-755b/
DESKTOP
User 4:
User 2:
• Clarity needed on lock and music notes MOBILE
• “How are you” section is more obvious on mobile, user
• Space before bullet points on the initial page for desktop, more
went straight to this
legible
• “Surprise me” technique section ALSO clearer on here too
• Set of boxes could already be on the task list?
• “Go” needed to be clicked on keyboard isn’t clear?
• “Add task” and “Ready” buttons too similar?
• Breaktime could be clearer, like on desktop?
• Make it clear it’s 20 minutes
• “Breaktime” should have a noise, or alarm, that overrides the reg-
DESKTOP:
ular desktop view or connects to your in-phone alarms? Otherwise
• “How are you” to disappear when clicked
how will the user know the timer is done?
• Isn’t interested in the info/hint section on the timer; user has
• “How are you” pop-up looks more like a hint, or a selling pop-up,
ADHD and is overwhelemed by lots of writing - if it was
and should disappear when it’s interacted with. Could I make this
bolder, bigger, and less text, maybe they’d read it?
like the mobile one?
• “Where can I see the collections again? I’d expect it under
• “Unsure where to start” section is relatively unclear? Is it needed?
“Your Space”, or “Progress” “
Why would the user be unclear? [User 3 and 4 went straight to
‘surprise me’ button, so maybe invalid]
• Overall CTA button colours could be changed to a fill and just a
border?

User testing #2
30

Changes from testing BEFORE AFTER

When looking at the user testing, some common comments
appeared. There were some very specific changes which came
out of a couple of the tests, with one user suggesting the button
designs should be changed. However, with comments like this,
I feel that ultimately if one user is saying it, and no other user
is, then it may just be a personal preference as opposed to a
fundamental issue.

• Mobile: “Breaktime” banner could be the same as that on

desktop
• Alarm or sound needed for when breaktime starts, so the
user would be able to do work away from their laptop or
phone whilst doing their work; this was the original plan,
however, could be made clearer/functional
• “How are you” pop-up to disappear when clicked Having this little hint, if the user
forgot it from the page before,
• Clairty on lock and music? Some users could predict what should be enough for the user
would happen, whereas others were unsure to be made aware of the
buddies. This will need to be
• Buddies/pets needs to be explained for a new user implemented on mobile too.
• “How are you” popup could be like mobile? strip at the
start? Or just a different colour (maybe orange or yellow,
one of the action colours).
Colour change helps the pop-
up actually stand out
Regarding the music and lock icons, the users which didn’t
understand them, were also those who didn’t bother reading the
information page at the beginning. Those who did, felt it clear
what the icons were going to do. Also, if you’re unsure what
something will do... click it! I have music set up on the homepage
for demostration purposes, when you tap the music icon.
31

Alarm sound
Something to add was the alarm sound; people tend to have a
negative relationship with the classic iPhone alarm sound, and
so, I wanted to find a noise which would of course alert the user,
but in a less aggressive way. Headspace had a set of sounds on
their website which users could download as their permenant
alarm noise; these include wake up alarms, and also gentle
nudges. Whilst going through the sounds, I sound that the “ping
1” audio file was most preferrable, as it felt like a typical alarm,
but was considerably softer. Although this seems like a very
small element of the site, I wanted the users’ to have a positive
experience with all elements, and not feel stressed or pressured
due to loud and alarming sounds.
This sound is played when the user reaches ‘breaktime’ and
automatically switches off when the user clicks.

Screenshots from www.headspace.com

32

Final changes
With the project nearing to a close, there were a few points
I needed to address, and others I needed to change. A few
changes were made to mobile to help the user and their
understanding of ‘buddies’, and also, the text on the timer was
changed (on both mobile and desktop) to make more sense with
the switch from list making to being timed.
The text size on mobile was altered in some places, but as
general practice it is recommended that the optimal text size
for mobile is 12pt, and this information was cross-referenced
to make sure. I also tested my typesize on my mobile device
through Adobe sharing, and so I felt it unneccesary to change
my typesize, as I had an established information hierarchy.

Originally, I had the text on

the left screenshots above the
timer, but I have now changed
it to make more sense and
give some more guidance to
the user.

I have created a pop-up that the user

is required to read before entering the
mobile site, due to the fact that when
testing occured, many users didn’t read the
information page at the beginning.
This also helps with the understanding of
‘buddies’, and their roles.
33

To get a deeper sense of navigation throughout my website,

I have further designed the ‘Your subjects’ sub section, which
stems from ‘Your space’.
As well as this, typesize has been increased on all desktop
pages, from 16pt to 17pt, and from 12pt to 16pt in certain areas,
such as the ‘how are you’ pop-up.
34

Visual design
As designers, we view visual design very highly. Although prior
to this you will see implementation of colour, this was simply
Text colour primarily, but acts as
drafting to get a better idea of hierarchy. HEX: 2C4251
an accent background colour in
As The Student Room, and Amazon, plus many other sites use some places
orange as a main action colour, I wanted to do something simi-
lar, but first I wanted to know why they chose these colours.
Orange is used to “raise activity and productivity levels”, and
influences enthusiasm and endurance; which both drastically
improve productivity. However, some people view orange in a HEX: 52B8B9
negative light; particularly men are turned off by orange hues. Background colours,
That means, like yellow, it’s best used as an accent colour. used for non-clickable elements
within the prototypes
Blue is the main colour we envision when we think about
calming colours, but it is also found that is boosts productivity
and stimulates the mind. The combination of calming yet men- HEX: 8CCBCF
tally stimulating may be the reason why blue has been shown
to increase productivity. Nonetheless, when considering my
stressed users, I feel that this calming colour could be helpful to
make the user feel more at peace.
The orange/yellow gradient
Whislt researching, I found that green has a lot of positive con- is the main action ‘colour’ or
HEX: EAE76F
notations, and wondered if mixing the blue with this green would swatch. As the rest of the website
is flat, this gradient stands out HEX: E99349
have another positive association, without looking too organic strongly in contrast
and environmental. Turquoise means open communication and
clarity of thought, and so I felt this suitable to my branding.
Sources used for information regarding colour
psychology: Equally weighted, the orange HEX: E99349
and yellow alone are used when
https://www.empower-yourself-with-color-psy- there are multiple options for the
chology.com/color-turquoise.html user, but one isn’t valued more
than the other
https://blog.moorecoinc.com/5-colors-in-the-
classroom-that-will-boost-active-learning
HEX: EAE76F
35

Illustrations
All illustrations in my site are my own, except where icons are
concerned. The illustrations to the right were formulated from the
same standard ‘blob’ shape, turned into animals for a fun and
friendly design.
The icons are typically taken from an Adobe XD Plugin named
‘AutoIcon’, which generates free icons for you to use. Some of
these icons are slighlty unbalanced due to this reason, but have
cut back on so much time which I have used for other things such
as these illustrations.
The motif ‘waves’ which are seen in the navigation bar, and on
the top of every screen are also my illustrations, using the colours
decided in the visual design slide.
36

Typography
Keeping the branding very simple was important to me; as I
have a lot of information to communicate. The logo is set in
Futura PT Bold, as it’s neutral, contemporary, and very legible.
The use of the ‘@’ in the logo is intended to communicate to the
younger audience; having a quirky touch to the logo-type is
enticing, and the @ also plays on the social aspect of the site.
By keeping just two typefaces, I was able to keep the site legible
and clear, whilst adding some differentiation between hierachial
information. Also, my text is set in the dark teal, to keep brand
consistency.

H1 is used for page headings,

e.g ‘Support for you’.
H2 is the page description,
‘whether you’re feeling stressed...’
H1: Futura PT Bold When trying to decide on a logo, I was worried
that my type alone was too boring, but when add-
sections on each page. H2: Futura Medium ing other features, I noticed actually it was perfect
how it was. The second logo on here is the one
H3 comes in with large buttons,
such as the three section buttons which was chosen to go forwards with.
in this example.
H3: Futura PT Medium
P is for small blurb text, and when
the information is not crucial to the P: Futura PT Medium
navigation of the site.
H1 Is always centred, as is
H2. The placement of these
components are often in the
centre, but can be used sparsely
elsewhere. P can be either
centred or un-centred, depending
on context.

https://learnui.design/blog/
mobile-desktop-website-font-size-
guidelines.html
37

Design system
Having a consistent design system, regarding buttons, layout
etc., can be incredibly beneficial to the users’ journey around
your site. Having consistent design is not only fundamentally
correct, but it is also a secondary method of navigation.

Types of buttons
The button typeface is Futura PT Medium,
The yellow to orange gradient button is of highest importance,
and is set in either a white or the dark teal/
and will be seen where there are clear call to actions. The yellow navy, depending on the button colour.
and orange buttons are equally weighted in terms of importance Text within buttons is always centred.
and hierarchy, and are used where the user has two options
without any preffered route hinted at from the site.The teal button
is for low priority actions, such as ‘sign up’; this is because ‘log
in’ is the desired route for the user in the context that they have
an account already.

Navigation components
The navigation bars on both mobile and desktop are smaller
and larger versions of one another, with the same ‘wave’ motif
on both. The desktop navigation bar has the logo and site name
in the top left for easy access to the main menu, as well as the
contents of the slide out menu (below) arranged across the top.
The lock and music notes are consistent between both bars. On
the mobile version, all the accessible links on the desktop version
are within the burger menu to allow for enough space for other
elements, and also taking practicality into account.
38

Burger menu
The burger menu/slide out menu contains all the pages on the
mobile site. Some of these links aren’t clickable, and they’re just
for the illusion of more pages and sub-pages.

Hints
The addition of the common ‘hint’ section is evident on the
desktop version, and is alluded to on the mobile version with
the hint icon. These hints should be noticeable enough, without
interfering with the rest of the page. To do this, I’ve made each
hint collapsable, and have a shadow which makes them seem
as if they are on another layer.

General style
In terms of general styling, I have combined “neumorphism”
and a bright, block colour style, to create something which feel
assertive but also soft and calming.
39
Linking back
Linking back to the user’s specified at the beginning is important,
because if you’ve essentially designed something which is use-
less for your user’s issues then the project is ultimately a fail.
Throughout the process, the user’s journey has been altered, but
it has been made sure that they will be able to reach their goals
without any paint points in their experience.
Beth needed mainly support with stress, but also she needed a
way to track how long she’d been spending on school work.
The “support for you” section does this for her, and she can not
only track her times and breaks on the timer, but she can see her
progress in her space (“my progress”).
Harry generally needed to stay focused, and having the list
function within the timer allows him to do this. With the pomo-
doro timing method, he will better be able to manage his time.
The revision timetable is alluded to but not designed, due to time
constraints but also because it’s a very generic function.
Izzy likes music and felt distracted, hence the “playing” with pet
option, and the music embedded into the homepage. Monitored
break times were also a factor for her, and so the “timer” func-
tion comes into help here.
Overall, I feel that the users would be able to reach their goals
and sort any problems and pains they had regarding GCSE
revision and stress, which was the main aim for me. The pomo-
doro timing feature, combined with the list making and ‘buddies’
collection make for a clear route for the user.
THE ANXIOUS
Beth
Goals
Beth is already expected to do very well in her exams, but
she needs to make sure she is mentally able to partake in
said exams. Without more support and breaks, she will
ultimately be too stressed to perform her best.
She needs a way to monitor her time spent on school work,
and make sure she’s having a break, as well as stopping
revision early every night to allow for a better nights sleep.
THE DISTRACTED
Harry
Goals
Ultimately, Harry needs to stay focused on his work, and
he needs to split his work up evenly with breaks inbetween
so the workload seems more manageable. He needs help
making a general revision timetable which he can stick to,
and allows him time in the evening’s to socialize with his
friends over Xbox.
THE INDEPENDENT
Izzy
Goals
Izzy needs to pass her GCSE subjects, or else she will feel
incredibly high levels of disappointment.
As someone who frequently listens to music, and plays vid-
eogames, she could benefit from a platform which provides
these things in small doses, or allows for monitored break
times in order to stay focused on the revision content. She
needs to stay focused, and feel supported.
40

MOBILE:
https://xd.adobe.com/view/59e5e545-85e9-425e-9819-f9583cea5521-0cb6/

DESKTOP:
https://xd.adobe.com/view/f161166a-496e-460c-b4c2-905d0eb59bbb-a432/
(Please be aware that there are audio features within these prototypes.)

YourSp@ce