Sports Massage Excellence

Contents:book:

UX:superhero_man:

• Project Goals 🧩
• Target Audience Goals 🎯
• Site Owner Goals 🎯
• User Requirements and Expectations 🎯
• Design Choices 🖼️
  • Fonts
  • Icons
  • Colours
  • Images
• Wireframes 📏
• Features 🧮
  • Features that have been developed
  • Features that will be implemented in the future
• Technologies Used 💻
  • Languages
  • Tools & Libraries
• Testing 🧲
• Bugs 🦟
• Deployment 🏄
• Acknowledgements 👏

UX ( User Experience)

Project Goals 🧩

The goal of this project is to inform users of services offered by a sports massage therapist and to allow them to book appointments or contact the owner. The website needs to be visually appealing whilst providing a great User Experience to encourage users to visit the company location and use their service.

User Goals 🧩

• A website that serves as an informative tool to help users find the details of the services
• Send a message via contact form
• Ability to see company location
• Ability to read and leave reviews
• Visiual interaction and feedback
• Links to social platforms
• Interact with the website on both Desktop tablet and mobile

User stories :dart:

• As a user I expect to be able to quickly find the locations and opening times
• As a user I want to be able to read reviews of this therapist
• As a user I want to be able to get in touch with the business owner to discuss my needs
• As a user I expect to see a visual feedback when I press a button
• As a user I expect to know where on the page I currently am while browsing
• As a user I expet to easily understand the main purpose of the site and learn more about the organisation.

Site Owner Goals :dart:

• Improve brand recognition in the local area
• Advertise their services
• Receive contact details through use of contact form

User Requirements and Expectations :dart:

• Requirements

  • Navigate the website using the navbar/pop-out nav
  • Be provided with information of services and location of the business
  • contnent displayed in a visually appealing manor

• Expectations

  • Content is visually satisfying and informative on all screen sizes
  • No information overload
  • Navigation takes user to specific parts of the website
  • Burger menu button appeares in place of navbar on tablet and mobile devices

Design choices 🖼️

Fonts

I chose to use the font Open Sans as it was designed with a neutral, yet friendly appearance which compliments the general attitude of this project's design and it's desired function. it can be found here.

Icons

The icons used are self explanatory so that the user does not need to struggle to interpret what the icon will actually mean.

Colours

Using learned knowledge from prior research, bright and vibrant colours have a higher influence in terms of positivity and therefore more potential sales/leads and interactions.

Colours used

Images

Wireframes 📏

I built the wireframes for this project using Balsamiq. Started by doing a very basic wireframe for Mobile/Tablet/Desktop - these were to get a basic understanding of how structurally elements would appear on the page. You can view this wireframe in a wireframe folder.

Features 🧮

Features that have been developed:

Features to be implemented in the future

• Blog

Technologies Used 💻

Languages

• HTML
• CSS
• JavaScript

Tools & Libraries

• PopperJS
• jQuery
• Git
• Bootstrap
• Font-Awesome
• Google Maps
• Google Fonts
• Balsamiq
• Picresize
• Favicon generator
• AmIresponsive - used to generate multi screen view of the webiste on different devices

Testing 🧲

Plan

Tests

Bugs 🦟

Deployment 🏄

Sports Massage Excellence was developed on GitPod, using git and GitHub to host the repository.

When deploying Sports Massage Excellence using GitHub Pages the following steps were made:

• Opened up GitHub in the browser.
• Signed in using username and password.
• Selected my repositories.
• Navigated to bartosz-makowski/.
• In the top navigation clicked 'settings'.
• Scrolled down to the GitHub Pages area.
• Selected 'Master Branch' from the 'Source' dropdown menu.
• Clicked to confirm my selection.
• Sports Massage Excellence now live on GitHub Pages. 🚀

Running Sports Massage Excellence Locally

Cloning Sports Massage Excellence from GitHub:

• Navigate to /bartosz-makowski/Sports Massage Excellence.
• Click the green 'Clone or Download' button.
• Copy the url in the dropdown box.
• Using your favourite IDE open up your preferred terminal.
• Navigate to your desired file location.
• Copy the following code and input it into your terminal to clone Sports Massage Excellence.

https://github.com/bartosz-makowski/

Acknowledgements 👏

Thanks to