Website Application Report

Christi Van Heerden | TY3DP3

Project Overview | 1
2 | Project Overview
 Introducing Reset
1. Project Overview About anxiety

Competitor analysis
2. Empathise User interviews

User personas
User journeys
3. Define Page flows

Contents
Site map

Low-fidelity wireframes
Mid-fidelity wireframes
4. Prototype Usability testing
High-fidelity wireframes

Visual design
5. Visual Design Design system

6. Prototype Links Desktop

Mobile
Project Overview | 3
 Introducing Reset
1. Project Overview About anxiety

Competitor analysis
2. Empathise User interviews

Project
User personas
3. Define User journeys
Site map

Overview Low-fidelity wireframes

Mid-fidelity wireframes
4. Prototype Usability testing
High-fidelity wireframes

Visual design
5. Visual Design Design system

Desktop
6. Prototype Links Mobile
4 | Project Overview
Introducing Reset

Reset aims to be a welcoming and relaxed space where users can

explore numerous avenues of anxiety management at their own
pace and from the comfort of their own home.

It is a website application that caters for both people with

situational anxiety and constant anxiety. Reset provides informative
articles about the differnt self-help activities on offer, as well as
activities that users can perform at home to help reduce their
anxiety.

Unlike other website applications that just provide information

or isolated ideas and activities, Reset offers a variety of self-help
remedies and activities that can help the users to regulate and
manage their anxiety and encourage relaxation. A quiz is available
to the users if they are unsure of what area needs working on, and
they would like to know exactly what activity will be best suited to
them.

Reset is not like online counselling, but it is perfect for someone

who would like to tackle feelings of anxiety privately and without
having to involve stressful and costly remedies.

The website application also has a progress logging

system where the users can see if the activities are reducing their
anxiety levels, or if they need to seek further medical help that
Reset cannot offer. Reset however provides useful further help
links at the bottom of the homepage for the user if need be.

Project Overview | 5
 About anxiety: Research

What is anxiety? Symptoms of anxiety

Symptoms include:
Anxiety is a feeling of unease, such as worry or fear, that can
be mild or severe. It can be situational or constant. • Uncontrollable worry
(NHS, 2022)
• Muscle tension

Types of anxiety • Difficulty sleeping

There are five major different types of anxiety: • Difficulty concentrating

• Generalised Anxiety disorder • Restlessness

• Social Anxiety disorder (NHS, 2022) ( Healthline, 2022)

• Obsessive Compulsive disorder

Key statistics
• Panic disorder
In the UK, over 8 million people are suffering from an anxiety
• Post-traumatic stress disorder disorder at any one time.

Less than 50% of people with generalised anxiety

What triggers anxiety? disorder access treatment.

There are many different factors that can cause anxiety, some
including: Personal triggers, public events, general stress,
conflict, negative thinking, skipping meals, work, and
universty studies, caffeine, health issues, and finance
concerns. (https://www.healthline.com/health/anxiety/anxiety-
triggers#identifying-triggers)
An estimated 822,000 workers are affected by work
related stress, depression or anxiety every year.
For employees aged between 16-24, 67% reported
experiencing symptoms of anxiety. Employees aged between
25 and 34 were the next most affected group, with 66% of
the age range reporting symptoms of mild to severe anxiety.
(Champion Health, 2023)

6 | Project Overview
 Introducing Reset
1. Project Overview About anxiety

Competitor
Competitoranalysis
2. Empathise
2. Empathise User interviews
User
analysis
interviews

User personas
3. Define User journeys

Empathise Site map

Low-fidelity wireframes
Mid-fidelity wireframes
4. Prototype Usability testing
High-fidelity wireframes

Visual design
5. Visual Design Design system

6. Prototype Links Desktop

Mobile
Project Overview | 7
 Competitor analysis: Calm

Calm website
Calm is a web application and app that helps people with sleep,
meditation, and relaxation. The are videos, podcasts and sounds
that help the user to learn how to meditate, get a more restful sleep,
better focus whilst working or studying, and mindful movement and
stretching for relaxation.

Calm aims to help people feel more focused or more relaxed.

The website attempts to do so by providing videos and podcasts
that teach and inform the users with tips and activities such as
meditation and listening to other relaxing sounds.

Calm is a competitor because the aim of Reset is also to

calm and de-stress people who are suffering from anxiety.

Additionally the websites are similar in the sense that Reset will also
provide instructional videos and podcasts.

However, Calm focuses on mindful movement and self-massage

methods, where Reset offers a more versatile range of instructional
yoga videos.

8 | Empathise
Competitor analysis: Calm

Buttons change to colour

gradient when selected. Horizontal scroll
carousel.

Topics and
themes shown
on the side.
Calming landscape
background photo. Icon colour
changes when
hovering over it.

The Photographic background of the homepage landscape helps

create a relaxed environment. It is transcending. The use of nature and water
feature ties in well with the theme of ‘calm’.

The buttons change colour once you select it. This is a useful element as it Large image
lets the user know that the button has been in the background
selected. of podcast.

The use of colour for different options. It is satisfying and creates clear
differentiation. Soft rounded buttons give a welcoming and friendly feel.

The different sounds and podcasts can be explored with a horizontal scroll
bar. This allows for a quick and easy naviagtion. The user can easily scroll
back and forth. However there is an option to see all of the sounds/ podcasts
by selecting the button ‘See All’. This allows the viewer to see everything that
is offered under the topic heading, and saves them having to scroll through
everything and forgetting what they previously saw.

The photo background for the podcast shown on the bottom right gives the
user a soothing image to look at whilst listening to the podcast message.
Empathise | 9
nu Competitor analysis: Calm

Outlined
buttons
that change
colour when
selected.

Rounded Landscape
buttons sound icon The sound has
change colour a highlited outline
when tapped. to signify it is
selected.

Side scroll is `
unconventional
and fresh

The outlines around the circles on the menu (second mockup) enhance
their appearance as buttons that can be pressed. When hovering over
the button, it changes colour. This adds visual interest. Simple but
effect icon illustrations.
The rounded buttons (first mockup) creates a soft visual finish, and
the colour changing element helps the user to know that the button
has been selected.
The scale of the rounded boxes change on a mobile. Only two rounded
squares fit in a row, so you scroll vertically to see all of the options, whereas
on the desktop almost all of the boxes are visible on one page. On the mobile
it works well in rows of two because it allows the user to clearly see the
different options available. The scale makes it easy to navigate.
A design decision that could be seen as confusing is the fact that landscape
sounds icon is depicted in the top corner of the web page (mockup three)
and not on the menu with the other sound topics.

10 | Empathise
Competitor analysis: Headspace

Headspace website
Headspace is web application that provides mindfulness tools
and teaches the users how to meditate. Headspace has a website
where you can read informative articles about meditation, sleep,
mindfulness, and tackling stress. However, to see and complete
the mindful activities (dance breaks, mindful cardio, meditation
podcasts etc.), the user must create an account, and pay a fee. Reset
will work in a similar way where the users can explore the website
and read informative articles, but to participate in any activity
programs and podcasts, they must create an account and pay.

Headspace is a competitor because it offers tools to help people

cope with stress. It does so through offering informative articles,
meditation podcasts for relaxation and better sleep, music to help
focus or relax, and active activities. My web application will also
offer a variety of self-help activities. Reset will also offer an option
to log activities and mood progress, however the progress will be
heavily based on how the users get on with the activities to see if
they are helping the users.

Empathise | 11
 Competitor analysis: Headspace

Colour coded topic

headings.

Big, colourful
buttons with
illustrations for
different topics.

‘Headspace’ desktop and mobile website incorporates colourful

illustrations in their website which gives it an inviting and more light
hearted appearance.

There are colour coded headings in the top left corners of the articles Clear drop-down
menu with
which helps the user to navigate the topics. clear hierarchy.

The different topics (top right mockup) are clearly depicted in

different bright colours that stand out. It could be seen as a bit The top articles are
overwhelming with all of the colours, however there is clear given the most
differentiation between the different topics. Prominence with
illustrations and
they are centred.
The drop down menu shows clear hierarchy (mockup to the right).
When selecting meditation, the top articles are noticed first with their
illustrations, followed by the text on the sides.

12 | Empathise
Competitor analysis: Headspace
Progress chart Colourful buttons
that tracks mood Meditation on menu with different topics
Articles at
large scale.
The 3d effect
makes articles
tand out and
appear clickable.

The progress can only be seen on the mobile version of Headspace. one article at a time, especially if there are a lot of articles to scroll through.
It depicts a bar chart based off of when you checkin and answer
questions about your current mood. It could be more useful to ask the The burer menu has a clear layout, however when selecting a topic, for
questions after an activity rather than just randomly based off of your example meditation (mockup 3) as I did for the desktop, the layout is clear
general daily mood. but quite unconventional with the placement of the images. It appears as
though it was designed for the desktop, but not for the phone.
The articles are presented one by one vertically in the centre of the
screen, whereas on the desktop articles are shown in rows of two. It is
at a very legible scale, however some users may want to see more than

Empathise | 13
 Competitor analysis: Well + Good

Well + Good website

Well + Good is a wellbeing website that works to inform and educate
communities and individuals. It is a digital publication community
that ‘decodes and demystifies what is means to live a well life, inside
and out.’ The website provides articles about skin care tips, food
and nutrition, holistic treatment, fitness, and relationahip tips. Well
+ Good also provides a podcast, live talks, and in studio sessions for
fitness.

Well + Good is a competitior because they offer such a broad range

of articles on the topic of mental and physical wellbeing, and Reset
will aim to provide informative articles on the self-help activities it
provides, so: meditation, yoga, Nutrition, and sound.

14 | Empathise
Competitor analysis: Well + Good

Use of white space

places more focus Horizontal scroll
On the images and carousel.
text in the middle.

Colour blocking
separates the
website into sec-
Unusual shape for tions and creates
main article which differentiation.
is intriguing.

The desktop homepage for Well + Good has a clean and simple layout.

There is colour blocking which separates and helps the user to distinguish
between the different topics and elements on the page.
Video icon to
signify that 1:
The ‘Explore by’ section has a horizontal scroll. This adds visual theres a video,
interest because on desktop websites the typical scroll is vertical. It is 2: Its clickable.
unconventional and fresh.

Big photographs which is useful in engaging the users and helping them to
better understand the content.

The video icon on the images above shows the user that clicking on the
image will play a video. There is a sense of hierarchy because the ‘most
important’ video is depicted at the largest scale, and the other trending
articles are on the side.

Empathise | 15
 Competitor analysis: Well + Good

The mobile homepage has a simple layout like the desktop The menu stands out because the background has been darkened so t
version, with centred text and image. There is a sufficient amount of hat the focus is on the menu.
white space surrounding the elements on the page, which places more
interest on the elements displayed in an uncluttered layout. The colour blocking separates and helps the user to distinguish between
the different topics and elements on the page.
The ‘watch with us’ videos layout has slightly changed on the
mobile version. The main video is displayed big and centred, and the
other videos have been placed below and can be scrolled through
horizontally. This provides an easy navigation for the user.

16 | Empathise
Competitor analysis: Better Sleep

Better Sleep website

Better Sleep is a website application that focuses on improveing
users sleep routines and therfore improving their mental and
physical wellbeing. Better Sleep provides peaceful soundscapes,
meditation podcasts, bedtime stories, and articles in attempt to help
the user sleep better and feel more rested.

The website application is a competitor because Reset will provides

similar activities such as soundscapes and meditation podcasts, as
well as informative articles. However, it is worth noting that Better
Sleep’s focus is improving users’ sleep routines, whereas Reset’s
focus will be to reduce users’
feelings of anxiety.

Empathise | 17
 Competitor analysis: Better Sleep

Sound icon swings

when clicked and
brightens up.
Label to indicate
The line beneath
program.
is to adjust volume.

Illustrated articles
Sound can be paused are aesthetic and
and adjusted here. allow for a more
There is a timer light-hearted and
icon, however it only enjoyable approach.
works on mobile.

Better Sleep takes on an illustrated approach for their website

application. This is a design decision I have made for Reset because it
creates a more light-hearted and enjoyable approach for a complicated
subject matter. It also adds a unique look and identity for the website. Mediation podcast
program with sessions
The sound icons on Better Sleep (mockup one) appear to be hanging listed below.
from the top of the screen like sound chimes. When selecting a sound, the
icon movesand brightens to signify that is has been selected.

The meditation podcasts and stories (mockup two) are layed out in
columns of four. This allows for the user to see many options at once, in
a clear and organised layout. The program stands out because it is not
square like the rest and is labelled.
Rounded blue buttons
stand out.

18 | Empathise
Competitor analysis: Better Sleep

The mobile layout of Better Sleep is very similar to the desktop
version. On the sound icons page, less sounds can be viewed ar one
time, however the user can scroll sideways to see the other options.
On the mobile, a time duration can be selected for the length of time
that the user wishes to listen to the sound. The ‘fade out’ option is
smart because it means that the user can fall asleep to the sound and
then it will fade out and not wake up or disturb the user.
This layout also helps the page to appear more clean, because the
illustrations are quite detailed, and seeing more options on the screen could
look cluttered and overly busy. The program stands out because it takes up a
whole row. This displays differentiation and hierarchy.
When selecting a podcast, the image is bigger and a more in depth
explanation of the podcast can be seen.

The meditation podcasts and stories format has changed slightly.

Instead of viewing four podcasts per row, it is now two to allow the
user to properly see and read the description of the Podcasts.
Empathise | 19
 User interviews

Understanding user needs Interview

Date and time here
User interviews were conducted and shared by peers in class who
shared a similar website topic (anxiety and stress). 1. Tell me a bit about yourself. What is your occupation?
I conducted an interview via zoom with a 26 year old Medical
university student in his clinical years, who suffers from situational
“I am 26 years old and I am a Medical student in my clinical
anxiety, and I used the Interview results collected by two of my peers years, and I am currently living in Ireland.”
Interviews to further inform my user research and design decisions.
2. How long have you been in this occupation?
The interviews were useful and helped me to better understand ”Three years.”
the needs and goals of users who suffer from situational/constant
anxiety, and what they currently do to address the feelings of 3. So tell me, what does an average day at university look like for
anxiousness.
you?

Now I will ask you questions in relation to the topic of anxiety.

You don’t have to answer a question if you don’t feel comfortable,
and we can stop at any time if you want to. Are you happy to carry

Interview objectives on?

”Yes I am.”

The main objectives of the interview was to understand what type 4. How often do you feel anxious?
of anxiety the student suffers from, why he suffers from anxiety ”I would say a few times a week.”
(pain points), and what he currently does to cope with those feelings,
so that I can make appropriate design decisions for my website 5. Do you have trouble controlling your anxiety?
application to make sure that it meets the needs of the users.
”Sometimes I have trouble yes.”

6. How does your anxiety manifest?

”More like a general shutdown. I don’t really do anything.”

20 | Empathise
 User interviews
7. Is your anxiety situational or would you describe yourself as an
anxious person in general?
”No I don’t think I am an anxious person, it is mostly situational
to do with my workload at university.”
8. Do you often feel like avoiding certain social situations or try
to escape from uncomfortable situations?
”Not really, no.”
9. Do you think you suffer from negative thoughts that makes
you feel anxious?
“No, I would say it is almost the other way around. I suffer
negative thoughts because of the anxiousness rather than
negative thoughts causing the anxiety itself.”
10. Are you able to identify triggers that cause your anxiety?
“I would say that the overarching cause of the anxiety is the
amount of work and the level of work. But there may be smaller
situations other than that that exacerbated.”
11. Does your anxiety level interfere with your day to day living?
“Not my day to day living as much, more my ability to do work.”
12. Are you able to regulate your anxiety effectively?
“Sometimes, but other times it is a bit more challenging and I
need to take longer breaks, or figure out something else to do.”
13. What do you do when you feel anxious?
“Usually, I stop working and end up procrastinating for a long
time, usually with something like social media.”
14. Where do you currently find information and support to help
you feel less anxious?
“The information I have, is in my textbooks to be honest, I have
looked briefly online but didn’t really find anything that I felt
was sufficient. I haven’t really looked for any kind of support.”
15. Do you feel that your anxiety limits your social interaction or
interferes with your ability to work/study?
“Not my social interaction, but it definitely affects my ability
to work and study.”
16. Do you think that you get enough quality sleep? How many
hours do you get every night on average?
“Definitely not, no. I get maybe about 4 1/2 –5 hours on
average.”
17. How active are you? Does it make you feel less anxious?
“I would say I am relatively active, I try to exercise at least
three times a week. It helps to improve my mood and I feel
more relaxed after.”
18. What type of exercise do you enjoy?
“I like splitting my time between cardiovascular exercise and
strength training.”
Empathise | 21
 User interviews
19. Would you consider yourself to have a healthy and balanced
diet?
“Yes I would say so. There is no food group that I cut out, but I
try to eat less red meat. Other than that, I would say I have
a pretty balanced diet and I wouldn’t shy away from eating
anything either.”
20. Do you have any bad habits that have appeared as a result of
feeling anxious? E.g. nail biting or binge eating.
”Nothing jumps to mind immediately. I would say that it is
more to do with my procrastinating. I think that is becoming
my go to stress reliever. That might be a result of the anxiety.”
21. Do you find comfort in speaking to others about how you are
feeling, or do you prefer to keep it to yourself?
”No, it makes me quite uncomfortable speaking to other
people about that kind of stuff.”
22. Do you like listening to music?
“I like listening to pop music, jazz, as well as classical music.
Do you often find yourself feeling more relaxed when
listening to something?
“The instrumental music definitely helps me to feel more
relaxed and at ease.”
22 | Empathise
23. Have you tried listening to podcasts about dealing with
anxiety?
“I have not because I am not really sure where to go about
finding podcasts that can help me deal with the way I am
feeling.
24. Have you searched the internet or looked at books in
search of answers regarding your anxiety and how you are
feeling?
“No, the information that I have is stuff that I have found
in the books that I need for my medical course.
25. Do you think you would find a website that can provide you
with ways to cope and reduce your anxiety useful?
“Yes I think so, but I have read a lot of information about why I
supposedly feel the way I feel, so I am not interested in an
other website that just tells you why you feel anxious.
So would you prefer to use a website application that
provides you with activities to help you?
I would like something where I can read about and complete
activities that can help reduce my anxiousness.
26. Would you find it helpful to record your mood progress?
”It could help me but I think I will get bored if I have to write
something after every activity. I would prefer to track my
mood based off of activities to see if it is helping me, not just
daily check ups based off my daily tasks.”
User interviews

Concluding thoughts Useful questions & answers

From the interview, I understood that my interviewee suffers from
from peer interviews
situational anxiety which stems mainly from his university work-
load. He currently does not do much to improve the feelings. He 1. Does feeling anxious socially affect your job, home, or social
procrastinates and goes on his phone for hours, and this results in him life?
taking longer to complete work tasks. He has read about why he feels
anxious, but has not succeeded in finding ways to reduce the anxiety.
“yes, definitely can affect my job because when faced with a
The interviewee expressed interest in the idea of being able to explore lot of tasks, I can get very overwhelmed quickly. It affects my
and complete activities that could help reduce and control his anxiety. social life as it makes me not want to go out and I distance
myself from everyone.
The interview helped me to gain useful insights into the minds of my
web app users and provided me with valuable information to consider
whilst putting together the web app design.
1. What makes you feel better when you are stressed?
“ A good nights sleep and being able to have some time for
myself to relax. I also like listening to relaxing music.”

2. What problems do you encounter when trying to de-stress?

“Other people talking to me because I just want to be left
alone. Also feeling overstimulated from being worked up. “

3. Do you find that making lists and tracking your progess helps
to reduce your stress?
“I find that making lists helps me feel more organised and
mentally prepared. I have tracked my mood progress before,
but I started forgetting to do it and therefore I didnt benefit
from it.

Empathise | 23
 User interviews

Key quotes from interviews Concluding thoughts

“When I try to de-stress, I often find that I feel too
overstimulated.”
I suffer negative thoughts because of the anxiousness
rather than negative thoughts causing the anxiety itself.”
“I usually stop working and end up procrastinating for
a long time, usually with something like social media.”
Looking at my peers interviews helped me to gain a more in depth
understanding of people who suffer from various forms of anxiety,
whether it be situational or constant. I learnt more about what causes
peoples’ anxiety and how they currently cope with those feelings.
The interviews helped me to form appropriate personas that represent
the needs, goals, frustrations, and motivations of the target users. I was
also able to create well considered user journeys and page flows.

“I would love if there was a website with tips and implement

them into my life to help reduce my anxiety.”

“I would find a progress tracker helpful, but I would prefer

to track my mood based off of activities I complete to see if
they are helping me reduce my anxiety, not just daily mood
check ups based off my daily tasks. “

24 | Empathise
 Introducing Reset
1. Project Over- About anxiety

Competitor analysis
2. Empathise User interviews

User personas
User journeys
3. Define Page flows

Define
Site map

Low-fidelity wireframes
Mid-fidelity wireframes
4. Prototype Usability testing
High-fidelity wireframes

Visual design
5. Visual Design Design system

Desktop
6. Prototype Links Mobile
Project Overview | 25
 User personas: Samuel

About
Samuel is a Medicine student in his clinical years. He
enjoys sport and listening to music. He suffers from
situational anxiety when it comes to studying and
doing work. He finds that exercise helps to calm him
down, however he would like to explore other ways to
further manage his anxiety.
Needs
• Samuel wants to find self-help remedies and
activities to help him to manage his anxiety.
• He would like to find a way to reduce the feel-
ing of restlessness so that he can get into a
better sleep routine.

• Samuel would like to stop procrastinating so

that he can focus on his studies.

Samuel Current behaviour

Samuel feels anxious frequently during his week of
studies. Currently he resorts to procrastinating and
Goals
Occupation: Uni Student goes on social media for hours on end rather than
completing his work. He feels restless frequently and • For Samuel to reduce his anxiety
Age: 26 finds that his head feels noisy and unable to wind
Gender: Male (he/him) down and relax. As a result of his anxiety he only gets • For Samuel to find self-help remedies
4-5 hours sleep every night on average (even though
his sleep hygiene is good). He wants to find tips and • For Samuel to stop procrastinating
activities that he can perform from the comfort of
his own home without needing to speak to someone
• For Samuel to get more sleep
about it.

26 | Define
User personas: Lisa
Lisa
Occupation: Legal secretary
Age: 24
Gender: Female (she/her)
About
Lisa works as a legal secretary. She suffers from social
and work anxiety which has a negative affect on her
social life. She often feels overwhelmed by the work
load which makes her not want to go out and so she
distances herself from her friends. She tries to avoid
social situations because speaking to others makes her
nervous. She doesn’t allow herself enough quiet time
and doesn’t get enough rest because of her work load.
Current behaviour
Lisa goes into shuts down mode when she is
anxious. She distances herself from her friends. She
has gone for counselling to try and talk about her
feelings, but she would like to find activities that she
can perform from home.
Needs
• Lisa needs to find a way to control her work
load.
• Lisa needs to gain control over her work load
so that she can have a better social life.
• Lisa needs more time to herself to relax.
• Lisa needs more rest.
Goals
• Lisa is in control of her work.
• Lisa has a clear mind and feels in control.
• Lisa has a better social life.
• Lisa gets more rest and has time
to herself.
Define | 27
 User personas: Mary

About Needs
Mary is a busy woman who works part-time at the • Mary needs to find a way to clear her mind.
food bank and when she is not working, she needs to
take care of the house and help her kids with school • Mary needs to find a way to organise herself.
work. She feels stressed and anxious daily because she
constantly has a lot on her mind and doesn’t always
• Mary needs to find short, effective active
know where to start. She is not as active as she would
like to be, because she does not have a lot of free-time activities to help with stress relief.
to go to the gym.

Mary Goals
Occupation: part-time Current behaviour • For Mary to have a clear mind

working mother Currently, Mary doesn’t really know how to approach

• For Mary to feel organised
Age: 45 this feeling of anxiety. She finds that unexpected
• For Mary to be more active
situations or last minute plan changes in her day
Gender: Female (she/her) stresses her out, and then she tries to get away and
avoid the situation rather than dealing with it at hand. • For Mary to feel more relaxed
She likes to create lists to help feel more in control.

In creating personas, I was able to empathise

with the users and keep in mind their needs
and goals when making my design decisions.

28 | Define
User journeys

Trigger Action Action Action Goal

Samuel looks at Samuel wants to try Samuel puts on Samuel has
Samuel has study different stress- listening to calming background noise reduced the feeling
related anxiety. relieving self-help music/sounds. whilst he studies. of anxiousness
activities . whilst studying.

Samuel

Trigger Action Action Action Goal

Lisa answers Lisa’s sleep routine Lisa uses the Lisa feels less anxious
Lisa experiences work questions to is poor. She doesn’t knowledge because she gets more
and social anxiety find out what allow herself from the articles rest and allows herself
activities are suited enough quiet time. and starts to more quiet time.
for her. She explores meditate. .
meditation.
Lisa

Define | 29
 User journeys

Trigger Action Action Action Goal

Mary suffers from Mary explores different Mary explores yoga Mary logs her Mary feels less
situational work/family activities to help her and follow along to a session so she can anxious. She feels
anxiety. reduce her anxiety. instructional yoga track her progress organized and in
video session. control.
Mary

User journeys thoughts

With the information provided by my user personas, I created user
journeys in order to show my users’ steps needed to accomplish their
goals. The user journeys helped me to identify the different and
necessary ways to enable the user to achieve their goal as quickly
and easily as possible.

30 | Define
Page flows

Trigger Action Action Action Goal

Sam selects an Samuel has

Sam goes to
Sam looks over the ambient sound to reduced the feeling
Samuel has study homepage and
articles & sounds listen to whilst he of anxiousness and
related anxiety. selects Sounds in
that are offered. studies. can focus whilst
the activities list.
studying.

Samuel
CTA- Explore the CTA-read article on CTA-listen to sound
sound page how sound helps to to help focus.
focus on work.

Lisa navigates the Lisa reads articles Lisa feels less

homepage and selects Lisa views her quiz anxious because she
Lisa experiences work results. She explores about the benefits
the quiz to help her of meditation, and gets more rest and
and social anxiety. Meditation.
find the activity starts to meditate allows herself more
suggested for her. quiet time.

Lisa
CTA- Complete quiz CTA- Explore CTA- Read meditation
meditation articles

Define | 31
 Page flows

Mary looks over Mary logs her

Mary suffers from Mary navigates the Mary feels less
the yoga programs session and
situational work and homepage and anxious. She feels
and watches a schedules more
family anxiety explores yoga. organized and in
yoga session. yoga sessions. control.

Mary
CTA- Explore yoga CTA- Follow along to CTA- Log session &
yoga program schedule more sessions

Page flows thoughts

I created page flows based on the user journeys to show the actions
that the users must take on the website, in order to complete the
tasks and achieve their goal/s. The page flows were insightful when it
came to starting the design of the website application and creating
the information architecture of it.

32 | Define
Site map

Homepage

Body Mind About Reset Log in/profile

Progress
Nutrition Yoga Meditation Sound

Log Schedule
Articles Meal plans Articles Videos Articles Podcasts Articles Sounds

A site map displaying web application break-points

Define | 33
 Introducing Reset
1. Project Over- About anxiety

Competitor analysis
2. Empathise User interviews

User personas
User journeys
3. Define Page flows
Site map

Prototype Low-fidelity wireframes

Mid-fidelity wireframes
4. Prototype Usability testing
High-fidelity wirerframes

Visual design
5. Visual Design Design system

6. Prototype Links Desktop

Mobile
34 | Define
Low-fidelity wireframes: Yoga activity & progress log

Mobile
Add activity from account page Choose a yoga program Read overview and follow
along to yoga video

Select yoga

End of the week,

see weekly progress
with flower garden

Add to
weekly
calender
View progress, if activity is
complete, you will grow a flower
View activity and select on that day. (monitors progress
progress on profile in a fun way)
Prototype | 35
 Low-fidelity wireframes: Yoga activity & progress log

Desktop

36 | Prototype
Low-fidelity wireframes: Quiz and meditation journey

Mobile

Read informative article

Navigate homepage Answer quiz questions Read quiz results to see to help meditate
Explore meditation
and select quiz to refine about lifestyle to what needs working on page and select an
needs if uncertain identify problem areas to reduce anxiety article
and see what activity
could help user

Prototype | 37
 Low-fidelity wireframes: Quiz and meditation journey

Desktop

38 | Prototype
 Low-fidelity wireframes: Soundscapes activity journey

Mobile

Listen to the sound of

trees rustling in wind.
Select a sound category Adjust the time length
(sleep, unwind, focus) of soundscape. Fade out
option for if user want
to fall asleep

Navigate soundscapes Select ‘listen with me’

from the homepage to explore the available
sounds that user can
listen to

Prototype | 39
 Low-fidelity wireframes: Soundscapes activity journey

Desktop

40 | Prototype
Mid-fidelity wireframes: Yoga activity & progress log

Yoga experience Yoga page Yoga program Profile page to track

Homepage questions x 3 with sessions Mood tracker page activity & mood progress

This journey takes the user from the homepage to the yoga page,
however the user must answer the experience questions first in order
to have articles and programs catered just for them.

The illustrated yoga person represents the yoga. I decided to get

rid of the growing flowers idea because I don’t think it helps the user.
It would be more important to track the users’ mood after having
completed an activity to see if it is helping them to reduce their anxiety
levels. The wireframe page with the the faces allows the user to select
their mood after completing an activity, without the obligation of having
to write a reflection. On the profile page the user can track their mood
progress based on the activities they are taking part in to help reduce
their anxiety. The user can also store their activities on the profile page
to be able to easily navigate to the programs/ podcasts they are currently
listening to/following along to. Prototype | 41
 Mid-fidelity wireframes: Quiz & meditation journey

Quiz page with 9 questions about the user’s lifestyle to determine problem areas and mindful solutions

The quiz allows users’ who feel unsure of what mindful activity to try
out , to narrow down their choices based on their quiz answers. The
quiz results will encourage specific activites (e.g. meditation) if the
user does not have enough quiet time to themselves and doesn’t
sleep well or focus).

42 | Prototype
Mid-fidelity wireframes: Quiz & meditation journey

Informative
Quiz results page Meditation page meditation article

Prototype | 43
 Mid-fidelity wireframes: Soundscapes journey

Sounds available Must sign up to

Soundscapes page to listen to log progress Mood tracker
pop-up page

44 | Prototype
Usability testing on mobile web app

Usability testing Usability test questions

In order to test and evaluate the usability of the prototype website 1. Could you please go through the process of creating an
application, I conducted usability tests with three users that fall account and logging an activity?
under a similar demographic to that of my user personas.
2. Please can you complete the quiz and explore the outcomes?
The testing helped me to assess how the users approach the tasks
on the web application prototype and whether it met their needs or 3. Could you explore the peaceful sounds page?
not. The testing also enabled me to develop a better understanding
of the preferences regarding the user interface. 4. Can you tell me what you are looking at on the homepage?
I gave the users a set of specific tasks that they had to complete.
5. What is the most important feature of the homepage for you?
This gave me useful insights into the interface problems and areas
that needed attention.
6. Which part of the web app would you be more inclined to use?

7. Do you find that being able to log and view your progress is useful
for you?

8. Do you think the website provides you with enough self-help solu-
tions?

9. Would you like to see information for online counselling?

Prototype | 45
 Usability testing results

Test
Test01:Target
01:TargetDemo
Demo Test
Parent Test02:
02:Target
TargetDemo
Demo Test
Test03:
03:Target
TargetDemo
Demo
Parent(domestic
(domesticand
andwork
work Student
Student(university
(universitywork
workanxiety)
anxiety) Young
Youngworking
workingadult(social
adult(social&&work
work
anxiety)
anxiety) anxiety)
anxiety)
Positive
PositiveFeedback
Feedback Positive
PositiveFeedback
Feedback Positive
PositiveFeedback
Feedback
-Clear homepage structure which allows for good -Process of creating account is easy. -Clear and uncluttered homepage.
-Clear homepage structure which allows for good -Process of creating account is easy. -Clear and uncluttered homepage.
navigation to other pages on the web app.
navigation to other pages on the web app.
-Pleased that there is no payment pop-up and that -Clear navigation across the website.
-Pleased that there is no payment pop-up and that -Clear navigation across the website.
-clear hierarchy on profile page the website application is free to use. (community
-clear hierarchy on profile page the website application is free to use. (community
sponsored) -Good variety of activity choices to choose from.
sponsored) -Good variety of activity choices to choose from.
-Quiz is useful as it provides a more focused
-Quiz is useful as it provides a more focused
approach for the user. -The website is appropriate for users that do not want -Rounded buttons make the website feel more
approach for the user. -The website is appropriate for users that do not want -Rounded buttons make the website feel more
to speak to anyone and wants to tackle anxiety alone. friendly.
to speak to anyone and wants to tackle anxiety alone. friendly.
-The activity and mood logging system is useful. User
-The activity and mood logging system is useful. User
likes to be able to track progress. -On homepage, the reviews make the website -Please with the fact that there are a range of
likes to be able to track progress. -On homepage,
application the reviews
feel welcoming andmake the
like a website hub.
communal -Please with the fact that there are a range of
application feel welcoming and like a communal hub. mental and physical self-help activities available,
mental and physical self-help activities available,
-Activities are most important on the homepage. compared to other website apps that only offer one
-Activities are most important on the homepage. compared to other website apps that only offer one
solution.
solution.
-Would use yoga most. Convenient and easy.
-Would use yoga most. Convenient and easy.
Sessions already planned. Level appropriate.
Sessions already planned. Level appropriate.

Things
Thingstotowork
workon
on Things
Thingstotowork
workon
on Things
Thingstotowork
workon
on
-Side scroll not clearly shown, which means the user may -Consider that people using the website will not be in a -Trending Articles are confusing. Makes it seem like some
-Side
miss outscroll not clearly
on looking shown, which means the user may
at activities. -Consider
good that people using the website will not be in a
mindset. -Trending
articles/ Articlesare
activities aremore
confusing. Makes it seem like some
important.
miss out on looking at activities. good mindset. articles/ activities are more important.
-Not enough quiz questions to provide an accurate -Move the sign up/login to log activity that pops up after -For logging activity and mood, could include reflection
-Not enough
activity quiz questions to provide an accurate
recommendation. -Move the an
completing signactivity,
up/login to to log activity
earlier on whenthat pops
they up after
browse -For to
diary logging
see in activity and mood,
more depth couldprogresses.
how mood include reflection
activity recommendation. completing an activity, to earlier on when they browse diary to see in more depth how mood progresses.
the programs/interactive sounds.
-No need for Achievements box on profile page, can just the programs/interactive sounds. -Would like to see that there is an option to speak to
-No need for Achievements box on profile page, can just -Would like to see that there is an option to speak to
have achievement pop-up after completing a program. -Buttons can be a bit bigger. someone, a link to an online counselor perhaps.
have achievement pop-up after completing a program. -Buttons can be a bit bigger. someone, a link to an online counselor perhaps.
-Listen with me button on peaceful sounds page is -find a different way to track progress on the -would put quiz above articles, more important.
-Listen with me button on peaceful sounds page is -would put quiz above articles, more important.
misleading, make clear with peaceful sounds option that profile page. The face icons that go under each
misleading,
takes make
you to the clear with
different peaceful
sounds to listensounds
to. option that
takes you to the different sounds to listen to. day of the week makes it look like you can
only do one activity a day and it appears a bit
misleading.

46 | Prototype
Usabiity testing summary

Summary of findings
Most of the problems that flared up during the usability testing was beneficial for them to be able to have the option to write a reflection
to do with the presentation of the elements on the web application instead of just choosing a face Icon. This is something I will strongly
pages. There was confusion with some of the button layouts, for consider because it will allow the users to better evaluate how their
example, the side scroll for activities does not have anything that mood progresses with the activities they complete. Lastly, another
indicate it is possible to side scroll, and this means that users could key element that I will be looking at again is the progress logger on
miss out on valuable parts of the web application. Other buttons the profile page. I want it to be able to be easily understood by the
such as the ‘listen with me’, ‘stretch with me’ and ‘meditate with me’ user so that they can easily track theit improvements and see if their
were misleading to the users and they said that they would prefer anxiety levels are dropping with the help of the activities.
to just have both articles and programs/podcasts on the same web
application page. One of my users expressed the idea of creating a time for the
soundscapes page and perhaps a fade out option in case the user
One of my users disliked the idea of having to fill in the yoga wanted to unwind and fell asleep.
experience questions before being able to get to the yoga page
with articles and programs. They thought it was unecessary and
more of a pain, especially if it were to pop up every time. This gave
me the idea to remove the questions, and rather create filters on
the different activity pages so that users can filter their choices.
This will allow for a better navigation.

My users did not feel that the quiz was detailed enough to provide
accurate activity suggestions. It was recommended that I add more
questions that could provide a more accurate understanding of the
user’s needs.

An important point that was raised by a user was that people using
the web app will not be in a good mindset, and therefore it could be

Prototype | 47
 High-fidelity wireframes: Yoga activity & progress log

Mobile
Yoga page with
articles & programs
Homepage Homepage together Yoga program Yoga session video

For my yoga activity and progress log I have responded to user

testing by outting the yoga articles and yoga programs together
on one page. I have also removed the questions that pop up
before the user can get to the yoga page due to it being more
of an annoyance and not creating a smooth user journey, and
instead I created filters for the users’ level of experience, their
reason for wanting to do yoga (unwind, sleep, focus), and how
long they would like to do yoga for. Continue to next page for
48 | Prototype the progress log steps following the activity.
High-fidelity wireframes: Yoga activity & progress log

Mobile Profile where users can Profile where users can

see schedule, progress & see schedule, progress &
Mood log following activity Schedule more sessions Schedule more sessions saved activities. saved activities.

I responded to user testing on my progress log by providing the users

with the option to write a reflection additionally if they felt tha they
wanted to. I also found a more appropriate way to showcase the users’
mood progress so that they can see how they are progressing by
completing their activities. I decided to remove ‘Achievments’ from
the profile page. It was not really appropriate, and I thought it would
be better for the users’ to be able to store their current activities
(podcasts and programs e.g.) so that they can easily navigate back to it.
Prototype | 49
Users can also save their favourite calming sounds.
 High-fidelity wireframes: Yoga activity & progress log

Desktop
Yoga page Yoga page with program selected Follow along to the yoga video

I started to develop my desktop web application high-fidelity

wireframes. Unlike the mobile version which only has one to
two images in a row, the desktop displays three at a time. The
programs can be paged through using the buttons to the side
of them. This creates an easy navigation for the user and stops
them having to scroll for a long time. There is a lot of white space
on my desktop pages and although it allows for breathig space
and creates an uncluttered look, the elements do perhaps appear
to be floating slightly. This was also brought up in feedback and
therefore I will bring the elements closer together.

50 | Prototype
High-fidelity wireframes: Yoga activity & progress log

Desktop
Mood log following activity Schedule more sessions Profile page

Here, the desktop version of my web application showcases a

similar enough, adapted version of my mobile web application.
The desktop version displays both the months and the days of
the week in one row, whereas on the mobile, they are placed
below each other. Having these elements together on one row
make it very easy to select a day of the month, and see what
what your schedule looks like for that day, and whether you can
pencil in an activity.

Prototype | 51
 High-fidelity wireframes: Soundscapes activity

Mobile
Homepage Homepage Soundscapes page Soundscapes page Rain Soundscape

52 | Prototype
High-fidelity wireframes: Soundscapes activity

Mobile
Rain Soundscape Mood log
Here I responded to user testing by adding a timer for
the user to select how long they would like to listen to
the sound for, and if they want it to fade out.

Prototype | 53
 High-fidelity wireframes: Soundscapes activity

Desktop
Homepage Soundscapes page Rain Soundscape

On the soundscapes page, I have displayed 5 sounds per

row. This allows for enough white space and the side
paging provides an unusual but easy navigation.

The colour blocks match my colour scheme and brightens

up the page. The white space is still very prominent and I
would like to bring my elements closer together.

54 | Prototype
High-fidelity wireframes: Soundscapes activity

Desktop
Rain Soundscape Mood log

Prototype | 55
 High-fidelity wireframes: Quiz & meditation outcome

Mobile
Quiz questions

I added more questions to the quiz as recommend during

user testing. Now the users are able to refine their needs
more accurately.

56 | Prototype
High-fidelity wireframes: Quiz & meditation outcome

Mobile

Prototype | 57
 High-fidelity wireframes: Quiz & meditation outcome

Mobile
Quiz results Meditation page Meditation article

The results and recommendations page

now has less text. Users disliked having to
read a big chunk of text about why they
are feeling anxious and what needs to be
done. Therefore I introduced some data
visualisations to make it easier and quicker
for the user to understand their results and
refine their needs.

Below the text are circles arranged from big

to small. This shows the user that meditation
is the top recommended activity, followed by
the other activities.

58 | Prototype
High-fidelity wireframes: Quiz & meditation outcome

Desktop
Homepage Quiz questions Quiz results

Prototype | 59
 Introducing Reset
1. Project Over- About anxiety

Competitor analysis
2. Empathise User interviews

User personas
3. Define User journeys
Site map

Visual Low-fidelity wireframes

Design
Mid-fidelity wireframes
4. Prototype High-fidelity wireframes
Usability testing

Visual design
5. Visual Design Design system

6. Prototype Links Desktop

Mobile
Project Overview | 61
 Visual identity: Grid system
Grid
For the desktop I used a 14 column grid and for the mobile I used a 7
column grid. I found that the 7 columns worked well and was suitable
for the calender and the navigation. The 14 column grid allowed me to
strategically place the different elements on the page and create an
uncluttered layout. I created gutters on the sides to provide enough
white space and to ensure that the elements on the page were not too
close to the edge of the screen.
62 | Visual Design
The 7 column grid was useful for the calender because I could place
the days and numbers in a column of their own. This helped in creating
visual consistency and a evenly layed out calender. The grid also
helped me in structuring the other web app pages. I decided to show
two activities per row, and one article, podcast, and yoga video per
row, whereas on the desktop, all of the activities are layed out next
to eachother on one row, and the articles, podcasts, and videos in
rows of three.
Visual identity: Colour palette

Colour palette
I chose to use the pastel colours: blue, purple, mint green, coral and I used the colours to colour code different parts of the website appli-
pink for my website application. cation.
• Blue: Yoga
Pastel colours have more muted tones, which can have a calming and
tranquil effect on the viewer. They are there for good colours to use • Mint green: Nutrition
when creating a calming and peaceful mood for your website, they • Pink: Meditation
carry an uplifting vibe and can evoke feelings of openness, relaxation
and nostalgia. • Coral: Home page, profile page, primary & secondary buttons
• Purple: Sound

Visual Design | 63
 Visual identity: Logo and Typography

Logo:
Typography:

Duke Charming
I chose the word Reset to represent my website brand, and also
use it as a purely typographic logo. Reset means to set again,
Baloo Tammudu 2
or to set anew something that had been set in a particular way
but needs changing. It is a verb which suggests that we can take
action, but also implies opportunity to make improvements or Baloo Tammudu 2
changes and to change our outlook, situation and commitment
to ourselves. Reset offers a fresh start and a new focus.
I chose to use Duke Charming for my logo typeface as well as
I have explored the idea of a fully typographic logo, and I have
my main and sub-headings on the web application. I like the
experimented with incorporating the ‘reset’ icon with arrows.
stylistic design and I think that it works well with my illustration
style. It is fun and gives the web application a more light-
hearted feeling.

I paired the typeface with Baloo Tammudu 2 (2 weights)

because I think they compliment each other. The open and
rounded attributes of Baloo works with the charming stylistic
style of Duke Charming.

64 | Visual Design
Visual identity: Illustrations

Illustrations
I chose to take an illustrative approach because I felt that it could best I created a few different illustrative figures that users can relate to,
reflect my aim with the website and with my brand Reset. and decided to keep them faceless, as the absence of facial features
places more emphasis on the figure’s general look and actions and
Illustrations are non-threatening and feels more universal than having users can potentially see themselves in the figures.
photographic images of people, because people relate differently to
illustrations, which makes interaction less formal and more relaxed.
Illustrations gives originality and personality too, and can give your
website a distinctive look.

Visual Design | 65
Visual identity: Illustrations

My landscape illustration for the web-

site homepage and profile page My illustrations for the articles,
podcasts, and videos.

66 | Visual Design
Library of components

Buttons on profile page for

adding activities and for
continuing with activities

Buttons for activities that get a darker

colouredstroke when hovered over Reset uses a range of different button
components for different elements on the page.
It helps the user to navigate and select different
options. The activity buttons are colour coded
to correspond with their web application pages.
Primary button This helps create familiarity and easy navigation
for the user.

My primary button colour is used throughout

Hover state for primary and secondary buttons
Secondary button
for visual consistency. Lastly, when hovering
over articles, podcasts, and programs (only
prototyped ones will do this), the image will
grow to show that the user is about to select it.
This helps to create an easy navigation.

Hover state for quiz questions

Inactive button
Project Overview | 67
Conclusion

From my competitor research it is clear that there are a few web It does not offer quick fixes or cures, but a more mindful lifestyle
applications attempting to offer users opportunities to self-improve in which anxiety management and  Reset is possible. Within this
and manage stress and general wellbeing through various activities context my user personas are able to achieve their end goals.
such as yoga, meditation, sleep management, nutrition, music and
sound. Many also add extras such as articles and podcasts, and some
offers ways to track progress. Most of these websites require sign-in
and a rather expensive monthly or yearly subscription.

What sets Reset apart from the rest is that it is a holistic anxiety web
application that functions as a self-help anxiety hub where users can
find mindful activities and physical activities of different levels and
intensities to customise their activity preferences. The application
offer free access to all articles, but also requires subscription to
participate in activities or access nutritional guidance and meal plans,
however Reset aims to keep costs as low as possible in order to be
available to as many users as possible. Reset also offers progress and
mood tracking for those who need it, as well as a planner that can sync
with the user’s online calendar in order to plan their weekly sessions. 

On a functionality level, most competitors make use of similar

functions, however layouts and overall mood(look and feel) of the
websites differ quite a lot. Some websites are more scientific and
minimalistic, some are less inviting or comforting than others, some
use cool colours while others like Reset use warm and soothing colour
palettes. Some websites utilise photographic imagery, while others
utilise illustrative imagery, and some use both. Different users prefer
different web experiences, but for those aligning with the mindset
of Reset, it offers a warm and welcoming atmosphere where users
can feel safe and supported. Reset feels fresh and contemporary and
offers a calm space for users to explore ways to manage their anxiety.

68 | Prototype links
 Introducing Reset
1. Project Over- About anxiety

Competitor analysis
2. Empathise User interviews

User personas
3. Define User journeys
Site map

Prototype Low-fidelity wireframes

Links
Mid-fidelity wireframes
4. Prototype High-fidelity wireframes
Usability testing

Desktop
6. Prototype Links Mobile
Walkthroughs

Desktop
6. Prototype links Mobile
Prototype links | 69
 Prototype links

Desktop:
https://www.figma.com/proto/flM26EjMVha1M6fDmAlP3j/VanHeerdenChristi_TY3DP3_
designformultipledevices_DesktopWebApplication?type=design&node-id=1-2&scaling=s-
cale-down&page-id=0%3A1&starting-point-node-id=1%3A2

Mobile:
https://www.figma.com/proto/lhdE0mRaXbItqTDbaxRzBP/VanHeerdenChris-
ti_TY3DP3_Designformultipledevices_MobileWebApplication?-
type=design&node-id=870-1228&scaling=scale-down&page-id=0%3A1&start-
ing-point-node-id=870%3A1228

70 | Prototype links
Bibilography

Bibliography Icons references

Overview - Generalised anxiety disorder in adults (no date) NHS choices. NHS.
Available at: https://www.nhs.uk/mental-health/conditions/generalised-anxie-
Noun project
ty-disorder/overview/ (Accessed: February 22, 2023).

(https://www.healthline.com/health/anxiety/anxiety-trig-
gers#identifying-triggers)
https://championhealth.co.uk/insights/anxiety-statistics/
https://www.nhsinform.scot/illnesses-and-conditions/men-
tal-health/anxiety
https://www.gq-magazine.co.uk/article/benefits-of-meditation

Bibliography | 71
72 | Prototype links