Skip to content

shoreenb/beauty_and_therapy

BranchesTags

Repository files navigation

Logo

Mock Up

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

  2. Features

  3. Information Architecture

  4. Technologies Used

  5. Testing

  6. Deployment

  7. Credits

  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:

Rufina Font

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

Aqua

Dark Grey

Pink

Light Grey

Black

White

  • 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:

Back to contents

Features

Existing Features

Elements On Every Page

Navbar

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.

    Mobile Navbar

  • 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

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

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

Products

  • '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

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.

Categories

  • 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

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.

Low-High

Product/Service Detail

Product 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

Checkout Summary

  • 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.

Bag

  • 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

Checkout Form

  • 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.

Loading Spinner

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

Stripe Validation

  • 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

Order Form

  • 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

Services

  • 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

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

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

Profile

  • 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

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

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

    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

About

beauty-and-therapy.herokuapp.com/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages