Shey's Skin Kitchen

Shey's Skin Kitchen is a shop providing skin products which works extremely well not only for a general moisturiser but for very dry skin, eczema, psoriasis, and inflamed skin.

Link to site

UX

User Stories

There are 3 types of users on this website shoppers, site users and store owner.

Shopper

As a shopper I want to be able to do the following below

Viewing and Navigating

1. View a list of products so I can select items to purchase.
2. View a specfic cat of products to quickly find products i'm interested in without having to search through all products.
3. View each product details like see the price, description, product rating, ingredients, and product range.
4. Find deals, clearance, and special offers to take advantage of products I would like to buy.
5. View all my purchases at any time to avoid overspending.

Sorting and Searching

1. Sort the list of available products by best rated, best priced, and categorically sorted products.
2. Filter products to specific category and sort products to find the best priced, best rated or name.
3. Sort multiple categories of products simultaneously such as creams and soaps
4. Search products by name and description to find specific products I would like to purchase.
5. See what I have searched for and the number of results to quickly decide the products I want to purchase.

Purchasing and Checkout

1. Easily select the size and quantity of a product when purchasing it to ensure I do not select the wrong product, quantity, and size.
2. View items in my bag identify the total cost of all items I will receive.
3. Adjust the quantity of individual items in my bag to make changes before checkout.
4. Easily enter payment information to check out quickly with no hassles.
5. Feel my personal and payment information is safe and secure.
6. View an order confirmation after checkout to verify I have not made any mistakes.
7. Receive an email confirmation after checkout to keep a record of my purchases.

Site User

After a shopper can decide to make an account and become a site user

As a Site User I want to be able to do the following below

Registration and User Accounts

1. Easily register for an account and be able to view my profile.
2. Easily login and logout to access my personal account information.
3. Easily recover my password in case I forget it to recover access to my account.
4. Receive an email confirmation after registering to verify my account register was successful.
5. Have a personalised user profile to view my personal order history and order confirmation.
6. Leave a review on a product for others to see.

Store Owner

As a Store Owner I want to be able to do the following below

Admin and Store Management

1. Add a product to the store.
2. Edit and update a product e.g., product prices, descriptions, images, and other product criteria.
3. Delete a product that is no longer on sale.

Surface

Colour Scheme

I wanted a simple colour scheme, so I went 3 colours white (#FFFFFF), black (#000000), and orange (#E19B74).

Black and white was chosen to make it simple and the orange was chosen as it is the exact match of the photo on the homepage.

Typography

I picked 2 fonts to be used one for headers and one for general text.

The 2 fonts are Amatic SC for headers and Abel for general text.

Images

Other than the product images only 1 other image has been used on the homepage to give a warm welcome feel that colour scheme was based around this photo as the background was orange and therefor orange was added to the colour scheme.

It is of hands with cream on them representing what the site sells Skin care e.g., creams.

Skeleton

Once all the pages have been chosen and a design accepted, I then went to design each page on Adobe XD see below all the wireframes for each page.

• Home Wireframe
• Sign Up Wireframe
• Sign in Wireframe
• Profile Wireframe
• Review Wireframe
• Recover Password Wireframe
• Products search Wireframe
• Product Wireframe
• Shopping Bag Wireframe
• Checkout Wireframe
• Order Confirmation Wireframe
• Contact Us Wireframe
• Add a Product Wireframe
• Edit a Product Wireframe

While designing I also created 2 wireframes which will no longer be created

• Payment Details Wireframe
• Add a Card Wireframe

Structure

The navbar and footer has access to everything that the type of user will need.

Data Tables

All the data is stored in MySQL and Django to manage the storage as well.

How the tables are designed are all shown below.

Site users

Show images of table in Django.

Products

Show images of table in Django.

Product sizes and prices

Show images of table in Django.

Reviews

Show images of table in Django.

Purchases Made

Show images of table in Django.

Basket

Show images of table in Django.

Scope

Once all the user stories have been complete all the features needed for the site to meet the user stories are detailed below.

Sign up/in with social media

I have done it so its easier for users to sign up or in by just connecting to social media or sign up through there email if they wish.

User experiences edit profile and delivery details

Each user can easily log in and out with no problems. If a user forgets their password, they can easily recover it with their email. They can also save their delivery address to save them time if there a frequent customer and do not want to write there address every time they make a purchase.

Payment Details saved no longer will be done

While designing I wanted a user to save their card details to save time when purchasing items but was informed about the security risk and the various laws around it. As internet browsers now save those details, I thought it better it takes this out to avoid any security issues.

Basket

The total in the basket will always be shown in the navbar to let the shopper know how much is always in their basket.

Reviews

Once a shopper has signed up and has purchased an item. They can leave a review for others to see and then once a new shopper has come to the site, they will then be able to see the reviews of the product and filter products on the best rated.

Checkout and Order confirmation

When a shopper has purchased something, they will receive an email confirmation of what they have purchased and an order confirmation page which will detail what they have brought and all the information they have provided. So, shoppers will be able to have s record of what they have purchased.

Store owner to add, edit and delete a product

The store owner will be able to add products to the store for shoppers to purchase. They can then edit the item in the future if they wish to put it on sale or add more stock for example and then delete the product of, they wish to no longer sell it. This is done by have form set up for them to allow this to happen.

Add multiple sizes and prices for a product

The store owner can save multiple sizes which will have different prices until each product. This is to avoid having the product save in twice under 2 products. This will make it easier to manage as the store owner can see everything associated with the product in one page when they add or edit.

Check for any available stock before payment

Before a shopper purchases a product, it will make sure there is enough stock for what they want in case 2 people buy the same product at the same time and the product is out of stock.

Strategy

My aim for this project is to build a website where all the user stories are met above. As a shopper, site user and store owner. Once I have outlined all the requirements, I will come up with a design scheme where I will make sure all wireframes made meet all the requirements of the user stories and design scheme.

Features

Existing Features

Features Left to Implement

Technologies Used

Testing

Django-allauth tests

I used django-allauth as it has all the features I need for the site and it is completely customizable and will allow me to add more functionality later and as it is an open source, so it is backed by millions of developers who keep it secure and up to date.

While setting up allauth I ran some tests to make sure it works.

Checking I can log in and out. (1 test) As I created the superuser in the terminal I can check it works my adding ‘/admin’ to the page address when I open the project and see if I am able to log in using the superuser login I created in the terminal.

Verifying email tests (2 tests)

1. I went to setting.py and under the email set up in ‘LOGIN_REDIRECT_IRL = “/”’ I changed it to ‘LOGIN_REDIRECT_IRL = “/Success”’
2. I opened the project and put ‘accounts/login’ at the end of the page address.
3. Signed in and if it says I must verify my email then it passed the first test(1st test checked)
4. Then I went back and put ‘admin’ at the end of the page address making sure ‘accounts/login’ has been deleted from the page address.
5. I Logged in and click email addresses.
6. Then I clicked on the email I put the superuser as and ticked verify and primary and saved.
7. I went back to ‘accounts/login’ at the end of the page address making sure ‘admin’ was gone and logged back in again.
8. I logged in and if it says /success at the end of the page address it passed the second test (2nd test passed)
9. I went back into setting.py and changed the code to ‘LOGIN_REDIRECT_IRL = “/”’.

Testing new templates or pages

Whenever creating a new page or template I would always check it works before writing any code by just putting a h1 header of ‘It works’ with bootstrap CSS on it of text-success where the text will come up green to make sure it works as the links are in the base template.

Responsive Design testing

To check the code works on all screens. I used the inspect section of google chrome. Where I can change the screen size to see if the design will work on all screens.

To go on the inspect section on google chrome I right clicked on the website and clicked on ‘Inspect’ then on the top left it then gives options to change the screen size.

Bugs found in responsive design

Banner not on tablet or phone screens

While testing the responsive design I found that the banner does not show on tablet or phone screens as it was behind the nav therefore I added padding to bring it down and made sure no padding was there when on large screens.

item would not add to bag

When adding something to the bag the page was kept breaking and bringing up a 404 error. While investigating I noticed that when it was redirecting it did not have the product model connected as it needs to model’s to go back and therefore added it in for it to redirect probably.

Deployment

1. As I was going to use Gitpod I used this template to open a GitHub repository.

How I created a new Django

1. I went into the terminal and wrote ‘pip3 install django’ to install Django.
2. I then wrote ‘django-admin startproject sheyskinkitchen.’ to create the project in the current directory.
3. I went into .gitignore if one hasn’t been created add a file called ‘.gitignore’
4. In .gitignore I added these 3 to the list.
   • ‘*sqlite’ to ignore our development database file.
   • ‘*.pyc’ & ‘__pycache __’ to ignore compiled python code which we do not need in version control.
5. Then I typed ‘python3 manage.py runserver’ to see if it had installed successfully in which it told me when i exposed port 8000.
6. I stopped the server by clicking Ctrl & C.
7. Then I created a superuser in Django by writing ‘python3 manage.py createsuperuser’ and followed the instructions by entering a username, email, and password.

Credits

Content

Media

Photo on the homepage of hands with cream was taking from pexel see link to photo

Acknowledgements

A lot of inspiration was taken from the site see the github page