Peaba Health is a brilliant platform that combines an Online Pharmacy, Health Clinic and Wellbeing Shop all under one roof. The site makes it easy for users to have medication supplied as well as seek trusted medical advice and or diagnosis and on top of that find and order their desired dietary supplements.

The User lands on the home page of the site where they are presented with a logo at the top and the nav bar underneath and a brief About us section explaining the website. On the Homepage the user is greeted with the three icons for the sites main features - 1)Pharmacy 2)Clinic 3)Wellbeing Shop.

Users are able to use the online pharmacy to have their Private prescriptions fulfilled as well as certain prescription only medicines provided without prescription through PGDS (Patient Group Directives).The prescriptions can be those issued by an external Health professional or from an in house prescribing professional after a consultation. Users can also purchase medications you can only find in a pharmacy called Pharmacy (P) medicines in the Over the Counter (OTC) section.

The Online Clinic serves to connect the user to highly skilled healthcare professionals and allows a medium to provide high quality consultations and diagnosis.

Through the magnificent Wellbeing Shop, users are able to purchase dietary supplements they are seeking or have been recommended to take by a healthcare professional.

Wireframes for the four pages are available for viewing via the PDF file, these were created using the web based version of Balsamiq:

/assets/wireframes/peabahealth-ms1-wireframes.pdf

• Home Page - A user can scroll through each page freely at the moment without having to log in or enter any credentials. A user can immediately read on the Homepage the "About Us" section and get an immediate idea about what is offered on the site. User can then scroll down to select an area to go into from the three options avaialble.

• Pharmacy Page - A user can then decide to click on the Pharmacy Icon either from the nav bar or icon on the home page and be taken to the Pharmacy page where they can see the three options avaialble to them on the Pharmacy page. At the moment the clicking onto the Icons only refreshes the page back onto the current page as additional features are too be implemented on future features.

• Online Clinic Page - A user can go onto the Online clinic and be able to read what is offered within the Online clinic description. Again at the moment the clicking onto the Icons only refreshes the page back onto the current page as addiotnal features are too be implemented on future features.

• Consultation Form Page - A User can click on the "Fill out consultation form button on the clinic page and this takes them to the consultation form page where they are able to complete a consulation form which currently does not go anywhere but on clicking submit clears all the information the user has input.

• Wellbeing Shop Page - A user once on the Wellbeing Shop page can search for their desired supplement/item using the search bar or can browse the range of supplements based on the different categories diplayed - at the moment eight in total. Again at the moment the clicking onto the icons only refreshes the page back onto the current page as addiotnal features are too be implemented on future features.

• Home Page - Users will be able to log in or register into their account and be able to access more personal features of the site. including:

  • Each Icon if hovered over will give you more information as to what that feature is about. Then once not hovered over the original icon is redisplayed. - This will be a Javascript added application

  • LOG IN/REGISTER - Users will be able to sign in or register to access their own personal account. This account will have their ordering history, any subscription information like regular supplements supplied, Pharmacy prescription dispensing record. Also any clinic diagnosis or consulation results. This account feature will extensively help the user taylor what they require from the site and fully track all transactions.

• Pharmacy Page -

  • Private prescription - Users will be able to scan a copy of their Private Prescription or upload an image of their prescription and then have it legally and clinically checked and then dispensed by the Pharmacy team. This feature will again require users to log in to access their account.
  • Patient Group Directions - This feature will allow a user to access or be given prescription only medication without a prescriptiont through specific PGD(s) that allow the Pharmacy to sell certain medications wihtout an actual prescription as long as the individual meets the certain criteria. This feature will work via a user selecting the area of treamtnet for example erectile disfunction or hayfever and then carrying out the necessary questionaires which are then passed onto the Pharmacy team to assess. If all ok then the medication is dispensed and posted to the patient. Or if necessary contact is made with the user.
  • Pharmacy (P) medicines - Users will be able to buy over the counter P medicines depending on their symptoms and concerns and have these posted out to them. This will be done via a patient having a virtual consulation with a Pharmacist or filling out a questionaire. A safety feature will be in place to make sure individuals do not abuse certain OTC medications and to make sure the correct area is being treated.

• Online Clinic Page -

  • Consultation Form Page - User will recieve an alert saying their form has been succesfully submitted and a confirmation email has also been sent to their email.
  • A profile section with all user's information including blood test results, Supplement usage, prescription and wellbeing shop invoice history.
  • Users will be able to book a video consultation service to speak with a Healthcare professional. So web app based video meeting service to be added.
  • Blood testing service. Users will be able to book blood tests to have blood works undertaken to determine a condition or a deficiency in a vitamin or mineral etc. There will also be a home test kit option to order for home delivery. - If your condition requires blood tests or any further tests to be done this can all be arranged through your Peaba Health account and all you have to do is provide the sample at one of our designated centres and the rest will be taken care off. If you cannot make it to a centre we will sort home testing for you.

• Wellbeing Shop Page -

  • Users will be able to subscribe to a regular automatic ordering system of their supplements to make sure they stay stocked on their supplements. *Once a user is logged in their shopping basket will be a constant feature on their nav bar section in the right hand side. This will allow the user to be able to track their spending even if they, for example, were not ready to checkout and purchase but still wanted to access other areas of the site.
  • Payment system feature to take digital payments to be added - e.g. Paypal or World Pay.

• Language - HTML5
• Language - CSS3
• Framework - Bootstrap
• Icons - Fontawsome
• Fonts - Googlefonts
• CSS and HTML guidance and code - [W3schools](http://w3schools.com
• Colours - color-wheel
• Extensions used include the .theia files and templates from the Code Institute gitpod full template from GitHub

-Pharmacy pot with Rx image taken from google via Pain Sclae

-dotors image on home page taken from google via amitahealth.org via google images search

-Supplement on table in wellbing icon image taken from goodle via Whole foods website

-Private Rx Image Image taken from google via bizjournals via google images search -Over the Counter(P medicines icon) image taken from google via Pharmaceutical Journal via google images search

-Patient Group Directions (PGDs) image taken from google via medeconomics via google images search

-virtual dotors image for clinic icon taken from google via amitahealth.org via google images search

• several of the the used icon images are taken from following sites:
  • Bone&Muscle Health Image - taken from northbridgechiro.com via google images search
  • Brain Function image taken fomr Doctor's Best Amazon page via google images search
  • Energy&Performance image taken from michealhyatt.com via google images search
  • Heart Health image taken from novanhealth.com via google images search
  • Immune System image taken from everydayhealth.com
  • Inflammation&Detox image taken from healio.com via google images search
  • Sexual Health image taken from istockphoto.com via google images
  • Sleep&Calmness image taken from extramile.thehartford.com via google images

• Code for animated supplement search bar sourced from this w3schools.com page

Home Page - User Clicks on any of the 4 navigation list items and this accurately take user to the corresponding page. The nav bar stays consistent throughout all the pages and the user can see what page they are on as the corresponding icon for that page changes colour in the nav bar and it becomes highligthed green

Footer Features - User can also use the "Our Servies" section links at the bottom of the pages to navigate as the links are clickable and can take you to any of the pages. For example - User is on Clinic Page and gets to the bottom of page and wants to go the Wellbeing Shop page, rather than scroll all the way back to top of page they can click on the Wellbeing Shop link in the footer. Theses links are working accurately.

The logo being used at the top of all the pages is not to the best scale and the other logos with the 'PEABA HEALTH' wording which would be better ad brand the site more do not scale very well to fit in the designated area

Possibly getting a larger scale logo made up which will not distort on expansion with the PEABA HEALTH wording inlcuded. This will will add to the attraction of the site and make more appealing to the user.

Trouble with getting Nav Icons to sit in correct positions on all pages Having difficulty with trying to get the Nav Icons to sit in the correct positions on the page. Would like to have the Search Bar to the right of the nav bar and be fluid on smaller devices when made smaller and search button to sit correctly.

Have used the bootstrap navbar class property to help make the nav bar more fluid and responsive with all categories going into a single line on screen sized smaller than 768px.

The search form, button and LogIn/register icons are now also nicely sat on the right of the nav icons and are also responsive within the navbar class property used.

Trouble getting icons when hovered over to change opacity and have descriptive text appear on over them -

This feature has been left out and is to be added on future versions of website with more dynamic web features used.

This is not highlighting green the same way the image is

Manage to sort this issue by using the correct class to target the element with the CSS styling However on reflection it did not look as good as expected and so removed the feature

When resizing the responsiveness of the category icons they were not spacing correctly.

I set each category icon with a fixed width and height of 250px and on top of that set the margin to auto which in turn spaced them correctly. Using the Bootstrap row and col features to set the amount of icons per line depending on the screen size correctly.

The Clinic Page Icon keeps on floating to the left of the screen rather than staying central. Also its sizing is not to the same sizing as the other icons on other pages which is causing visual problems as it is coming up much bigger

Because this icon is sitting in a bootstrap row on its own, I solved this problem by creating two extra divs on either side of the div for the icon therefor giving it a col-4 split rather than something bigger which is causing the sizing problem as all the icons are responsive rather than being given fixed sizes. This meant that based on the width and height percentages set for the images it scaled the icon down to a similar size to the other page icons.

Using the w3c Validator - *Some errors were flagged up on the html files of this project. The main issue being that I was using tags as direct children of

tags which is considered invalid. On this information I swapped arround the the
• tags with my tags so that the was a child of my
• tags. This solved the error flaggind up on the validator when I inserted my code with Direct Inout option.

  Validating the code with W3 validator - CSS:

  Using the w3c Validator CSS * And error message was generated with the validator in regards to the background image of the body. The background image value of no-repeat center center was not necessary - on removing this propert in the CSS the image reamined the same and stayed responsive on resizing with no bugs.

  * Line 82 in the CSS code had an error with the padding on the left of the divs in the footer section. The bug as fixed via the correct syntax of the "padding-left" being used - this was initially incorectly written as "padding left" as two seperate words and then a value of 2rem used to space the wording/icons away from the edge of the div.
  

  Testing responsiveness

  • Using Google DevTools - Able to resize each page using the responsive feature to see how the pages alter through the range of screen sizes. - This shows the icons maintain the adequate spacing and layots to keep information presentable and maintain the appeal of the pages.

  DEPLOYMENT

  Project was developed using gitpod and was regularly commited to git and pushed up to github.

  To work on the project code within a local development environment:

  1. Follow this link to PeabHealth repository https://github.com/PhillyJB/milestone-project1-peabahealth
  2. Undr the repository name you have the option to click on 'Go to file' and select a specific file in by doing a search or click the 'Code' Icon which should then have a drop down menu and from there you can clone or download a zip of the files or 'Open with Github Desktop'
  3. Cloning would mean copying the clone URL from the clone HTTPS section.
  4. This clone URL can then be pasted in to the directory you want the file to go in using the 'git clone' followed by the url.

  The deployment was carried out as follows onto GitHub Pages:

  1. Entered my GitHub account,
  2. Select the milestone-project1-peabahealth repository
  3. Click on the 'Settings' I con above the repository Master File
  4. WIthin 'Settings' Options Scroll down and clikc on the 'Pages' item
  5. Under GitHub Pages go to 'Source' heading and change none to 'master' branch
  6. Click on save - pleae note no them is chosen for this site under the 'Theme Chooser' section.
  7. The deployed site is available via clicking here PeabaHealth or https://phillyjb.github.io/milestone-project1-peabahealth/

  CREDITS