The Beauty and Therapy online web shop is designed to offer beauty services, products, therapies and subscription based treatments. This website is designed to provide a responsive, intuitive and effortless online shopping experience for visitors who wish to view their treatment schedule, book a treatment or purchase a related product all in one place.

Table of Contents

1. UX

   • Project Goals
     • Visitor Goals
     • Business Goals
       • Admin and Site Management
   • User Stories
     • Viewing and Navigation
     • Registration and User Accounts
     • Sorting and Searching
     • Purchasing and Checkout
   • Design
   • Wireframes

2. Features

   • Existing Features
     • Elements On Every Page
   • Features To Implement In Future

3. Information Architecture

   • Database Choice
   • Data Models
     • User
     • Products App Model
     • Services App Model

4. Technologies Used

   • Tools
   • Databases
   • Libraries
   • Languages

5. Testing

   • See separateTesting.md file

6. Deployment

   • How to run this project locally
   • Heroku Deployment

7. Credits

   • Content
   • Media
   • Code
   • Acknowledgements

8. Contact

---

UX

Project Goals

Visitor Goals

The main target audience for Beauty & Therapy are:

• People who want to have the choice of buying a large range of beauty products.
• People that want to schedule a beauty therapy service.
• People who want personal advice on their beauty regime.
• People that would prefer to order online rather than on the high street.
• People who want to keep up with the latest beauty releases.
• people looking for special offers on beauty essentials.

The Beauty & Therapy online shop is a great way to meet these needs because:

• The navigation and user interface resembles the conventions of similar online shops, with product and service images that are clear and of good quality. Details about each product and service are available for the buyer and can be found easily.

• The Beauty & Therapy can also be searched by category or text search so customers can either leisurely browse categories or find specific items/services directly.

  Back to contents

Business Goals

Admin and Site Management

ID	AS A/AN	I WANT TO BE ABLE TO...	SO THAT I CAN...
1	Site Owner	Add a product/service	Add new items to my site
2	Site Owner	Edit/Update a product/service	Amend prices, descriptions, images or other criteria pertaining to the products/services
3	Site Owner	Delete a product/service	Remove items that are no longer required
4	Site Owner	Promote products/services	Build brand awareness, reach new users and gain a wider audience

Back to contents

User Stories

Viewing and Navigation

ID	AS A/AN	I WANT TO BE ABLE TO...	SO THAT I CAN...
1	Customer	Navigate the site easily from any device: desktop, tablet or phone	Have visually appealing content to view that is also useable
2	Customer	Easily find products/services that are available to purchase	Select some to purchase
3	Customer	Click on individual products to see the products/services in more detail	See product/service image, description and price
4	Customer	Easily identify clearance items/special offers	Make a saving on products/services i'd like to purchase
5	Customer	See a summary of my bag	Keep a track of spending
6	Customer	Clearly see where to book services once purchased	Book a treatment/service

Registration and User Accounts

ID	AS A/AN	I WANT TO BE ABLE TO...	SO THAT I CAN...
7	Account Holder	Easily register for an account	Have an account and view my profile details
8	Account Holder	Receive email confirmation of my account registration	Have confirmation of successful registration
9	Account Holder	Login or logout easily	Have access to my personal account information
10	Account Holder	Recover my password easily in case I forget it	Gain access to my account
11	Account Holder	Have a personalised user account	View my personal order history, scheduled services, subscriptions and save my payment information
12	Account Holder	Edit my account details	Update my information where necessary

Sorting and Searching

ID	AS A/AN	I WANT TO BE ABLE TO...	SO THAT I CAN...
13	Customer	Sort the list of available products and services	Sort products/services by category, best rated and best price
14	Customer	Sort a specific category of product/service	Sort the products/services I might want to purchase without having to search through the total list of products/services
15	Customer	Sort products/services that fit into multiple categories	Find the best-priced or best-rated products/services across broad categories such as "treatments" or "skincare"
16	Customer	Search for a product by keyword or name	Quickly find a specific product or serivce I want to purchase
17	Customer	See the search results easily and the number of the returned results	Identify whether the product/service that I want is available

Purchasing and Checkout

ID	AS A/AN	I WANT TO BE ABLE TO...	SO THAT I CAN...
18	Customer	Select the quantity of products/services easily when purchasing	Verify that I don't order the wrong product/service or quantity
19	Customer	View items in my bag ready to be purchased	View a list of the products/services I will be purchasing and the total cost
20	Customer	Alter the quantity of individual items in my bag	Make changes to my bag easily before checkout
21	Customer	Feel reassured that my personal details and payment information is safe and secure	Follow the instructions to easily and confidently make a purchase
22	Customer	View an order summary before completing the purchase	Verify that I haven't made any mistakes
23	Customer	View an order confirmation after making a purchase	Verify that the purchase was successful
24	Customer	Receive an email confirmation after checking out	Retain confirmtation of what I have purchased for my records
25	Customer	Be able to complete a booking form once my service has been purchased	Book a treatment/service
26	Customer	Find information on how to cancel an order	Cancel an order

Back to contents

Design

The Beauty & Therapy website has a calming, zen, spa feel to highlight the self care aspect of the products and services available. The following design choices were made with this in mind:

Font

• The primary font that was used was 'Rufina' because of it has style but also clear readability. This font also looks good in uppercase, which was used on the buttons of the site. It reflected the relaxed but luxurious nature of the beauty therapy sector.

Icons

• To maintain the minimalist design of the site, icons were used across the site to enhance usability.
• In the navigation bar the search, user and shopping bag icons are conventionally used and would be familiar to the visitors
• The tag and star icons used for the product categories and product ratings help differentiate them from the rest of the product description
• The social media icons in the footer are a familiar, uncluttered way to lead visitors to social media platforms.

Colours

• The colours used for this site were subtle and calming shades to reflect the atmosphere of a spa. The main aqua shade was used to contrast the grey, black and white.
• The pink shade, though still subtle, added a nice contrast to the aqua and grey colours and was used to help the price stand out.

Styling

• The hover feature was used to highlight the buttons that were a call to action.
• The edges of boxes were not rounded to convey the clean, stylish feel of the site. For example, on buttons, the search field and the quantity selector.

Back to contents

Wireframes

These wireframes were created using Balsamiq during the design and planning part of this project:

• Home
• Login
• Profile
• Products
• Product Detail
• Checkout
• Booking Form

Back to contents

Features

Existing Features

Elements On Every Page

Navbar

• The navbar features on every page for consistency and ease for the user to traverse the site.

• The Beauty & Therapy logo on the far left links to the site's home page.

• Desktop: In the top centre of the desktop view is the search box for quick access to specific text queries.

• On the top right is the user and bag icons so the user can see their bag total at a glance and have quick access to the user profile, logout and product management if the user is a superuser.

• If the user is not logged in, they will se options to register or log in to the website.

• A user that is not logged in can still add item's to their bag and see a running total, as the bag information is stored in their session data

• Under the search box in the centre are the main categories: All Products & Services, Waxing, Eyes, Face, Nails, Body and Special Offers. Each heading is a dropdown link that can direct the user to the products and services related to that category, and a link for all of the products and services in that category combined.

• The 'All Products & Services' dropdown link sorts all the products & services by price, rating and category, as well as a link for all the products and services on the site

• Mobile and Tablet: Along the top of the mobile and tablet views is the hamburger menu on the far left, which reveals a dropdown list of all the categories.

  

• The search, user and bag icons are the next icons displayed for the user to access the same functions that would be available on the desktop vi

Home

• The main feature of the home page is a full screen hero image with a call to action button that leads the visitor through to 'All Products & Services'. The image is different for mobiles as the main landscape image used was cropped on mobiles and didn't look as visually appealing.

Login

• The login page can be accessed from the user icon in the navbar. It's functionality has the standard features of requesting username and password
• Validation for this form is handled in the backend and the user will receive the relevant feedback when they sign in

Logout

• Any user who goes to their user icon and logs out is asked to confirm that is what they wish to do and then they are logged out and the session is cleared. A message will confirm that they are logged out and provides a link to log back in if they want to.

Register

• A new user can create a new account using the sign up page.
• They need to provide a unique username and add their email address, password and confirm the password.

All Products/Services

• 'All Products & Services' is the central hub of the site. The user can find everything available in a neat well presented way.
• A 'Back to Top' button is a helpful feature as scrolling through so many items can become monotonous.
• The visitor can find a concise summary of the item, as well as the price which is in a contrasting pink colour so that it stands out and is easily seen, while still blending in with the theme.
• As there are an array of items, the background remains plain to maintain focus on the products and services on offer.
• The main heading also reflects what is being shown on the page and changes accordingly. As there is a mix of products and services on the 'All Products & Services' page, the heading says 'Products & Services.'
• The navbar is fixed so that the visitor can always have access to their profile, search bar and the main categories.

Search

• The search bar allows the user to search for generic terms if they don't have a specific item in mind. The keyword search will bring up any products or services that contain or are associated with that word.

• The drop down button under the main heading is also a quick way for the user to see the products and services the search results can be categorised in.

Sorting

• Once the user has the received the search results, they can sort them in ascending or descending order by price, rating, name or category. This is helpful for the user to narrow down the search for their product or service.

Product/Service Detail

• If the user has found an item that they are interested in, they can click it's image to get a larger image, a more in-depth description, choose any available options and the quantity if they wish to purchase it.

Shopping Bag

• Once the user has clicked the 'Add to Bag' button, a handy summary box appears to give the user a quick view of the bag, a count of the items and the bag subtotal and grand total. This is a useful reminder of what is already in the bag and also a prompt for the user to continue on to the checkout.

• Inside the bag, the user will see a list of the items, details, price, quantity, subtotals and grand total. They can also change the quantity and update the bag, delete items, go back to shopping or click the secure checkout button to go to checkout.

Checkout

• Once the user has gone through to checkout, they will see a summary of the bag to ensure at every stage they are still happy to purchase the items, and a form to fill out their details for delivery. There is a handy checkbox so their details can be saved to their profile and next time they wouldn't have to fill out the form.
• The form is fully validated to help ensure the format is completed in the correct format and then all the user has to do to complete the order is enter their details into the payment field. They still have the option to go back to the bag before they enter their details and a highlighted message under the payment field remind the user one last time of the amount of their order.

• Once the card details are entered correctly a loading overlay and spinner lets the user know that the order is being processed

• Validation on the stripe payment field will prompt the user if the card details are incorrect and therefore avoid errors further down the line.

Order Confirmation

• Once the order has been processed successfully, the user will be redirected to a message stating that the order has been successful and presenting the user with their confirmed order details. They are also made aware that an email has been sent to them and a message box with a message confirms again that the order has been successful.

Service Booking

• If a user's search results bring back only services, the heading will change to reflect that. If a user purchases a service, as seen above on the order confirmation, a 'Book Your Services' button will appear under the details of the service. The button does not appear on a product only order.
• The 'Book Your Services' button prompts the user to go through to the booking page and schedule their service.

Booking Form

• Once the user has arrived at the booking form they will see confirmation of the services they have purchased and the related order number and order date.
• They will then complete the rest of the form by selecting the date and time that they wish to schedule their service for.

Booking Confirmation

• Once they click the 'Confirm Booking' button, they will receive another confirmation, and confirmation message pop-up. This time the confirmation will contain the details of the booking that they just made and the related order details.

Profile Page

• If the user has ticked the checkbox to save their information, this will be located in their profile.
• In the profile they have the option to update their default details and also they can view their order history.
• If they click a past order, a message pop-up will remind them that it is a past order and how to find the original order details. There is also a handy button to return back to their profile page.

Product Management

• The store owner will have special privileges that a user will not have. They can add, edit and delete products and services.
• Only a superuser will see Product Management in their profile dropdown list and edit and delete fields under every product or service item.

Pages Under Maintenance

• There are some categories that may not have any products or services that match. I have rendered a parameter that if that happens, the user will be presented with a 'coming soon image', which is more informative than a blank page.

Back to contents

Features To Implement In Future

• Due to time restrictions, I was unable to implement all of the desired features. Given more time I would Link the Booking details to the profile, similar to the order history. This would allow the user to have access to all their booking and user information.
• If multiple services are purchased currently, the user can only book them under one date. In future I would implement the function to have a booking date and time per service that is ordered.
• I would customise the appearance of the date and time pickers so they are more user friendly and prevent the ability to book dates in the past.
• I would add a contact form so the user can get in contact with the site owner directly from the site.
• I would add social media links to improve the reach of the website and improver interaction with users.
• I would add defensive modals so that if a superuser accidentally presses delete they have another chance to retain the items.
• This section will grow as the site is used by real users and issues and needs become more apparent.

1. Information Architecture

   • Database Choice

     • On deployment, the SQL database provided by Heroku is a PostgreSQL database.

   • Data Models

     • User

       The User model utilized for this project is the standard one provided by django.contrib.auth.models

     • Products App Model

       Within the products app, the Product model holds all the data needed for the products and services in the shop. Originally I had products and services in separate models but the pk codes were causing clashes in the bag so I combined them into one overall products app and it worked well.

       Product model

       • Category choices are defined within the Product model.
       • The Product model uses Pillow to store all image files in an AWS S3 bucket.

     • Services App Model

       In order to create a Booking form I created a Booking model that used fixtures to implement the BookingTimes model into the crispy form.

     • Options Model

       In order to create add options onto the products, I created an options model that was a many-to-many field so options could be used multiple times on many products.

   Technologies Used

   • Tools
     • Django as python web framework for rapid development and clean design.
     • Stripe as payment platform to validate and accept credit card payments securely.
     • AWS S3 Bucket to store images entered into the database.
     • Boto3 to enable creation, configuration and management of AWS S3.
     • Django Crispy Forms to style django forms.
     • Django Heroku to improve deployment of django projects on heroku.
     • Django Storages a collection of custom storage backends with django to work with boto3 and AWS S3.
     • Gunicorn WSGI HTTP Server for UNIX to aid in deployment of the Django project to heroku.
     • Pillow as python imaging library to aid in processing image files to store in database.
     • Psycopg2 as PostgreSQL database adapter for Python.
     • PIP for installation of tools needed in this project.
     • Git to handle version control.
     • GitHub to store and share all project code remotely.
     • Balsamiq to create the wireframes for this project.
   • Databases
     • PostgreSQL for production database, provided by heroku.
     • SQlite3 for development database, provided by django.
   • Libraries
     • JQuery to simplify DOM manipulation.
     • Bootstrap to simplify the structure of the website and make the website responsive easily.
     • FontAwesome to provide icons for The Beauty and Therapy webshop.
     • Google Fonts to style the website fonts.
   • Languages
     • This project uses HTML, CSS, JavaScript and Python programming languages.

   Testing

   • See separateTesting.md file

   Deployment

   • How to run this project locally

     To run this project on your own IDE follow the instructions below:

     Ensure you have the following tools: - An IDE such as Visual Studio Code

     The following must be installed on your machine: - PIP - Python 3 - Git

     To allow you to access all functionality on the site locally, ensure you have created free accounts with the following services: - Stripe - AWS and set up an S3 bucket - emailjs

     Please click the links above for documentation on how to set these up and retrieve the necessary environment variables.

     Instructions

     1. Save a copy of the github repository located at https://github.com/Shoreenb/beauty_and_therapy by clicking the "download zip" button at the top of the page and extracting the zip file to your chosen folder. If you have Git installed on your system, you can clone the repository with the following command.

        git clone https://github.com/shoreenb/beauty_and_therapy
        

     2. Open your preferred IDE, open a terminal session in the unzip folder or cd to the correct location.

     3. A virtual environment is recommended for the Python interpreter, I recommend using Pythons built in virtual environment. Enter the command:

        python -m .venv venv
        

     NOTE: The python part of this command and the ones in other steps below assumes you are working with a windows operating system. Your Python command may differ, such as python3 or py

     1. Activate the .venv with the command:

        .venv\Scripts\activate 
        

     Again this command may differ depending on your operating system, please check the Python Documentation on virtual environments for further instructions.

     1. If needed, Upgrade pip locally with

        pip install --upgrade pip.
        

     2. Install all required modules with the command

        pip -r requirements.txt.
        

     3. Set up the following environment variables within your IDE.

        • If using VSCode, locate the settings.json file within the .vscode directory and add your environment variables as below. Do not forget to restart your machine to activate your environment variables or your code will not be able to see them:

        "terminal.integrated.env.windows": {
            "HOSTNAME": "<enter hostname here>",
            "DEV": "1",
            "SECRET_KEY": "<enter key here>",
            "STRIPE_PUBLISHABLE": "<enter key here>",
            "STRIPE_SECRET": "<enter key here>",
            "EMAILJS_USER_ID": "<enter key here>",
            "STRIPE_SUCCESS_URL": "<enter url here>",
            "STRIPE_CANCEL_URL": "<enter url here>",
            "AWS_ACCESS_KEY_ID": "<enter key here>",
            "AWS_SECRET_ACCESS_KEY": "<enter key here>",
            "AWS_STORAGE_BUCKET_NAME": "<enter bucket name here>",
        }
        

        • If using an IDE that includes a bashrc file, open this file and enter all the environment variables listed above using the following format:

        HOSTNAME="<enter key here>"
        

        • HOSTNAME should be the local address for the site when running within your own IDE.
        • DEV environment variable is set only within the development environment, it does not exist in the deployed version, making it possible to have different settings for the two environments. For example setting DEBUG to True only when working in development and not on the deployed site.

     4. If you have restarted your machine to activate your environment variables, do not forget to reactivate your virtual environment with the command used at step 4.

     5. Migrate the admin panel models to create your database template with the terminal command

        python manage.py migrate
        

     6. Create your superuser to access the django admin panel and database with the following command, and then follow the steps to add your admin username and password:

        python manage.py createsuperuser
        

     7. You can now run the program locally with the following command:

        python manage.py runserver
        

     8. Once the program is running, go to the local link provided and add /admin to the end of the ur. Here log in with your superuser account and create instances of ShippingDestination and Product within the new database.

     9. Once instances of these items exist in your database your local site will run as expected.

   • Heroku Deployment

     To deploy Beauty & Therapy site to heroku, take the following steps:

     1. Create a requirements.txt file using the terminal command pip freeze > requirements.txt.
     2. Create a Procfile with the terminal command echo web: python app.py > Procfile.
     3. git add and git commit the new requirements and Procfile and then git push the project to GitHub.
     4. Create a new app on the Heroku website by clicking the "New" button in your dashboard. Give it a name and set the region to whichever is applicable for your location.
     5. From the heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.
     6. Confirm the linking of the heroku app to the correct GitHub repository.
     7. In the heroku dashboard for the application, click on "Settings" > "Reveal Config Vars".
     8. Set the following config vars:

     Key	Value
     AWS_ACCESS_KEY_ID	<your secret key>
     AWS_SECRET_ACCESS_KEY	<your secret key>
     AWS_STORAGE_BUCKET_NAME	<your AWS S3 bucket name>
     DATABASE_URL	<your postgres database url>
     EMAILJS_USER_ID	<your secret key>
     HOSTNAME	<your heroku app hostname>
     SECRET_KEY	<your secret key>
     STRIPE_CANCEL_URL	<link to all-products page in your app>
     STRIPE_PUBLISHABLE	<your secret key>
     STRIPE_SECRET	<your secret key>
     STRIPE_SUCCESS_URL	<link to checkout/confirm page in your app>

     1. From the command line of your local IDE:

        • Enter the heroku postres shell
        • Migrate the database models
        • Create your superuser account in your new database

        Instructions on how to do these steps can be found in the heroku devcenter documentation.

     2. In your heroku dashboard, click "Deploy". Scroll down to "Manual Deploy", select the master branch then click "Deploy Branch".

     3. Once the build is complete, click the "View app" button provided.

     4. From the link provided add /admin to the end of the url, log in with your superuser account and create instances of ShippingDestination and Product within the new database.

     5. Once instances of these items exist in your database your heroku site will run as expected.

2. Credits

   • Content

     The main structure of the project was based on the boutique ado project with the assistance of tutor support and django docs to help formulate my unique options model and booking model.

   • Media

     Media Images:

     Nail technician Image by spabielenda from Pixabay

     Massage Image by Mariolh from Pixabay

     Mud mask Image by Olya Lolé from Pixabay

     Eyelash Image by agustino from Pixabay

     Hot stones Image by Engin Akyurt from Pixabay

     Nail varnish Image by Marion Müller from Pixabay

     opi nail varnish Photo by Cut Collective on Unsplash

     Nail and flowers Image by Susi Anderl from Pixabay

     Foot spa Image by 3220633 from Pixabay

     Face Image by silviarita from Pixabay

     Mud mask Image by Olya Lolé from Pixabay

     Eyelash Photo by Nataliya Vaitkevich from Pexels

     Eyebrow tinting Photo by Anthony Shkraba from Pexels

     photo measuring eyebrow by diana.grytsku from freepik

     photo of woman with facial wax created by freepik

     threading photo by Rune Enstad on Unsplash

     varnish removal Photo by cottonbrofrom Pexels

     Semi Permanent Makeup Photo by Gabe Pierce on Unsplash

     Hot wax Photo by Kate Hliznitsova on Unsplash

     image of beauty therapist with hot wax created by prostooleh on freepik

     Head massage Photo by Andrea Piacquadio from Pexels

     leg massage Photo by Conscious Design on Unsplash

     foot massage Photo by Anete Lusina from Pexels

     Deep tissue Photo by Ale Romo Photography on Unsplash

     Prenatal massagePhoto by 🇸🇮 Janko Ferlič on Unsplash

     massage oil Photo by alan caishan on Unsplash

     nail varnish Images by Bruno /Germany from Pixabay

     face mask Image by AdoreBeautyNZ from Pixabay

     eye cream Image by leyajacob from Pixabay

     cosmetics Image by pmvchamara .com from Pixabay

     Hand cream Image by Anastasia Oliver from Pixabay

     beauty product images by Rebecca Tan from kaggle.com

     Hand and nail Photo by Chelson Tamares on Unsplash

     manicure Photo by cottonbro from Pexels

     leg Photo by Lucrezia Carnelos on Unsplash

     Strip wax Photo by The Creative Exchange on Unsplash

     Grey cross Image by Pete Linforth from Pixabay

     Coming soon Image by Parveender Lamba from Pixabay

     Kaggle provided the beauty product images(beauty_image)

     Acknowledgements

     Special thanks to my mentor Gerard McBride for his time, expertise and knowledge through my entire journey through the CodeInstitute full stack web development course.

     With thanks also the many tutor support tutors who helped troubleshoot and debug, saved me from giving up, the endless support of my family who supported me and all the slack volunteers who assisted and encouraged me along the way.