Module brief
To carry out a robust user experience research process and then create a responsive web design on the subject of health, showing how the design would adapt to multiple devices and address the needs identified in your research. This project had a focus on process, understanding users, and problem-solving.
About self-harm
In 2018-19, 24% of 17-year-olds reported having self-harmed in the previous year, and seven per cent reported having self-harmed with suicidal intent at some point in their lives.
[Young Minds, 2021].
[Young Minds, 2021].
Nearly half of 17-19 year-olds with a diagnosable mental health disorder has self-harmed or attempted suicide at some point, rising to 52.7% for young women.
[Young Minds, 2021]
[Young Minds, 2021]
“Self-harm was described as a behaviour through which feelings of control, empowerment and ownership could be sought. The subject of control has been well documented and the evidence suggests that self-harm offers a feeling of control through feeling able to rid oneself of or reduce unpleasant affective states, commonly referred to as affect regulation.“
[Edmondson et al, 2018]
[Edmondson et al, 2018]
There is a big sense that gaining control is a priority for the users, whether that be removing themselves from a situation or actively doing something. Disharm offers tat chance to take control in a positively impacting way, it is a way to take control by creating a new and healthier space to then do activities to put the feelings into something visual and physical.
User personas and Low-fidelity wireframes
It was discovered from my user personas that were created from interviews with people who have/are self-harming that these are people who are trying to stop harming themselves or managing their thoughts and urges.
You have to actively search a website and my users would most likely need the website when they are having these urges, meaning the website's main features, the activities/exercises, must be easily accessible and quick to get to from the time they open the website.
Desktop mid-fidelity wireframes for Breathe activity (The overwhelmer's journey)
Mobile mid-fidelity wireframes for Breathe activity (The overwhelmer's journey)
Showcasing two examples of how the mid-fidelity wireframes changed after user testing results and feedback
Mid-fidelity wireframes and
User testing
User testing
Although I had a few findings from the user testing, the most prevalent one was the user's need for more options on the exercises.
I asked the user what they would do if their urges had passed before the timer. After I asked the question they hesitated briefly before clicking the ’pause’ (CTA). Once they finished the task, I asked why they briefly paused at the beginning, they replied “I kind of knew I had to click it because it was the only option, but it took me a second or two to think there would be a second step.”
The same issue arises again when I asked them if they could please change to another activity, while they were on the breathing activity. On this one however, they clicked the logo at the top left hand of the website to take them back to the homepage where the activities were.
Responding to User testing
In response to this testing finding, I added more options, such as ‘Different activity’ and ‘The urges have passed‘, to give more clarity to the users.
The only issue that worried me with adding these options to this section is that it would be too easy for the user to give up on the exercises during a difficult time. To resolve this, I added a card to ask if they would like to continue the exercise or finish, giving them a second chance to continue if they wished to. Looking at my group's user testing, we all had some sort of findings that have led to us changing our wireframes in order to best suit the user’s needs. Testing has been essential in developing important and effective user-focused website flows that are constructive in their design for our target audience.
Overall a common issue our users ran into was the lack of buttons or the information on them, suggesting to us that they needed more context and content (depending on the situation).
High-fidelity wireframes
The CTA to the next stage of the journey on both desktop and mobile is presented by a yellow button at the bottom centre of the page or section. This consistent use and placement of the button creates a positive repetitive recognition to the users.
Homepage
The greatest adaptation between the desktop to mobile is the navigation bar. Due to the limitation of space on the mobile, a burger menu has been used with a drop-down list for the navigation options. Adapting the feature has increased space and maintained the legibility of the navigation menu text that is now on the drop-down burger menu.
Physical activities
The activity choices shown on the desktop are displayed on a four-by-three-column grid but converted to a three-by-the-four-column grid for the mobile version, accompanied by a vertical scroll section. Having just one less column on the mobile website creates more space, allowing the activity boxes to be larger on the screen and therefore more legible.
Logs
Similar to the physical activity options, the selectable icon faces have moved from a four-by-two-column grid on the desktop to a three-by-three-column grid on the mobile. This is once again beneficial for legibility and sufficient sizing for a finger to select one item at a time.
Disharm logo with adaptive alternative logos
Colour pallet for the branding and its use for the website components
Visual Design
The CTA to the next stage of the journey on both desktop and mobile is presented by a yellow button at the bottom centre of the page or section. This consistent use and placement of the button creates a positive repetitive recognition to the users.
Logo
The logo consists of the name Disharm, a play on the word from Dis-arm, with a semi-colon (the symbol for self-harm survivors) across the ‘i‘ and ‘s’. It is versatile with the use of different colours, while still keeping the semi-colon yellow. even in all one colour the logo, in particular the semi-colon, is still identifiable.
Colour scheme
Muted pastel tones complement a calming environment. Although the colours intersect and have visually appealing designs with illustrations, for the user experience side of the design, some of the colours hold navigation purposes.
Components
Disharm uses a range of components that follows its branding to create a coherent and accessible journey for the user. These components are used repeatedly for their intended purpose throughout the website, maximising familiarity for the user.
Disharm yellow is used throughout to suggest the main CTA on that page/section to transition seamlessly to the next part of the user's journey.
Disharm desktop and mobile components
Full Design process
Look through the report for the full research, user testing and development to create Disharm
Deliverable walkthroughs
Desktop prototype walkthrough
Mobile prototype walkthrough