2. Contents:
Phase1(Userresearch)
Welcome to mind garden 6
About mindful meditation 7
Competitor analysis 8
User interview 14
Problems and solutions 16
User personas 17
User Journey 20
Page flows 21
Site map 22
Phase2(Prototyping/testing)
Low-fidelity wireframing 24
Mid-fidelity wireframing 26
User testing 28
Key features 36
Additional features 38
Phase3(Visualdesign)
Branding and visual design 40
Components 41
3. 4
Phaseone:userresearch
Within this phase my main aim was to fully understand the specific needs of my user
group. This involved looking at existing web applications in the field of mindfullness in
order to understand the context and competition for my concept. A user interview
was conducted to understand, in depth, barriers that the user may be facing as well
as their current coping mechanisms for these and why they may not work. Personas
were then created based on real users experiencing stress and anxiety. User journeys
were then created based on these personas in order to understand the route needed
for users within the web app. Finally a site map was constructed to plan out the
navigation of the site.
4. 7
6
Mind Garden is for teenagers and young adults who are looking
for a way to relieve stress and anxiety. The struggles of this
demographic are often different to those of adults, mind garden
provides an approachable and motivational platform for young
people to improve the quality of life whilst in education.
Unlike its competitors, mind garden focuses on keeping its
users motivated by having the user grow a flower each time they
complete a meditation. Users can compete with friends and
look back on their progress to keep them motivated whilst they
navigate the troubles of young adult life. The web app has specific
meditations to target issues such as arguing with friends or family,
dealing with exam stress and revision burn out.
Mind garden also provides users with mediations to help them
focus or sleep, functions that can be effected due to the stress
young people face today. Users can also create a journal log or
listen to music if they do not feel like meditating.
Our product provides different options to help young people
navigate the troubles they may face. It aims to motivate them
towards a healthy routine in which they regulate their feelings
through the outlet of mindfulness activities.
Mindfulness involves paying attention to what is going on inside
and outside ourselves, in each present moment. In the busyness
of life it is easy to get caught up in our thoughts and lose
attention to our surroundings or emotions.
Implementing mindfulness or meditation has been shown to
have a range of health benefits from relieving stress and anxiety,
providing focus and motivation and improving sleep quality
(NCCIH, 2022).
Meditating can be a great resource for young people because it
requires no equipment and only needs to take a few minutes to
be effective.
Implementing meditation could improve the lives of young people
dramatically, particularity in stressful times such as exam season.
Aboutmindfulmeditation..
Welcometo..
5. 9
8
Competitoranalysis
In order to understand the market my web app would stand in I researched the leading companies that
produce meditation content for their users. I have looked at how these web apps work responsively and
any design features that are effective.
Headspace
Article pages
look plain and are
weirdly aligned
Drop down menu hove state makes
the most of nearly the whole page
when in full screen, its split into
separate sections and uses colour and
illustration to make it interesting and
draw attention to certain articles.
Home page is very responsive and
works well at all sizes, it feels like
a seamless transition as the page
is shrunk down
Colourful icons to advertise
similar articles
6. 11
10
Menu bar is not busy
like other websites.
It doesnt feel
overwhelming.
Layout gets a
bit repetitive
Uses themes for
each meditation
so you can find
similar ones you
might like
InsightTimer
7. 13
12
Landing page is
quite unique and
fits the brand
well
Questions give
a personalised
experience
Nice to have a fact that
promotes the use of
meditation
Calm Competitoranalysissummary
Running a competitor analysis has allowed me to understand
the existing landscape for online meditation tools and how mind
garden can fill a gap left in this sector.
The three web apps analysed all use different visual tools to
convey a calming atmosphere. A clear theme lacking amongst
these sites was approachability towards younger generations.
Headspace’s illustrations create a friendly feel to the site but the
topics presented still feel very adult.
Mind garden will fill a gap in the market by providing a
meditation platform for children and young people that is
approachable and directly targets specific issues that this
demographic may face. To avoid overwhelming users with too
many options, particularly in times of distress, mind garden is
split into three helpful themes: calm, focus and sleep. Mind
garden also stands out from existing meditation platforms
because it provides it’s users with the ability to grow a plant,
flower or tree each time a meditation is completed. This creates
a fun way for users to stay motivated and complete more
meditations. There will be a limited edition plant every week and
users can compete with friends on the leaderboard, creating a
fun way for young people to complete healthy habits.
8. 15
14
UserInterview
My main goals for the user interview was to find out how much
stress and anxiety was impacting the users life, what they were doing
currently to help these feelings and get an understanding of how
a meditation web app could fit into their routine. My interviewee
was a secondary school student struggling with anxiety and stress
related to their school work, someone who I would be aiming my
app towards.
1.Howoldareyou?
15
2.Whatyearofeducationareyouin?
Year 11
3.Describethelevelofstressyoufeelasaresultof
school/uni?
It varies, probably like a 6 out of ten. More stressful knowing exams
are approaching
4.Whataspectsofschool/unimakeyoustressed/anx-
ious?
Exams, homework, pressure from teachers, friendship problems
5.Howdoesthisstressimpactotheraspectsofyourlife?
It can affect your motivation to keep working and keeping up good
habits
6.Describeanycopingmechanismsyoualreadyhave
forcombatingstressrelatedtoschool/uni?
Listening to music, just chilling and doing nothing
7.Doyoueverhavetroublesleeping?
Recently yes, due to stress with friendships
8.Describeanycopingmechanismsyoualreadyhave
forcombatingtroublesleeping?
None
9.Haveyouevermeditatedbefore?andifso,howdidit
makeyoufeel?
Yes a few times, it made me feel calm
10.Ifyouhaven'tdoneitbefore...whatdoyouthinkofit?
Wouldyoutryit?Whynot?
N/a
11.Howmuchtimedoyoudedicateeachdaytosome
formofself-care?
I go to the gym and do a skincare routine every day, (1-2 hours at the
gym a few times a week. Skincare taking 10 minutes)
12.Doyoufeelthatyoushoulddedicatemoretimeto
self-care?Why/whynot?
Maybe, I think meditating would help me to relieve stress. I think
self-care is really important.
13.Describeyourtypicalmorningroutine?
Wake up, check phone for 5 mins, do makeup and get dressed, have
breakfast, brush, teeth and leave for school (taking 30 mins in total)
14.Howcouldyouimproveyourmorningroutine?
Wake up earlier, shower in the morning rather than at night to help
me feel a bit more refreshed and awake. Probably shouldn’t go on
your phone as soon as you wake up
15.Describeyourtypicalbedtimeroutine?
I always do my skincare and sit in bed on my phone (Tiktok and tex-
ting) for a couple of hours, going to sleep around 22:30
16.Howcouldyouimproveyourbedtimeroutine?
Do other things than go on my phone, maybe read
17.Wouldyoutrymeditationtohelpwithstress?
Yes I would be open to it
18.Wouldyoutrymeditationtohelpyousleep?
Yeah
19.Howlongwouldyoumeditatefor?
5-10 mins each day, maybe only 5 mins in the morning
20.Doyouthinkotherpeoplearoundyouragecould
benefitbymeditating,why?
A lot of people my age are stressed, and could do with sitting and
relaxing for a bit
21.Doyouthinkexistingmeditationsareaimedatpeo-
pleyourage?
No, it seems aimed more at adults
22.Howcouldtheybemoreattractivetopeopleyour
age?
Have less of a spiritual approach, more appropriate language for
younger people
23.Which,ifany?Designchoiceswouldattractyouand
peopleyouragetoawebsite?
Calming but colourful colours so that it doesn’t look boring
Conclusion
Overall, conducting this user interview has allowed me to
understands some of the struggles young people face in relation
to school and i better understand some of the coping mechanisms
users may use to combat these struggles.
I have insight into certain trigger points for my users such as exam
stress, pressure from teachers or parents and friendship troubles
which i can target through the web app.
I have also found out that the length and style of existing meditation
tutorials can be off putting for young people, allowing me to focus
on a web app that provides quick and approachable forms of
meditation for young people.
Asking the user about their morning and night time routine was also
beneficial in finding where meditation could fit into a young persons
routine and how to incorporate this into the web app.
9. 17
16
Derivingproblemsand
solutionsfromtheuser
interview
Userssituation
Grace is a [school student] who needs to find a [quick
way] to [relieve stress] that will [easily fit into her morn-
ing routine].
Grace also needs to [find a way to fall asleep quicker]
and [stop racing thoughts] [at night time] so that she can
[perform better at school the next day].
Grace [wants to try meditation] but[ feels intimidated by
the spiritual language and the length of existing medita-
tions online].
Hypothesis
If we create [short videos or guides] these could [easily
be squeezed into a busy morning routine].
If we [implement sleep meditations] into the web app this
can [help to control graces anxiety] and[ help her get to
sleep fast] so she feels ready for school the next day
If we [create a web app that focuses on approachabili-
ty] for young people [through appropriate language and
short length videos] then grace can [try meditation with-
out feeling intimidated].
UserPersona(1)
basedonuserinterview
-Grace
-Female(She/her)
-Aged15
-Secondaryschool
About
Grace is currently studying hard for her GCSE exams.
She has been managing her stress levels by going to
the gym or just relaxing and listening to music but she
sometimes feels this isn’t enough
Devices
Painpoints
• Her morning routine can feel very rushed which starts
her day off in a stressful way
• Sometimes struggles getting to sleep which effects her
performance the next day
• Friendship troubles cause a lot of stress and anxiety
• Can feel overwhelmed with the pressure of parents and
teachers
• Finds existing meditation tutorials intimidating
Goalsandmotivations
• Wants to manage feelings of stress an anxiety so she can
maintain motivation during exam season
• Wants to be able to all asleep easily and quickly every
night
• Wants to implement more self care into her daily routine
Technologicalability
Hp
laptop
IPhone X
no experience very experienced
10. 19
18
UserPersona(2)
-Joey
-Female(She/her)
-Aged22
-Postgradstudent
About
Joey is currently completing a masters degree. She of-
ten struggles to sleep due to over thinking and anxiety
before bedtime. She often reads or watches tv to help
her sleep but sometimes relies on taking melatonin if
this doesn’t help.
Devices
UserPersona(3)
-Dan
-Male(He/him)
-Aged18
-Sixthformstudent
About
Dan is currently studying for his A-level exams. He is
struggling to stay focused on his revision and keeps
falling to bad habits such as going on his phone late
at night and playing video games when he should be
revising.
Devices
Painpoints
• Can sometimes take her up to 40 minutes to fall asleep
• Has tried listening to white noise but it didn’t help her
• Struggles to sleep in unfamiliar surroundings because she
doesn’t feel safe
• Finds tracking her sleep creates more anxiety and
doesn’t really solve the problem
Goalsandmotivations
• Doesn’t want to rely on taking melatonin in order to fall
asleep
• Wants to fall asleep quicker and have deeper sleep in
order to perform better for her degree
• Wants to feel less anxiety before going to bed
Technologicalability
Painpoints
• Gets easily distracted by his phone and Xbox
• Struggles to feel motivation to revise
• Gets anxious about grades due to comparing himself
to others which leads to low self confidence and
procrastination
Goalsandmotivations
• Wants to find away to clear his mind and motivate
himself to revise
• Wants to clear his mind of distractions such as his
phone and Xbox
• Wants to achieve his target grades in his exams
• Motivated by having a good routine and being
productive
Technologicalability
MacBook
pro
Lenovo
laptop
IPhone X
IPhone 8
no experience
no experience
very experienced
very experienced
11. 21
20
UserJourneys
Creating user journeys for my three personas helps me to
focus in on what the user is trying to accomplish and any
barriers they may face in doing so.
Pageflows
Creating page flows is a crucial step in understanding the route a user would
take when using the web app and helps to plan out different features.
Trigger
Had an argument
with her friends
at school causing
her to feel low self
esteem and anxiety.
Trigger
Had an argument
with her friends
at school causing
her to feel low
self esteem and
anxiety.
Goal
Feels calmer and
more rational.
She feels she can
now communicate
clearly with her
friend about what
happened.
Goal
Feels much more
focused and feels
motivated to keep
up the routine of
meditating to get
the reward of a
plant each time
Goal
Falls asleep
quicker and easier.
•Visits homepage
•Views information
and categories
Calltoaction:
Click view all
meditations
•Visits homepage
•Views information
and categories
Calltoaction:
Click to view focus
category
•Visits homepage
•Views information
and categories
Calltoaction:
Click to view Sleep
category
•Views closing stats
•Opens journal
prompt
Calltoaction:
Log feelings after
completing task
• Opportunity to create account
and keep track of meditations
and feelings/ emotions. A plant
can be planted each time a user
completes a meditation
•Views suggestions
after meditation
•Listens to focus
music
Calltoaction:
Starts to build mind
garden
•Presses continue
which keeps the
web app playing
sleep music
Calltoaction:
Repeat the next
night
•Views meditation
tutorials
•Filters to 10 minute
meditations
Calltoaction:
Complete meditation
•Views focus tools
within the focus
category
•Finds focus
meditation
Calltoaction:
Complete meditation
•Views sleep tools
within the sleep
category
•Finds sleep
meditation
Calltoaction:
Complete meditation
Trigger
Is struggling to
fall asleep due to
anxious thoughts.
Trigger
Is struggling to
fall asleep due to
anxious thoughts.
Trigger
Feels a lack of
motivation to start
revising after school
Trigger
Feels a lack of
motivation to
start revising
after school
Action
Decides to do
a meditation in
order to calm
down, searches
‘meditations for
kids’ and fins mind
garden
Action
Decides to do a
sleep meditation,
uses mind garden as
it was reccomended
by a friend
Action
Decides to do a
quick meditation
to gain motivation,
saw mind garden
advertised at school
so decides to use
that
Action
Searches for
10 minute long,
friendship related
meditation
Action
Searches through
sleep related
meditations
Action
Searches for
focus meditation
and completes
meditation
Action
Completes
meditation and
notes down feelings
afterwards
Action
Extends meditation
to keep playing
sleep music
Action
Listens to focus
music and decides
to start tracking
meditations daily
Goal
Feels calmer and
more rational.
She feels she can
now communicate
clearly with her
friend about what
happened.
Goal
Falls asleep quicker
and easier.
Goal
Feels much more
focused and feels
motivated to keep
up the routine of
meditating to get
the reward of a
plant each time
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
↗
Grace
Grace
Dan
Dan
Joey Joey
12. 22
Sitemap
Curating a site map is the final step of phase one
and has allowed me to clearly split the web app
into separate pages.
Home page
About
Why
meditate
Resources
Contact us
Log in/
Profile
Footer:
• About mind garden
• Why meditate?
• Mental health resources
• Contact us
• Advice
• Language
Focus Sleep
Calm
Calm
meditation
videos
Focus
meditation
videos
Sleep
meditation
videos
Favourites
Journal
Calm
music
Focus
music
Sleep
music
Mind garden
Player
page
Player
page
Player
page
Streak/
suggestion
pop-up
Streak/
suggestion
pop-up
Streak/
suggestion
pop-up
Or Or Or
Phasetwo:Prototyping/
Testing
The second phase of the process was focused on prototyping and testing. My main aim for this
stage was to ensure that i was creating a web application that was intuitive and understanding
of the users needs. This was tested by implementing different solutions at each stage of the
prototype. These solutions were tested on real users and were improved or changed based on
the feedback from users. User testing was crucial in this stage as it highlighted issues within the
mobile and desktop versions of the web app that were making it more difficult for users to fulfil
their needs. This issues are highlighted and remedied in the next pages.
14. 27
26
Mid-fidelitywireframing(Mobile) Mid-fidelitywireframing(Desktop)
When wire-framing I
focused on a filter page
that would be help the
user to find a meditation
for their specific needs.
I considered the key
features of this tool that
would avoid the user
feeling overwhelmed by
too many options.
Homepage Calm Description Player
Suggestions Journal Mindgarden
Keyimprovementsmade
•Layout of calm menu changed so that single videos scroll vertically across
the page rather than a series of videos scrolling horizontally like in the
low fidelity wireframes (This allows the user to view information more
clearly and is a more intuitive format for mobile use)
•A filter page was designed in detail at this stage to help personalise the
experience of the web app to their needs
Homepage Calm Description Player
Suggestions
Journal
Mindgarden
15. 29
28
Usertesting(Mobile)
Primaryobjectives:
•To use a thinking out loud approach in order to understand the
users expectations of how to navigate the site
•To highlight any key usability issues as well as features which work
well
Usergroup:
•User 1: Male university student aged 21
•User 2: Female university student aged 18
•User 3: Female secondary school student aged 16
Canyoupleasefindhowtoaccessthecalmdownsec-
tion,canyoufindanyotherwayyoucouldaccessthis
section?
User 1: The section was accessed almost immediately by the user
from the tile on the homepage. When asked the follow up question
the user navigated relatively quickly to the menu and accessed the
calm down page
User 2: Accessed the calm down section quickly but when asked to
access in a different manner they went back to the home page and
scrolled through and then went back to the menu
User 3: Scrolled down the homepage and then back up to click on
the calm down section. They then navigated to the menu, read all
the options and clicked the calm down section
Canyounowpleasefilterthemeditationsto5minutes
longandaimedtowardsstressedandanxiousemotions
User 1: Quickly selected the correct time frame but searched
slightly longer when looking for the correct emotion filters. When
asked what was easy or difficult about the filtering process the user
stated that time was easy to select but that it was a bit overwhelming
to see so many different emotions to choose from.
User 2: Filtered quickly but seemed to have to scroll quite a lot to
find the button to filter results
User 3: Scrolled through filter options and then back up to select
the appropriate filters
Canyoucompletethe5minutestressreliefmeditation
andchosetomakeajournalentry
User 1: carried this out without any issues
User 2: paused at the description screen for the meditation and
didn’t seem to know how to make it full screen but eventually
clicked on the screen and completed the meditation
User 3: Read the description and then pressed play on the video
Fromhere,canyoupleaselocatewheretherecentjour-
nalentryhasbeenstored?
User 1: The user clicked onto the journal section in the menu which
only gives the option for the user to create a new journal entry and
not to view old entries.
User 2: Found the journal entries quickly on the account page
User 3: Went back to home page and then scrolled down to the
bottom, then navigated to the menu and clicked Journal
Canyounowreturntothehomepage?
User 1: Navigated back to the home page via the burger menu
User 2: Tries to click on the mind garden logo to return to the
homepage and then goes to the menu to navigate to the homepage
User 3: Navigated back to the home page via the burger menu
Onascaleof1-7,howwouldyouratetheusabilityofthe
website?andwhy
(1 being very difficult to use and 7 being very easy to use)
User 1: Six and a half
User 2: Six
User 3: Five
Why?
User 1: Because it was obvious what to do but it was still nice
to look at
User 2: I was expecting to see the burger menu on the left hand
side which I found a bit confusing
User 3: At some points I was a little bit confused on what to do,
such as where to find the old journal entries
Observationsandusability
problemsfound
•Users seemed to take longer than necessary when using the filter
menu with user 1 stating that it was overwhelming to have so many
emotions to choose from. This made me aware of the fact that
putting labels on emotions without the user directly searching for
that could be overwhelming and cause more stress
•User 2 struggled to make the meditation video full screen
•User 1 and user 3 both struggled to find the existing journal entries
within the web app, this highlighted to me that having the old
journal entries within the account page was not the direct path for
the typical user. The user expected these to be in their own page
of the website
•One user attempted to return to the homepage by clicking the
mind garden logo
•User 2 stated that they expected to see the burger menu icon on
the left of the screen rather than the right
Ideasatthisstage
•Have users search for emotions in the filter page rather than
choosing from a selection
•Have a clear icon and prompt to show the user that the video can
be viewed in full screen
•Have access to old journal entries and ability to make new journal
entry on the same page
•Have the ability to return to the homepage by clicking on the
websites logo
16. 31
30
Respondingtousertesting
Improvingthefiltermenu
One of the main issues brought up in the initial user testing was that the list of
emotions in the filter menu was slightly overwhelming and this was causing users
unnecessary effort.
To improve this i instead implemented a search bar where the user can begin to
search for an emotion as provided with suggestions based on what they are typing in.
This still gives users support but without forcing emotions on them. This is beneficial
for users such as Grace who experience lots of overwhelming emotions that they
don’t know how to deal with.
Full-screennavigation
Another change made was to add a prompt so that
the user could understand clearly how to make the
video full screen. I added the commonly used full
screen icon to the video screen as well as a hover
state so that the user gets an explanation of what the
icon is before choosing to click it.
Journaltool
The user testing also indicated that navigating to the journal tool was
not clear enough. There is now a dedicated page within the web app
for writing a new journal entry or accessing any old entries. This is
still viewable from the account page as an additional way to access
this feature. This tool is beneficial for anxious users like Grace who
are battling with lots of different issues such as friendship troubles
and exam stress at school. Journalling can help to rationalize and
understand these complex emotions.
17. 33
32
Secondaryusertesting(desktop)
Primaryobjectives:
•To ensure that the alterations made to remedy the issues brought
up after the first round of testing have been effective
•To highlight any more usability issues that were missed in the first
round of testing or issues specific to the desktop version of the
web app
Usergroup:
•User 1: Sixth form student aged 17 (not user tested previously)
Canyoupleasefindhowtoaccessthecalmsection,can
youfindanyotherwayyoucouldaccessthissection?
User 1: The user scrolled across the three tiles on the homepage
and then decided to click the burger menu to navigate to the calm
section
Canyoubrowseacrossthispage.Howwouldyourate
thereadability ofthetext?
User 1: I find it quite hard to read the dark coloured text against the
light coloured background, I also didn’t realise straight away that the
meditations were in different sections
Canyoufiltertoshowmeditationsforanxiety?
User 1: Scrolls down and browses the page, realises the filter button
was at the top of the page so scrolls back up. Then searches within
the emotion filter and clicks anxious suggestion.
Canyouchoosethe5minutestressreliefmeditationand
showmehowyouwouldmakethevideofullscreen
User 1: Clicks the full screen icon without hesitation
Canyoubypassthesuggestionsandthenlocatewhere
recentjournalentrieswouldstored?
User 1: Navigates to menu and selects journal
Canyounowreturntothehomepage?
User 1: Clicks on mind garden logo which takes them back to the
homepage
Ifyouwantedtofindthesocialmediaaccountsformind
garden,canyoushowmewhereyouwouldgotodoso?
User 1: Scrolls down to the footer and locates social media icons,
when asked where else they may expect to find social media they
navigated to the about mind garden page
Onascaleof1-7,howwouldyouratetheusabilityofthe
website?andwhy
User 1: I would rate it a 6 out of 7
Why?
I found it natural to navigate across the site but there were a few
times i thought there may be a feature in a certain area when there
wasn’t.
Observationsandusabilityproblemsfound
•Filter and search bar would benefit from being pinned in place
when scrolling so that the user can access these features from
wherever they are on the page
•Make buttons clearer through the use of hover states
•The legibility of the text needs to be improved
•The different sections of the calm and focus pages need to be
made clearer
18. 35
34
Respondingtosecondroundofusertesting
Creatingclearnavigation
Within the second round of user testing it was evident
that the user was taking longer than necessary to
navigate the site. This highlighted the importance of
animation and hover states to create a site that moved
with the user and prompted them to visit different
pages. Examples of this interactivity within the site are:
•Calm, focus and sleep icons on the homepage have
hover states where the plants grow around the
people in the icons (This reassures the user that
these are buttons that will complete an action, it also
enhances the theme of growth represented across
mind garden)
•Videos on the site are given hover states in which
the tile greys out and the play icon lights up in green.
This hover state is intentionally subtle so that it is not
distracting as the user scrolls through videos
•The options in the navigation menu are also given
hover states to show the user where there mouse
click will take them, as well as labelling the account
icon if the user was unsure of the purpose of this
icon
•Favourite icons are given animation to prompt the
user
•Animation of the flower growing in time with the
breath for each meditation video (creates a visual
cue for how long the user needs to breathe in and
out for)
Improvingusabilityof
thesearchbar
When testing the search/filter function, the user
had to scroll back to the top of the page to access
the tool. This indicated to me that it would be
useful to pin this tool in place so that the user can
access it from wherever they have scrolled too on
the page. I also implemented a block of colour
behind the tool that would avoid it from clashing
with the imagery and text on the page (as seen in
the figures below).
Improvinglegibility
andorganization
When viewing the list of meditations, it was
not clear enough for the user that the videos
were grouped into different sections. I had
also realised that the text was not as legible as
it could have been. I added lines, breaking up
each section within the calm, focus and sleep
pages. This helped to group the appropriate
groups together. I also changed the colour and
weights of the typography in these sections in
order to improve legibility. The background
colour of these pages was also darkened to
allow better readability of the white type.
Hover states on the navigation bar
Hover states for video thumbnails
Default and hover states for homepage icons
Search bar pinned in place with background colour to aid
visibility
Before and after of typographic treatment within the
focus page
Before and after addition of lines and
typographic changes within the calm page
19. 37
36
Keyfeaturesofthedesign
High-fidelityprototype(mobile)
High-fidelityprototype(desktop)
Suggestionsandprompts
Throughout the site, the user is given prompts
and suggestions to help fulfil their needs at
ease. The homepage gives specific suggestions
based on the time of day. This allows for mind
garden to fit seamlessly into a young persons
routine (benefical for users such as Grace who
have a busy morninh routine). The prototype
shows before school suggestions but this
would change to meditations for after school
and on the weekend as well. The homepage
also shows the users any meditations that they
have favourited. These are also accessible
from the account page and allow the user to
quickly jump back in to meditations that they
have enjoyed before. These kind of features
are important for the users of the app because
they may open the site whilst experiencing
some stressful or overwhelming emotions,
having suggestions in this way removes some of
the effort for them and quickens their path to
feeling better. After a meditation is completed,
the user is prompted with alternative tasks
to do if they are still experiencing negative
emotions. This reassures the user if they first
tool did not help them, the user can choose to
skip this stage if need be.
Leader-board
A key feature within the design is the
leader board. A struggle that arose
from the user personas (particulalry
Dan) was a lack of motivation. A
leader-board alongside the mind-
garden creates competition between
users and encourages them to start
implementing healthy habits such as
meditating and journalling into their
routine.
Sleepfeature
Within the application is a dedicated section
for meditations and music to aid sleep.
Particularly benefical for users like Joey who
often have trouble sleeping, this section is
purposefully designed in a darker colour
theme than the rest of the site to help ease
the use of screens before bed time.
Meditationanimation
When the user carries out a meditation, the
corresponding flower grows in time with the
inhale and exhale of the breath.
Meditation suggestions
on the home page
Prompt after meditation is
completed Leader-board section of the mind garden/
account page
Sleep browser page
Sleep meditation description
Sleep meditation player
20. 38
Phasethree:visualdesign
The final stage of the process was visual design. This section of the report details the visual
design choices made for the final prototype as well as the component library used in order
to keep the design consistent throughout and across platforms.
Additionalfeatures
Adviceandresources
When dealing with young people and mental health I wanted to ensure that
the site provided sufficient resources. The website contains advice split
into the three main sections of the site: calm, focus and sleep. The topics
link directly to the themes of the meditation videos. This means that if the
meditation doesn’t help in itself, the user can read directly about the issue
they are experiencing . There is also a page dedicated to mental health
resources for young people so that if people are in a crisis when visiting the
site, there are resources provided to help them get the assistance they need.
Tracking
Within the mind garden,
users are able to track their
progress across different
time frames. This means it
doesn’t matter if a user had
a bad week and forgets to
meditate because they can
still see their past progress.
Footer
The footer allows the user to
access the more ‘additional’
pages of the site. It also allows
them to access mind gardens
social media pages as well as
changing the language of the
site.
21. 41
40
Componentlibrary
Brandingandvisualdesign
Thelogo
The mind garden logo-type uses the typeface Macho due to its
bold but playful nature. Its letters have curved and angled edges
which make it youthful without being patronising. The letter ‘I’
is edited so that it appears as if a plant is growing out of it. This
reflects the imagery of the site and the metaphor of mental
growth.
Illustrations
A combination of my own illustrations as well as stock illustrations are used
throughout the site to maintain a calming environment. The lack of detail in the
people allows the user to identify with them and feel like anyone can use the
website. The flowers are colourful in order to attract the user to complete the
corresponding meditation and add the flower to their mind garden.
Colourscheme
The colours used within the design were purposely chosen to
create a calming environment for the user. Muted and pastel
tones of the colours are used that create this effect but still
highlight the different functions and components of the site.
Multiple green shades are used to represent the theme of
plants and growth. The three main colours of green, yellow and
blue are also used throughout the site to reiterate the themes of
calm, focus and sleep. (Additional colours are used to represent
the different flowers that the users are able to grow).
Primary and secondary buttons and their
corresponding hover states
Component icons
Search and filter component for mobile
Video player component Drop down menu
A library of components was constructed in order to
create a consistent and intuitive design for the user.
Only two button types were created so that the user
recognizes these as a call to action across the sight.
Green is used for buttons which complete a more
significant action like playing a video. White buttons are
used for actions like selecting the filter menu.
Icons are used throughout the site in conventional styles
that the user would recognize such as a favourites icon,
account icon, burger menu and exit icon.
A search and filter component is also implemented
throughout much of the site, allowing for a personalised
experience for the user.
22. 43
42
Summary
Overall, this project was extremely worthwhile. I learnt the importance of fully
understanding and empathising with the user and the needs. Undertaking user
personas, interviews and testing allowed me to see the importance in always
putting the user first. It also taught gave me insight into the needs of young
people in particular and how these may differ to adult generations.
I believe I have created a prototype of a web app that would help ease the
stress of young people during their education as well as motivating to imple-
ment healthy habits into their routine which they could take into adulthood.
Resubmission
23. 45
44
Improvingmenus Desktopfilterexperience
Old desktop menu
One of the main improvements made for resubmission was
developing the menus for the site. In particular the desktop
version was changed from a menu that stemmed from a burger
icon and took up the whole screen to smaller drop down,
hover menus from the navigation bar. These allow for the
information to be split up into more detailed sections to help
the user direct their needs. Illustrations have also been placed
on these menus to maintain the site branding and keep a calm
atmosphere throughout.
An aspect lacking in effective user experience was the filter
function for desktop. This was previously taken from the filter
format for mobile but has now been developed to better
accommodate the desktop platform. The filter menu now
acts as a drop down which also features illustrative leaves to
maintain interest in an otherwise plain feature. Once filtered,
the page then displays the filter button greyed out with how
many filters have been applied, and then the following filters
that have been applied are listed. This helps the user to
remember what filters are applied to the search results.
New desktop menus
Old desktop filter function New desktop filter function
Old vs new mobile menu
24. 47
46
Prototypelinks
Mobile prototype: https://xd.adobe.com/view/84b17da2-1f1e-44f6-91a6-
94379a2d1286-d1e2/?fullscreen
Desktop prototype: https://xd.adobe.com/view/4a28296e-0209-4174-9d8b-
77c5618335ab-1f7b/?fullscreen
Creatingvariationacrossthesite
Banner advert with weekly limeted edition plant added to create
excitement for users
Old video format New video format
For resubmission I also created ways in which the site
could be more exciting for users. The simplicity of
the layout creates a repetitive format. To remedy this
i implemented new styles of plants, flowers and trees
that the user can earn from completing a meditation. I
also created different perspectives of these plants which
creates a more exciting browsing experience for the user
(particularly important for a younger audience).
25. 48
Referencesandacknowledgements
NCCIH (2022). Meditation and Mindfulness: What You Need To Know. [online] NCCIH.
Available at: https://www.nccih.nih.gov/health/meditation-and-mindfulness-what-you-need-to-
know.
Illustrations of people sourced from https://undraw.co/illustrations
Trees and flowers either created by myself or sources from https://www.flaticon.com
