PROJECT NAME
"Ecommerce" by Christopher Randall
In this project I wanted to create a simple Ecommerce store which provided the user with a simple design and layout.
User Experience (UX)
User stories
First Time Visitor Goals:
- As a First Time Visitor, I want to easily understand the main purpose of the site.
- As a First Time Visitor, I want to be able to easily navigate throughout the site.
- As a First Time Visitor, I want to be able to easily purchase an item.
Returning Visitor Goals:
- As a Returning Visitor, I want to find items I had previously added to my cart to still be there.
- As a Returning Visitor, I want to find my cart items ready for purchase.
Frequent User Goals:
- As a Frequent User, I want to check to see if there are any newly items added to the store.
Design
Colour Scheme:
- Two main colours were used on the homepage which were a light Grey as a background and a subtle aqua Blue for the navigation bar, along with a clean White background for each individual item.
Typography:
- The Sans Serif font is the main font used throughout the whole website.
Imagery:
- Imagery is important and it was imperative to showcase anm image of the item over the cost.
Wireframes
Home Page - https://github.com/MrChrisRandall/Django-milestone-Ecommerce/blob/Backup/ecommerce/static/images/Ecomm-Main-page.png
Mobile View - https://github.com/MrChrisRandall/Django-milestone-Ecommerce/blob/Backup/ecommerce/static/images/Ecomm-Mobile-view.png
FEATURES
- Responsive on all devices.
- Interactive elements.
Frameworks, Libraries & Programs Used
Bootstrap 4.4.1:
Bootstrap was used to assist with the responsiveness and styling of the website.
Font Awesome:
Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
Git:
Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub:
GitHub is used to store the projects code after being pushed from Git.
Testing
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
Testing User Stories from User Experience (UX) Section:
First Time Visitor Goals:
As a First Time Visitor, I want to easily understand the main purpose of the site.
Upon entering the site, users are automatically greeted with a clean minimal homepage. Each picture showcasing the product on display along with clean "Add to cart" and "View" buttons.
As a First Time Visitor, I want to be able to easily navigate throughout the site.
The site has been designed to be minimal and clean with little clutter.
As a First Time Visitor, I want to be able to easily purchase an item.
This is made easy by the "Add to cart" button which stands out on all products on display.
Returning Visitor Goals:
As a Returning Visitor, I want to find items I had previously added to my cart to still be there.
Thanks to Cookies stored by the website a user can add items to their cart and then return at a later date to find the items still there ready for purchase.
As a Returning Visitor, I want to find my cart items ready for purchase.
This is as simple as clicking into the cart where the items have been saved, clicking the checkout button, filling out the form and clicking on the payment options.
Frequent User Goals:
As a Frequent User, I want to check to see if there are any newly items added to the store.
This is easily done by visiting the site and simply looking through the main page.
Further Testing:
The Website was tested on Google Chrome and Microsoft Edge.
The website was viewed on a variety of devices such as Desktop, Laptop nad Mobile.
A large amount of testing was done to ensure that all teh features were working correctly.
Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
GitHub Pages
The project was deployed to GitHub Pages using the following steps:
Log in to GitHub and locate the GitHub Repository.
Go to settings and change the branch to Master.
Once the project is running in GitPod I used the terminal to add my files to the Repository with teh command git add . .
Then the command git commit -m "Message" was used to commit the changes.
Then git push was used to push the changes to GitHub.
Credits
Code:
All code was written by the developer.
CDNJS:
CDNJS was used to search and find libraries.
Content:
All content was written by the developer.
Media:
All images were sourced via https://www.google.ie/
Acknowledgements:
My Mentor for continuous helpful feedback.
Tutor support at Code Institute for their support.