Alison Melville's Shiatsu needs a B2C website that showcases a massage business specialising in Shin Tai near Manchester. I designed the site to educate the user about the benefits of Shiatsu Shin Tai and allow them to contact her to book a consultation.
I created the site to look professional and in keeping with the theme of similar Shiatsu websites and using the colour schemes to bring a relaxing impression as would be expected with a massage site. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential and existing clients.
The goal of the website will be to interact with existing and potential clients and be a source of information to educate them, build confidence and encourage them to contact the business owner.
The site must contain all information required to complete these goals and site visitors will most likely be comparing with other similar services in the local area so must stand out and show everything the user would want to see.
Link to live site
- UX (User Experience)
- Design Choices
- Technologies
- Features
- Version Control
- Testing
- Bugs
- Deployment
- Credits
-
As a user visiting the site for the first time:
- I want to be able to see social media links so that I can keep up to date through Facebook, Instagram and Twitter.
- I want to click the navigation links to be taken to the correct section and also back to home for a better user experience.
- I want the page to be in a predictable layout so that I can navigate it easily.
- I want to see a map of the location so that I can determine how close it is to my location and navigate there easily.
- I want to easily understand the main purpose of the site and learn more about the business.
- I want to see testimonials to understand what previous users think of them and see if they are trusted.
-
As a user returning to the site:
- I want to be able to access the site easily on my chosen device
- I want to easily be able to navigate to different parts of the site
- I want to be able to contact the business owner as I wish through social media or contact form
-
As a user who has never had a Shiatsu Shin Tai Massage before:
- I want to use the site to learn more about Shiatsu Shin Tai and how to contact the business owner so that I can ask questions.
- I want to see a demonstration of what to expect when receiving a Shiatsu Shin Tai massage.
- I want some information about the price and time required per session
- I want some information about the business owner's qualifications.
- As a site owner I want the user to learn about Shiatsu Shin Tai massage and the business owner.
- As a site owner I want the user to be able to communicate with the business owner on social media and through contact form.
- As a site owner I want to show the user that the business owner is a registered practitioner of her work.
- As a site owner I want to create a website with a great user experience so that visitors will come again.
I have chosen Architect's Daughter for the headers as it is easy to read and has sufficient contrast to the main body font. It is a cursive font so has a more easy-going, relaxed look inkeeping with the feel of the site.
and Montserrat for the rest of the text on the site (eg. paragraphs and lists) as it is easy to read with wider spacing than other fonts.
As the site purpose is about relaxation and massage the colour scheme used is adapted to suit with what the user would expect of this kind of site. It features complementary blue, green and purple colours that also stand out to make the content easy to read when teamed with a white contrast.
The colours chosen are:
Format: Coolors Palette
These colours complement each other well and are not too striking, in keeping with what the user expects.
Images feature Shin Tai massages being performed, a profile of the business owner and continue with the relaxing theme of the site. Some of the images have been sourced from Unsplash and are free to use if credited and others were provided by the business owner. The images were chosen because they show the massage being given and give the user an idea of what to expect straight away.
The wireframes were created using Balsamiq and can be found in pdf form in wireframes
- Home
- Contact Page
- Mobile View - Home
- Mobile View - Contact Page
- Tablet View - Home
- Tablet View - Contact Page
- HTML5
- Used as the main markup language for the website content.
- CSS3
- Used to style the individual webpages.
- jQuery and Popper.js
- Used with Bootstrap Scrollspy to track location on the page and Bootstrap Collapse for Accordion sections on mobile and tablet view. Also used with the contact form to launch the modal after required fields on form were completed.
- Bootstrap
- Used to design a mobile-first responsive website layout along with custom components (navigation bar + toggle button, accordion, cards, scrollspy, footer, jumbotron).
- Git
- Git was used for version control (commit to Git and push to GitHub).
- GitHub
- Used to store, host and deploy the project files and source code after being pushed from Git. I also used it for the Project Kanban board to keep track and split tasks into smaller tasks to make them easier to fulfill.
- Gitpod
- An online IDE linked to the GitHub repository used to write my code.
- Font-Awesome
- Used to make headings stand out.
- Google fonts
- Used to compare and choose fonts.
- Coolors
- Used to research and choose the colour scheme by comparing and contrasting similar colours in the generator.
- Favicons
- Used to generate a favicon for the website title.
- Lighthouse
- Used to audit the site for quality and ensure responsiveness.
- WebPageTest
- Used to test performance.
- amiresponsive
- An online tool to check how responsive the site is on different devices.
- tinypng
- Used to reduce the size of the images for better user experience.
Features relevant to both pages:
-
Header
- Contains the navigation links and is fixed to the top of the page for easy use on all devices (this was done using Bootstrap sticky-top class).
- All links are underlined when hovered over and for the icons this is done using the border-bottom attribute to provide spacing and prevent overlapping the icon.
- The headings are underlined as the user visits different areas of the page (using Bootstrap scroll-spy) to help the user work out where they are in the page.
- The home button is on the left side of the header and sections of the page listed on the right where a user would expect them to be.
- Navigation links are underlined when the user hovers over them to give feedback that they have hovered over the right spot.
- On mobile and tablet view the Navigation links collapse in to a toggle button for easier user experience. Some JavaScript was used here to ensure the menu closes after a link is pressed to avoid the user having to close the menu.
- The colour scheme is designed to be easy to read with the contrast and the ratio tested on Google Dev Tools.
-
Hero sections
- The image takes up the full width of the browser to leave a high impact lasting impression with the user and this is replicated on both pages to bring a sense of familiarity when browsing.
- The hero images were obtained when searching for massage related images to instantly give the user the confirmation that this is the site they were searching for.
-
Footer
- Designed to sit at the bottom of the page after all of the content
- Contains social media links and a link to Shiatsu Society website so that the user can verify the business owner's professional status.
-
About sections
- About Shiatsu and About Shin Tai sections contain some information which allows users to understand more about the subject, origin and health benefits.
- About Me section gives the user some history about how the business owner discovered Shin Tai and confidence in her registered status along with a portrait of her for them to relate to.
- On mobile and tablet view the About Shin Tai and About Me sections have been condensed using Bootstrap Accordian component to prevent the user from having to scroll through large volumes of text. The information is split in to subheadings to allow the user to target the information they require.
-
Pricing and Services section
- Provides a video showing the massage being performed by the developer of Shin Tai to allow the user to understand what to expect.
-
Testimonials
- Bootstrap cards used here to contain the testimonial quotes - featured on browser are three cards but to save space on mobile and tablet this has been reduced to one.
-
Contact form
- For the user to contact the business owner, the fields: Name, Phone and Email and required and show error messages if not filled before clicking submit. Comments (textarea) is not required.
-
Modal
- This component from Bootstrap's library is used to give feedback that the form has been submitted as without it the form would reset on submission. This required some use of JavaScript to show it only after all required fields have been filled.
-
Buttons
- On the form the buttons are as a user would expect there is a submit and reset button on the form with the Reset button having more muted colours and Submit button the obvious choice for the user to select upon submission. The modal Close button uses the same colour scheme making it easy for the user to understand what is expected after the message is displayed.
- Button
- On the 404.html page the button redirects the user back to index.html to prevent them having to press the browser back button.
- I would like to implement an appointment booking system and for the user to receive feedback of appointment booked via email and sms.
- I would also like to add an option for the user to add a testimonial to the business online and link to Trust Pilot
- I would like to implement a swipeable carousel for the Testimonials on mobile/tablet view
- Bootstrap columns were used to make the site responsive on all devices.
Version control was managed within GitHub and Gitpod and regular commits pushed to GitHub. See below for how this was managed:
- Starting from GitHub clone the Code Institute template by clicking Use This Template and copying to my repository under the name ms1-ali-shiatsu. The workspace is then launched by clicking GitPod - this action only needs to be performed once and then workspace reopened from GitPod.
- Start the Gitpod Workspace which opens an online IDE editor window.
- After each change made I would save the code, perform git add ., git commit -m "commit message here" and git push to push my changes to the GitHub repository.
- Meaningful commit messages were used to allow to roll back any changes made throughout the journey.
After beginning this process I acknowledged that using git branches would be a more efficient way to do this to avoid any bugs in the future.
Browsers tested: Google Chrome, Mozilla Firefox, Microsoft EDGE and Safari.
The devices used in this testing include Acer Swift 3, iPad Mini 2, Huawei P30 lite v.Android 10, Samsung S8 v.Android 10, Samsung S10 v.Android 10 iPhone X, iPhone 7.
-
Navigation bar
- When the Spa icon is clicked it takes the user to the homepage (index.html) from all pages
- Click each link in turn and you are taken to the desired section of the site
- Reduce the screen size to 992px and toggler (hamburger) menu appears
- Menu links clicked in turn and successfully navigate to each section
- When a link on hamburger menu is clicked the menu automatically closes
- Stays fixed to the top of the browser on all devices
- Tested on all browsers and mobiles.
-
Scrollspy
- Scroll down the page
- Notice the underlined nav links just before each new section is reached.
- Tested on all browsers and mobiles.
-
Footer
- Scroll to the bottom of the page
- Sticks to the bottom of the page no matter how much content is present - this was tested by deleting all the other content from the body and it stayed on the bottom.
- Click the social media links and they open the relevant pages in a new tab.
- Tested on all browsers and mobiles.
-
Accordion Menus
- Click each heading in turn
- Only one card is open at once as designed
- As another is opened the last card is closed
- This was tested on all browsers for sizes 992px and below.
-
Youtube Video
- Scroll to Pricing section
- Video does not autoplay
- Click play and it plays successfully in the window and can click to open in full screen
- Tested on all browsers and mobile.
-
Google Maps iframe
- Scroll to Find Me section
- Google Maps iframe visible
- Zoom function works correctly,
- Hover over and full screen option is available
- Tested on all browsers and mobile.
-
Contact form
- Open "Contact" page
- Try to submit form without required fields and an error message appears.
- Try to submit with invalid email address, error message appears.
- Try to submit with less than 11 numbers in the phone number field and error appears.
- Try to submit the form with all required fields filled correctly and success message appears.
- Tested on all browsers and mobile
-
Modal
- Successfully submit form
- Modal shows only when all required fields correctly filled
- Close button works as required.
Testing was completed to make sure the user goals were completed
-
As a user visiting the site for the first time:
- [x]I want to be able to see social media links so that I can keep up to date through Facebook, Instagram and Twitter. -Social media links open in new tabs
- [x]I want to click the navigation links to be taken to the correct section and also back to home for a better user experience. -Navigation links work correctly to direct to the right part of the site.
- [x]I want the page to be in a predictable layout so that I can navigate it easily.
-The layout is colour coordinated to make it easy to see where each section starts and ends. - [x]I want to see a map of the location so that I can determine how close it is to my location and navigate there easily.
-Google Map with the local area featured in Find Me section. - [x]I want to easily understand the main purpose of the site and learn more about the business.
- [x]I want to see testimonials to understand what previous users think of them and see if they are trusted.
-
As a user returning to the site:
- [x]I want to be able to access the site easily on my chosen device -Site is responsive on all devices tested and Google Dev Tools
- [x]I want to easily be able to navigate to different parts of the site -Fixed navigation at top of page and scroll spy allows for easy navigation
- [x]I want to be able to contact the business owner as I wish through social media or contact form -Contact form available and social media links to keep in touch with business owner.
-
As a user who has never had a Shiatsu Shin Tai Massage before:
- [x]I want to use the site to learn more about Shiatsu Shin Tai and how to contact the business owner so that I can ask questions. -Information provided about Shiatsu and Shin Tai to help the user learn more and contact form included.
- [x]I want to see a demonstration of what to expect when receiving a Shiatsu Shin Tai massage. -YouTube video included and description of what to expect for users who can't view the video.
- [x]I want some information about the price and time required per session -Pricing information available on request due to individual needs. Time of session provided in pricing section
- [x]I want some information about the business owner's qualifications. -About Me section communicates to the user the qualification held through Shiatsu Society and link to their website where the business owner can be verified.
-
Testing completed at WebPageTest, location London, browser Chrome. The site suggested to improve security and cache which is outside the scope of this course so far. -index.html -Security Score -contact.html -Security Score
-
Lighthouse Report Result -Main issues to bring down the performance score were things outwith my control - eg. Bootstrap links (error unused CSS) and caching issues (requesting http cache-control)
The site is responsive on all browsers and mobile through bootstrap framework and media queries and was tested using Chrome Dev Tools. The live site address was given to family and friends as well as the business owner to confirm the links work as expected and is responsive on all devices.
W3C tests completed for html and css pages
See bugs, below
)
-
iframe bug
- During testing the W3C Validator flagged the usage of
within the iframe which would be displayed if the youtube video would not load. This was learned on the course and there doesn't seem to be an alternative from my research.
- During testing the W3C Validator flagged the usage of
-
navbar toggler
- During coding process navbar toggle menu background was transparent and required a fix by setting background color to the links.
-
Overlapping content
- During coding process some elements were overlapping but fixed by assigning max-width 100vh to the background images.
-
Gutter issue
- During coding there was a horizontal scroll bar discovered and through some troubleshooting I discovered an extra div row class so fixed soon after discovery.
The project was developed using GitPod and pushed to GitHub as follows:
To deploy the page to GitHub Pages these steps were taken:
- Log in to GitHub.
- Select suzybee1987/ms1-ali-shiatsu.
- Click Settings and scroll down to Pages.
- Under Source select None and then Master Branch.
- The site automatically refreshes and the website deployed providing the link: https://suzybee1987.github.io/ms1-ali-shiatsu/index.html
- Navigate to GitHub and log in
- Locate my repo
- On the right side of the screen click Fork
- This creates a copy in your own repository to make changes in GitPod
- Once finished with changes add, commit and push to your own GitHub
- Click Pull Requests and select "New Pull Request" button.
To clone this project from GitHub follow the instructions taken from GitHub Docs:
- Navigate to the GitHub Repository
- Above the files click the green Download Code link.
- To clone using HTTPS click the clipboard symbol under "Clone with HTTPS". To clone using SSH key click Use SSH then click the clipboard symbol. To clone using GitHub CLI select Use GitHub CLI and click the clipboard symbol.
- Open Git Bash
- Change the working directory to the location you want the cloned directory to be.
- Type 'git clone' and paste the url copied from step 3.
- Press 'enter' to create your clone.
- CodeInstitute Full Stack Developer Course
- LinkedIn Learning course by James Williamson
- LinkedIn Learning course by Christina Truong
- The information provided regarding Shiatsu was provided by the business owner, Alison Melville.
- README.md help came from: -Code Institute -CI Student Simon Vardy -My Mentor - Maranatha Ilesanme sent me Liga Baikova's README.md to use as a rough template.
-Code Institute lessons using bootstrap -Background layout from css-tricks.com
-Layout fix when contact form overlapped footer
-Lazy Loading added to iframes after reading Lighthouse report which showed these slow down the site loading time. Solution found here
-Modal on submission issue was coming up because the button type="button" was required to make the modal work but this button type doesn't produce error if required fields not completed. Checked on slack and found a solution from post on #peer-code-review where @Nat_kate managed to fix this issue.
-
#index.html
- The Hero image on index.html was sourced from Unsplash. Photo by Conscious Design on Unsplash
- The images of Alison Performing Shin Tai Massage and Alison's profile photo were taken by her husband, Iain Melville.
-
#contact.html
- The hero image on contact.html was sourced from Unsplash. Photo by Laurent Gence on Unsplash
-index.html
- The Massage Demonstration Video is performed by Saul Goodman who came up with the Shin Tai blend of massage.
- Scrollspy navigation inspiration from Peer Code Review project posted by Claire Lemonair
- The business owner shared some well known sites to compare to: Dawn Oei, Kindy Kaur Shiatsu
- My Mentor for confidence boosting and helpful advice and feedback.
- Friends and family for testing the site and giving feedback.