Relieve | Re-Live

Relieve is a company based in Lichfield, Staffordshire that aspires to help the everyday person know more about mindfulness and meditation through its site information and available classes.

I have used markdown format for the headers and bullets, links and tables on this readme, but found the img element to be more useful when controlling picture sizes on this document.

UX

Project Goal

To improve the average person's knowledge of mindfulness and meditation, and the positive impact it can potentially have on their mental health.

Patient Goals

Many people wouldn’t feel comfortable being able to go to therapy sessions, whether in groups or one-to-one, phobias are diverse and complicated, and people can fear anything. Other people know someone who is struggling but have no idea how to help. For those people, the page describing how to overcome a panic attack would be extremely beneficial, and the sessions could be something they work up to.

• Calming spacious UX
• Empowering images
• Images of a fun class environment
• Information on why they feel this way
• Self help tips

Carer Goals

Any friend or relative of a sufferer can be considered a carer. They, at times, have a harder time than the sufferer as they are the one that is depended on.

• Information on classes location and times
• Information on how to stop a panic attack

Developer and Business Goals

We are passionate in the belief that all people should have access to these lessons and this network. It’s not just a lesson that you take part in and walk away, it’s a community of people looking out for each other.

There are a vast amount of people right now struggling with bad mental health. This means a lot of people could potentially use this meaning a lot of custom.

Maybe the company could invest time into doing school presentations, to create brand awareness as well as help young people understand mental health better, as it's often young people who struggle.

• Promotes inclusion
• Brings together a community
• Life saving advice and information
• Keeps people intrigued through regular newsletters
• Ensures the user either signs up to a newsletter, or attends a class

User Stories

As someone who struggles with anxiety, I want:

• Calming, spacious UX that isn't cluttered and therefore stressful
• Peace inducing colours to subconsciously add to the sites serenity.
• To learn a bit about why I feel the way I feel and how to get better
• To know where my classes are and how to get there, so I feel safe

As someone who struggles with depression, I want:

• To know that I'm not alone, through images and tutor information
• To be ensured that people gain happiness from the classes
• Something that regularly makes me feel good as opposed to a one-time fix, something that stays with me for longer

As a relative or friend of someone who struggles, I want:

• To know where classes are and what times they are
• To know that my friend/relative is going to have an educational but fun experience
• To learn a bit myself so I can be of better help to my friend/relative

Design Choices

The overall experience needs to feel calm, uncluttered and peaceful.

Fonts

• The primary font "Exo" was chosen because it has a nice rounded edge to the lettering, there is nothing sharp that sticks out, adding to the calm feel.
• The secondary font chosen is sans serif.

Icons

• All icons chosen are to describe the paragraph of text next to them, some have been taken out once viewed on a phone to help create space for the reading of the text.

Colours

• As we all know, different colours produce different moods. Red and yellow are usually avoided as they are very sharp and sometimes even angry colours when used the wrong way. Often you'll see professional looking greys and safe shades of blue on wedsites, but I've opted for shades of turquoise and green.

• Green is often seen as a peaceful, calm colour and I've mixed it with the professional blues.

• The only real exception to this is on the benefits page, where there is the warm orange/brown background image of the jogger.

Styling

• Divs have been given rounded edges to again add to that calming feeling, we don't want sharp and aggressive.
• This edging and spacing between divs and sections has been made consistent throughout the pages and content.

Backgrounds

• Either hero images relevant to the page have been shown, white, or off-white (#FAFAFA) have been used.
• This is so that the site is not too distracting from the content and not add to stress levels of the viewer.

Images

• The first image is a positive meditation one, almost putting the user directly into the class.
• The Sign Up page image is an adventurous one, which represents the user moving forward with their life or doing something "out there". It also adds a sense of freedom.
• The images of the tutors give familiarity to the user, and are positive smiling images, which could help them feel more comfortable.

Wireframes

These wireframes were created using Balsamiq:

Homepage

Benefits

Classes

Stories

Sign Up

Q and A of Potential Users

I spoke to three different potential users regarding the website. I showed them what I had made and asked them the following questions:

Q1 What makes a good website experience?

Person with Depression:

• "When a website is easy to use and navigate through different pages."

Person with Anxiety:

• "Familiarity within groups on social media sites. To be able to click on a link and find the information you need easily."

Person with relative/friend of someone who struggles:

• "A good website experience for someone not tech savvy like me is something self explanatory and easy to navigate, it's being able to know where a link is and what it does."

Q2 What information are you looking for?

Person with Depression:

• "I would be interested in the classes information, and would look for where the classes are."

Person with Anxiety:

• "Group activities that can be experienced online as well as in person if I am unable to leave the house."

Person with relative/friend of someone who struggles:

• "I would be looking for ways to help my friend manage their symptoms and how to find professionals to offer help and advice."

Q3 Where, on a site, do you visit first?

Person with Depression:

• "I like to visit each page individually and read through, then go to the page that suits my needs most."

Person with Anxiety:

• "Social media pages to see how many followers the business has."

Person with relative/friend of someone who struggles:

• "When I use a website the first place I use is the menu option to see the list of everything on the site and what I need to look for."

Q4 Would you use this?

Person with Depression:

• "Yes."

Person with Anxiety:

• "Yes."

Person with relative/friend of someone who struggles:

• "Yes."

Q5 Why?

Person with Depression:

• "I would use it to book and find the location of classes. I'd also sign up for the newsletter for up to date information, hints and tips."

Person with Anxiety:

• "If the website was available then I would use it and recommend it to friends and family who I know struggle, looking for helplines and other people who have similar feelings."

Person with relative/friend of someone who struggles:

• "I would use the site to get information on anxiety and tips on how to help people in the case I ever saw somebody having a panic attack and needing assistance."

Q6 What changes can I make?

Person with Depression:

• "You could add contact information for mental health organisations such as Samaritans or Mind in the 'if you experience a panic attack' section."

Person with Anxiety:

• "Have more interaction on the site for users to get to know each other."

Person with relative/friend of someone who struggles:

• "A change to make to the website would be maybe including an alternative display option for example a dark screen alternative for people with colour blindness or an Audio Description choice for visually impared so that when you hover over an icon it says out loud what you are about to click."

Competitor Review

Who else is there local to Lichfield, Staffordshire with similar business goals/models?

Tarakmc

Pros: They are a charity with a lot of background information, and ties to Buddhism, so you know you’re learning meditation properly.

Cons: Way too much information on the website. Way too many places to click to, too much on each page. Writing is small. Photo gallery images are not relevant, no images of the sessions themselves just of a building and a staircase? Donations link doesn’t open donations page.

The Bright Path

Pros: Really positive videos with music to match. Brilliant content. Responsive design is very good. Lots of helpful content and it looks like they have an intriguing course, a great product.

Cons Too much written again, a bit too much information on each page. If you click on find a class, it opens a different site under the same URL? The structure of the site is very confusing, the Navbar changes and it makes you feel like you’re using a different site. Once you open FAQ first thing you notice is a change in text size and spacing, webpages are supposed to be consistent.

Roadmap

This roadmap indicates the importance and viability of specific opportunities.

Opportunities/Problems	Importance	Viability
Teach users how to stop a panic attack	5	4
Encourage them to sign uo to newsletter	4	5
Encourage them to interact with classes	5	4
Showcase images from classes	1	1
Show them positive feedback from other users	4	1

As mentioned before, the stories page isn't necessary just yet as we don't have previous users feedback to use yet. So that and images from classes aren't necessary yet.

Features

Existing Features

• Navigation Bar

  • The main navigation bar uses the websites main colour in different shades from left to right to signal different pages and look more stylish.
  • It is responsive, it condenses into a burger icon as the webpage is made smaller for tablets and phone devices.
  • The Navbar also responds by changing background and text colour as the user hovers over each page option.

• Footer

  • The footer includes links to the websites main social media links, I have included the most commonly used Facebook, Twitter, YouTube and Instagram whilst also including TikTok, as this site could promote short promotional videos of meditation on there.

  • I have also provided information about where the business is based, this will help with the SEO of the website, as people who live in Lichfield, Staffordshire are more likely to find this page.

• Logo

  • The idea for the logo was to make the middle "e" a different colour son that it could be read in two different ways. Relieve and Re-Live.
  • Since the company is focused on empowering people, it made sense to include the idea of restarting your life with a clean slate or, re-living.

• The landing page hero image

  • I wanted an image that was both happy and focused on meditation, the one I have found I think is brilliant because there is also a pregnant woman in the background, which represents inclusion.

• Who we are section

  • This section is a brief overview of the whole site, once the user views this they have more knowledge of what this site is to be used for.

• Benefits

  • The hero image of this website is a jogger, a perfect example of someone with good health. Here I wanted an inspiring, motivational image that also had very different colours and gave the page a warm comfortable feeling.

• Statistic Progress Bars

  • I wanted to use a visionary example for people visiting the page for the first time, rather than just reading lots of paragraphs. I thought I'd start with the higher number statistics, which really nail down the importance of good mental health.

• Benefits Section

  • I also wanted to add a section that was big, bold, and again nailed some of the important positives attached with learning how to meditate and be mindful.

• Panic Attack Help Section

  • I have the personal experience of panic attacks, and know just how important this information regarding panic attacks is. This being free, and visible on our site almost as an added on feature, showcases one of the powerful ways in which meditation and mindfulness can be used in a worrying situation/scenario and what it can achieve.
  • If someone doesn't feel comfortable coming to the sessions, they can take this information away and use it. Then at a later date when they have more confidence in the process, they will be more likely to make contact.

• Classes

  • This is the whole point of visiting the site. To let the users know when and where they can attend a session and find help. The classes give opportunity for people to meet other people face-to-face and share stories, meaning that there is a positive productive social circle.

• Class Boxes

• Here I've used two different images, which show up dependant on the size of the device being used. One is vertical, the other horizontal. I've contained the six classes available in a 3x3 grid, which changes to a 2x4 grid on smaller screens. Information included is the venue, tutor, time and date.

• IFrames

  • When I first encountered IFrames I knew I wanted to implement them on this site. They're perfect for people wanting to explore the surrounding area of where they're going to. People can decide which driving route to take and better plan their journey, or simply look for its position in correlation with other places they know.

• Tutor Information

  • I tried to find images that looked professional, but also friendly, with people smiling. I didn't want any users to feel scared, instead, more welcome.
  • I also included some information regarding the people teaching the sessions, whilst also adding a bit of info about the class itself.
  • The IFrame, image of the tutors, and information have been palced within a grid. This grid is then responsive dependant on screen size being used and displays so that you can visibly see all the information you need to.

• Sign Up Page

  • The Sign Up page is for anyone who wants to receive the weekly newsletter will contain advice and information whilst also kindly reminding members of the classes available.
  • The form itself is made up of 3 fields, first name, last name and email. All have the required attribute meaning you cannot submit without the information required.

Features Left to Implement

• Stories Section

  • Initially, I intended to have a stories page on the site, which would include stories from people who have used the service whilst in a position of anxiety or depression, and how their journey was.

  • As this business is just starting, it doesn't make sense to implement this page just yet, we could encourage users to share their stories which would empower them, and give them a sense of accomplishment, whilst also letting future users know that this is a process they can trust.

• Unhelpful thinking section

  We could implement a page on unhelpful thinking habits. This could include black and white thinking and generalizations, to help the user see what they are doing day-to-day in their head and why it is unhelpful.

• Classes Backend

  Another feature that could be added is a sessions backend with a calendar so people can book themselves in for future sessions. They would be able to click on one of the six divs and choose a date with a session that had enough space available for another student.

• Logging in and leaving reviews

  Another development idea would be to allow users to log into the website and leave comments on the stories page or reviews of their sessions and tutors. This would be great for new users coming onto the site for the first time. And could be a great way to interact with customers whether they've had a good or bad experience.

• Classes Gallery

  We could also add images and videos from previous classes on either our classes, stories or even home webpage, eventually creating a gallery for new, current and/or previous users to look at.

Testing

First, I've opened the site using developer tools on the IPhone 5/SE emulator. I've chosen this as it is the smallest screen size available. The first most noticeable thing is when the pages are shown on screens below 800, it doesn't work to have margins of 20px, instead 10px is better, to make more use of the scree space available. Also I noticed that the px-5 bootstrap calling was adding way too much padding to the who we are section, so I've changed this to px-4 which seems to be a lot better suited.

The benefits page seems to work fine, the height change in the progress bar is working as intended, allowing for the text to fall to the next line without disturbing the bars shape.

On the classes page, I noticed one issue. The bottom of the sessions section was cut off as the hero outer element had a height restriction. I had called for the height to change on smaller screens to about 1000px, but needed to change this to 1100px in order to see everything on this screen. After this change, the whole page was perfect, with margins at 10px, same as the other pages.

Thankfully the sign up page doesn't have too much information on it, the form is visible and again the spacing is good too.

Next, I've opened the site the same way on the IPad emulator. I've chosen this as it is a good middle sized screen between desktop and mobile. The burger icon is still in use on this webpage as without it the page links with the logo would be too wide for the screen. It opens, and the options are clickable and working. The margin of 10px is still being used as this isn't too large of a screen so we still want to make best use of the page. The slightly larger 800-1000px width tablets will have 20px margins.

The benefits page also looks good so far. The progress bars now have less height as they no longer need it, and the images come into focus on the panic section, which looked very presentable and readable.

Everything is as it should be now on the classes page too, margin is the same as the benefits page and the grid has not yet changed.

This is the grid layout on the slightly larger screens, like the Surface Pro 7:

The sign up page looks as good as it did on the smallest screen.

Last, I've opened the website on my normal desktop screen. The homepage looks as it should:

The benefits page also looks good on desktop screens.

The layout of the grid has changed again for the tutors section on desktop screens, but the 20px margin remains. The image has also changed for the sessions background.

The sign up page looks as it should.

The following section is the testing of each element.

The first image is of the homepage on a larger screen, we can see that the cover text box is on the right. But when we look at the second image with is slightly larger than 600 pixels wide, the cover box has now been centered. On the last image, which is under 600 pixels, you can see that the image is different in its placement. I cropped the original image and called this on smaller screens so when viewed on mobile, the main woman is still visible, as opposed to seeing the blank space between people and not knowing what the image was originally.

But when we look at this second image, which is slightly larger than 600 pixels wide, the cover box has now been centered.

On the last image, which is under 600 pixels, you can see that the image is different in its placement. I cropped the original image and called this on smaller screens so when viewed on the minimum width of 320 pixels wide, the main woman is still visible, as opposed to seeing the blank space between people and not knowing what the image was originally.

The Navbar buttons change as required when hovered over, the background colour changes to the darker shade and the text colour changes to a lighter shade so the user knows they have scrolled over a clickable link.

This is the case throughout the site on clickable buttons, like the one in the cover text box and submit button on the sign-up form.

The only slightly different one is the logo, the word "relieve" is deliberately broken up into the phrase "re-live".

Until you hover over it and all the letters are the same colour.

I've added a size change to the logo that works perfectly. This is it before the change.

And this is it after, on the smallest screen width of 320 pixels. You'll notice that this now means the burger icon is on the same line still, instead of being pushed down and the links not being all visible when hovered over.

On the who we are section there are two icons, used to give the reader some context, but not necessary on smaller screens where there is limited space as it is.

Here you can see the section on smaller screens (below width 600 pixels) doesn't show the icons.

The navbar unfortunately isn't functional on smaller screens, as the width simply isn't enough. To combat this we have the collapsible burger icon.

When clicked, the burger icon displays the same webpage anchor items but vertically instead.

Here you can see the difference when the footer icons are displayed on a large screen ...

... and on a smaller screen. The gap between is a percentage rather than an actual measurement, this means it's completely responsive.

On the smallest screens, I've made the icons font size smaller, to stop them from displaying on a different line.

The progress bars on the "Benefits" page are automatically left center, meaning you can view the jogger in the background image.

But when made smaller, this changes to being fully centered. Note that the background image doesn't stay centered but instead moves with the right hand side of the screen, meaning on the smallest screens, the jogger is still visible.

The progress. bars width is a percentage so changes with the width of the screen, and the height is larger when on smallest screens so that if the text goes onto the next line it is still within the bar.

When the links within this section are clicked, it takes the user onto the source information's website.

The benefits section doesn't change too much between big and large screens, but the height is responsive and changes with the text wrapping.

With the panic attack help section, the images either side disappear on smaller screens due to availability of space.

The height in this section is also responsive.

In the sessions section of the classes page, there are several changes through screen sizes. The most obvious one is the change of image from large screen to small.

Note there are also differences in the grid format. It changes from 3x3 to 2x4.

On smallest screen sizes the header elements of the sessions have a smaller font size, so the divs aren't pushed too far wide of view.

The next section is even more complicated. On larger screens, I wanted the tutor image and information on the right whilst having the iframe element on the left.

The issue with this is when it is shown on a medium sized screen (between 600 -1000 pixels wide), the writing extends quite far and so the iframe is stretched, also the second tutor section has two images inside.

To fix this I have made the two images view vertically, and pushed the text onto the next line, using the grid-column-area commands.

On smallest screens, I've made it so each element displays vertically. All the information on all screen sizes is centered and the height properties change with the screen size.

On the sign up page, there are only really two changes.

The input boxes have a width restriction on small screens so they don't outgrow their div, and the header text is made smaller.

The form also has required fields, with types on the inputs so that only the correct format can be entered.

The form also wont allow information to not be submitted, as all fields have the required attribute.

Validator Testing

• HTML

  • Some errors were found when going through the W3C validator. W3C validator

  • There were two div closing tags that were not needed, one of them had to be swapped with a closing nav element.

  • The paragraph within the footer was in the unordered list, so I took it out and gve it its own styling.

  • There was a warning message that showed when the classes page went through. The validator didn't like that the tutor sections didn't have headings. I therefore changed the section elements to div elements here.

  • After these changes there are no more errors within all four pages of html.

• CSS

  • No errors were found when passing through the official (Jigsaw) validator

Fixed Bugs

This is a detailed log of the issues I ran into whilst coding my first project, and how I overcame them.

1). The first real issue I detected during the prototype stage. Everything looked great small but on a big screen the navbar and hero image wouldn't have even fit on the page due to size. I had my dimensions correct for everything to fit, but they took up every inch of space.

I fixed this by halving the height of the navbar and logo, and everything began to fit on the screen as it should. This is the difference of the two on my Figma prototype.

2). The next issue I ran into was the loading page hero image. The original size was over 5000 pixels in width and 3000 in height, I had to scale it down without losing any of the quality.

I did so by using this Resizer to re-size the image, first at 75% its original size, this was too large, it also had gaps either side. I played with the sizes until i found that 69% was the best fit for the webpage.

3). I had issues when creating the navbar as the text inside the anchor elements were not being centered vertically, I fixed this by creating a span inside the anchor element for the text.

4). Information on main page didn't seem enough for the page, also had issues with making it look central, with icons on the left but clear on the right.

I first made the text and icons bigger on desktop backgrounds and attempted to create some empty space on the page, adding to that calm feel we wanted. I created 3 columns within a row and gave the text the width of 6, I also added some bootstrap shortcut to get rid of the icons when the screen is phone sized, and gave the text some padding so it still sits within the section nicely.

5). I had an issue centering the cover text box on the landing page hero image. I had a bottom and right measurement, which on phone screens, was pushing it to the left and wasn't central.

I had to watch a few videos on flexbox and using it with bootstrap. I made the hero outer, which is the cover text's container, justify content centrally on small screen sizes. On larger screen sizes I made them position from the right, adding a right margin to the cover text box to push it away from the edge.

6). Footer social media links on smallest screen sizes were putting the very last social media link on the next line. My way of thinking was as it's only one link that is being pushed down, a simple media query that changes the font-size would suffice for screens at mobile size.

7). One of the hardest tasks I had was getting the elements on the classes page to move in 3 different ways for 3 different screen sizes. I deliberately chose quite tricky changes in my Figma prototype, to challenge myself. It took me a while to find something that helped, but I found this site very useful:

Grid Layouts

8). On smaller screen sizes, the background image of the index page is not centered, meaning that the woman in the image is only partly shown, and it's not easy to work out what the image is. I tried messing with the image's position property and adding a media guery margin-left to see if it pushed the image where I wanted it, neither worked. I'd noticed on other pages if I gave the image a cover position rather than a center one, it changes the images size in such a way that it fits the element it's in, but that didn't change the outcome either.

I then thought about taking the original image and cropping out a percentage if the right hand side, then saving this as another image, and calling for it in a media query. I had to re-size the image afterwards but it did the trick, it calls when on a mobile device, and you can see that the woman is meditating now.

9). The progress bar information looks terrible on the smallest screen sizes, with the link not wrapping inside the box it's in, and the boxes being of different width.

Using Dev Tools I could see that there was a margin of 10px that was being added to all four sides, so I changed that to 10px 0, meaning there is no left or right margin, and the width was the same. I then made the URL an anchor element, with a link name that included the website name only, without all the extra URL info that was not necessary anymore, rather than wrapping the text for the user to have to scroll through. Lastly I changed the width of the overall container on small screen sizes.

10). The classes page is a mess on smallest screens. For some reason there is a scrollbar along the bottom that suggests that an element has a width that has not been set. I'm going to check every element on the page by setting the width to 100%, seeing if that fixes the issue, if not, then put it back to normal.

After a lot of un-ticking of css properties in Dev Tools, I found that a margin-right property was being added to my .row divs. I searched for it in my CSS and I hadn't written it, it was being automatically set. I put margin-right: 0; for all my .row elements and the issue was resolved.

Unfixed Bugs

There are no bugs unfixed to my knowledge.

Deployment

This project was developed using Gitpod, committed to git and pushed using the built in function within Gitpod.

To deploy this page, I followed the following steps.

1. Log into GitHub.

2. Select relieve from list of repositories.

3. From the top menu items, select settings.

4. Select Pages from the left hand side menu.

5. Under Source click the drop-down menu labelled None and select main.

6. On selecting main the page is automatically refreshed, the website is now deployed.

7. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

At the time of submitting this project, the Development Branch and Master Branch were identical.

To clone you will need

1. A GitHub account.

2. The Chrome browser.

Then follow the following steps:

1. Install the Gitpod Browser Extension for Chrome.

2. After installation, restart the browser.

3. Log into Gitpod with your account.

4. Navigate to the Project GitHub repository.

5. Click the green Gitpod button in the top right corner of the repository.

6. A new Gitpod workplace will created from the code in github where you can work locally.

To work on the project code within a local IDE such as VSCode, Python, etc.

1. Follow this link to the Project GitHub repository.

2. Under the repository name, click "Clone the download".

3. In the clone with HTTPs section, copy the clone URL for the repository.

4. In your local IDE open the terminal.

5. Change the current working directory to the location where you want the cloned directory to be made.

6. Type git clone, and then paste the URL you copied in Step 3.

7. Press Enter. Your local clone will be created.

The site had no broken links, but the images wouldn't show initially. I had to change the style.css background URL's to include "/relieve/" and after that they worked correctly.

Credits

Content

• I got the statistic I used for the first progress bar from this site: disturbmenot.co The site describes its source as "Project Meditation".

• I found the second statistic on this page: cogbtherapy.com The page describes its source as "Eng, W., Roth, D.A., & Heimberg, R.G. (2001). Journal of Cognitive Psychotherapy".

• The footer element throughout my site was inspired by the Love Running project, I liked the spacing and colour changing of the social links and it was easy to make it fit in with the project.

• The grid code was taken from developer.mozilla.org and I changed the fr and column values to get the finish I required.

Media

• All of the following images are from pexels.com, below is a list of the image names and the author who posted them on pexels.com.

• index-hero.jpeg, small-index.jpeg - Gustavo Fring.

• benefits-hero.jpg, tutor-three.jpeg - Pixabay.

• benefits-one.jpeg - Ketut Subiyanto.

• benefits-two.jpeg - Liza Summer.

• big-screen-classes.jpeg - Oluremi Adebayo.

• small-screen-classes.jpeg - Suraphat Nuea-on.

• tutor-two.jpeg - Andrea Piacquadio.

• signup-hero.jpeg - Hedenborg Ludvig.

• This picture was obtained on unsplash.com

• tutor-one.jpeg - Jurica Koletić.

• All icons were obtained from fontawesome.com.

Acknowledgements

• My Mentor Jubril Akolade for continuous helpful feedback.

• My college contact Pasquale Fasulo for his support throughout.

• Tutor support and the Slack community at Code Institute for their help too.

Lighthouse Scores

Homepage

Benefits

Classes

Sign up

This readme.md was spellchecked using the spell checker extension for Chrome.