Project incomplete.
Poor implementation of time management due to getting married on 20th April. Unfortunately getting married and organising that along with honeymoon took priority.
Still to do:
- Website quiz for users with suggested products at completion
- Custom model for shoppers to give feedback and reviews on products
- Completion of README - testing, surface, technologies, features, credits
Portfolio Project Five: E-Commerce - Code Institute - Deadline 29th April 2022
This is my submission for Code Institute's (5P) Portfolio Project Five. It will be a progressive web application with the main purpose of providing and selling resusable and sustainable sanitary products. It will also provide a limited educational service to users, allowing them to learn more about the sustainable menstrual product industry and the impact of menstrual product waste on the environment. At the moment in the UK there is no online shop with the specific use of selling reusable menstrual products, there are plenty of shops that sell them along with other items (such as Amazon and eBay) but nothing that provides a one-stop-shop experience - I hope to fill this niche with the EcoMenses brand. An important reason that puts individuals off trying out reusable menstrual products is that they aren't sure which product is going to be right for them, I am going to try and combat this by providing users with an online questionnaire which will give the user recommendations for their sustainable menstrual product journey.
A live of the website can be found HERE [Insert responsive gif/image here]
As more people rely on accessing services online the role of UX design has become increasingly important in our digitized world. The five planes provide a conceptual framework for breaking down the task of designing experiences into component elements so that we can understand the problem as a whole. As this framework is structured, extensively used and consistently reliable, I have chosen to use the Five Planes method to design and implement my own website.
Menstruation is one of the most natural and healthy parts of life. In fact in many cultures the first period is celebrated. But menstrual taboos and period shaming have a massive impact on the products we use and how we dispose of them. With the result that they can affect our health, and end up in landfill, on beaches or polluting our oceans for decades. EcoMenses is a web-application providing users with the ability to search for and purchase reusable and sustainable sanitary products while learning about the impact non-sustainable products have on the environment. Currently, the main way to purchase these types of products as a resident in the United Kingdom is by using an online store such as Amazon or eBay, however these types of online stores are not specific which can sometimes make it difficult to find the product a user is looking for. There are also options of going onto brand-specific websites such as 'Hello cup' or 'Intinima' however these sites only stock products with their own specific branding, which usually have their own quirks and specific uses which may not cater for the needs of the user. By having a product/service specific online shop, this will give users the ability to browse a number of different brands all in one place, enabling them to make an informed decision about which product is best suited for them. Even in a country as vast as the United States, to my knowledge there is only one online shop that caters to the needs of the US population (period.shop) however this online store cannot deliver to the United Kingdom. According to Alpharma:
- The predicted number of people of menstruating age (12-55) is roughly 15 million in the United Kingdom.
- Around 22 sanitary items are used per menstrual cycle which equates to roughly 11,000 per lifetime.
- 4.3 billion menstrual sanitary items are used per year in the UK
Flushing pads and tampons down the toilet causes sewer blockages. Worse, many pads and tampons end up in the sea and washed up on beaches. It has been estimated that 1.5‐2 billion menstrual items are flushed down Britain’s toilets each year. The great majority of these products end up incinerated or in landfill. Figures from the Marine Conservation Society reveal that on average, 4.8 pieces of menstrual waste are found per 100 metres of beach cleaned. For every 100m of beach, that amounts to 4 pads, panty-liners and backing strips, along with at least one tampon and applicator. It is my hope that through the implementation of this online shop, it will educate and encourage people to convert to reusable sanitary products to reduce waste and the reduce environmental implications that non-sustainable products have.
- To provide a one-stop-shop for customers to purchase a range of reusable and sustainable sanitary products
- To educate users on the environmental implications that non-sustainable sanitary products have on the environment
- To provide a quick and easy way for users to determine which products may be best for them and their needs
- To provide a simple to use contact form for site visitors to use in order to contact the EcoMenses shop
- To be inclusive of all genders throughout the website and not be too 'woman-focused' in order to be sensitive and inclusive to other genders and those that are transitioning genders
- People who menstruate
- People who have a uterus
- People who are interested in environmentally friendly and sustainable products
- Anyone who is related to someone who menstruates (as this affects them too!)
- Anyone who wants to reduce their carbon footprint
- People who want to have an easy period and save money in the long run
As a shopper I can:
- View a list of products so that I can select some to purchase
- View individual product details so that I can identify the price, description, product rating, product image and available sizes
- Search for a product by name or description so that I can find a specific product I'd like to purchase
- View a specific category of product so that I can quickly find products I'm interested in without having to search through all products
- Sort multiple categories simultaneously so that I can find the best-priced or best-rated products accross broad categories, such as 'cups' or 'underwear'
- Sort the list of available products so that I can easily identify the best rated, best priced and categorically sorted products
- Easily see what I've searched for and the number of results so that I can quickly decide whether the product I want is available
- Easily select the size (if relevant) and quantity of a product when purchasing it
- Adjust the quantity of individual items in my bag so that I can easily make changes to my purchase before checkout
- View items in my bag to be purchased so that I can identify the total cost of my purchase and all items I will receive
- Easily view the total of my purchases at any time so that I can avoid spending too much
- Feel my personal and payment information is safe and secure so that I can confidently provide the needed information to make a purchase
- Easily enter my payment information so that I can check out quickly with no problems
- View an order confirmation after checkout so that I can verify that I haven't made any mistakes
- Receive an email confirmation after checking out so that I can keep the confirmation of what I have purchased for my records
As a site user I can:
- Easily register for an account so that I can Have a personal account and be able to view my profile
- Receive an email confirmation after registering so that I can Verify that my account registration was successful
- Easily log in or log out so that I can access my personal account information
- Easily recover my password in case I forgot it so that I can recover access to my account
- Have a personalised user profile so that I can view my personal order history and order confirmations, and save my payment and delivery information
- Learn about the environmental impact of non-sustainable sanitary products on the environment
- Be encouraged to purchase and trial reusable sanitary products to (in the long run) have a positive impact on the environment and save money
- Learn about the different reusable products on offer and find out which one(s) would be most suited to me and my needs
As a store owner I can:
- Add a product so that I can add new items to my store
- Edit/update a product so that I can change product prices, descriptions, images and other product criteria
- Delete a product so that I can remove items that are no longer for sale
| Opportunity/Feature | Feasibility/Viability (score out of 5) | Level of Importance (score out of 5) | In or out? |
|---|---|---|---|
| View a list of products so that I can select some to purchase | 5 | 5 | IN |
| View individual product details so that I can identify the price, description, product rating, product image and available sizes | 5 | 5 | IN |
| Search for a product by name or description so that I can find a specific product I'd like to purchase | 4 | 4 | IN |
| View a specific category of product so that I can quickly find products I'm interested in without having to search through all products | 4 | 3 | IN |
| Sort multiple categories simultaneously so that I can find the best-priced or best-rated products across broad categories, such as 'cups' or 'underwear' | 3 | 3 | IN |
| Sort the list of available products so that I can easily identify the best rated, best priced and categorically sorted products | 3 | 3 | IN |
| Easily see what I've searched for and the number of results so that I can quickly decide whether the product I want is available | 3 | 4 | IN |
| Easily select the size (if relevant) and quantity of a product when purchasing it | 2 | 4 | IN |
| Adjust the quantity of individual items in my bag so that I can easily make changes to my purchase before checkout | 3 | 2 | IN |
| View items in my bag to be purchased so that I can identify the total cost of my purchase and all items I will receive | 3 | 5 | IN |
| Easily view the total of my purchases at any time so that I can avoid spending too much | 3 | 5 | IN |
| Feel my personal and payment information is safe and secure so that I can confidently provide the needed information to make a purchase | 2 | 5 | IN |
| Easily enter my payment information so that I can check out quickly with no problems | 4 | 5 | IN |
| View an order confirmation after checkout so that I can verify that I haven't made any mistakes | 3 | 4 | IN |
| Receive an email confirmation after checking out so that I can keep the confirmation of what I have purchased for my records | 3 | 3 | IN |
| Easily register for an account so that I can Have a personal account and be able to view my profile | 2 | 4 | IN |
| Receive an email confirmation after registering so that I can Verify that my account registration was successful | 2 | 3 | IN |
| Easily log in or log out so that I can access my personal account information | 2 | 5 | IN |
| Easily recover my password in case I forgot it so that I can recover access to my account | 2 | 5 | IN |
| Have a personalised user profile so that I can view my personal order history and order confirmations, and save my payment and delivery information | 2 | 5 | IN |
| Learn about the environmental impact of non-sustainable sanitary products on the environment | 5 | 3 | IN |
| Be encouraged to purchase and trial reusable sanitary products to (in the long run) have a positive impact on the environment and save money | 5 | 3 | IN |
| Learn about the different reusable products on offer and find out which one(s) would be most suited to me and my needs | 4 | 4 | IN |
| Add a product so that I can add new items to my store | 3 | 5 | IN |
| Edit/update a product so that I can change product prices, descriptions, images and other product criteria | 2 | 4 | IN |
| Delete a product so that I can remove items that are no longer for sale | 2 | 4 | IN |
| Average Viability x number of features: 81 |
Sum of Importance: 105 |
EXPLAINATION OF TABLE HERE
The table above has been plotted into a graph (below) to easily visualise the features that will be implemented into the web application and which ones won't be:
- The features in the pink section will be implemented
- The features in the grey section could/should be implemented however I might find it difficult due to my own coding knowledge
- The features in the turquoise section will not be implemented as it would be unwise to focus on these features until a later date
As can be seen from the chart below, 50% of all of the features are in grey - this isn't great as these features are either less important or less viable due to my own coding knowledge. This shows that the project has potential for bugs and a large potential for scope creep. There are also no features that have been ommitted, again this isn't great as I may also be affected by time comstraints due to the size of the project and the amont of features that need to be implemented. The importace score is also much higher than the viability score, again, this isn't great because there are mupliple important features than need to be implemented yet I might not have the knowledge or skills to implement them.
ADVANTAGES/DISADVATAGES OF EITHER MMP OR MVP AND WHY WE ARE USING THE OPPOSING MODEL
By using the [INSERT MODEL HERE] model we will:
- FEATURE 1
- FEATURE 2
- FEATURE 3
- FEATURE 4
- MORE FEATURES...
LINEAR/NON-LINEAR?
On PAGENAME: FEATURES
On PAGENAME: FEATURES
On PAGENAME: FEATURES
The wireframes for the EcoMenses website application were made with Balsamiq, they can be found by viewing the images below.
As the trend for mobile browser usage has been on an upwards trend for the last 10 years in Europe culminating in a crossover of hardware usage in the recent years, it could be assumed that these trends will continue and result in users opting more and more for a mobile browser instead of a desktop. Due to this assumed continuing trend I have chosen to take a mobile-first approach to the design process. A Mobile-First Approach refers to the practice of designing and/or developing an online experience for mobile before designing for desktop web or any other device. Taking a Mobile First approach aims to reverse the workflow of designing for desktop and scaling down the design for mobile afterwards. Wireframes were made for mobile and desktop devices to ensure user friendly UX was employed throughout, I also included tablet wireframes to ensure responsiveness across all screen sizes.
The wireframes were created during the website application's initial desgin process, as such there are changes between the layout of the wireframes and the final layout/design of the finished website.
A live demo of the website can be found HERE
This project was created on GitHub and Edited in GitPod by carrying out the following:
- A new repository was created using 'Code-Instutute-Org/gitpod-full-template'
- A meaningful name was given to the new repository and 'Create Repository' was selected
- The repository was then opened on GitHub by clicking the 'Gitpod' button to build the GitPod workspace which would allow me to build and edit the code used to make the PROJECT NAME HERE website/application
- Version control was used throughout the project using the following commands in the terminal using Bash
- git add . OR git add "file name" - to stage the changes and get them ready for being committed to the local repo.
- git commit -m "Description of the update" - to save the change and commit the change to the local repo
- git push - to push all committed shanges to the GitHub repo associated with the GitPod workspace
- Create the gitpod repo from the template via the gitpod button in github.
- Log in to Heroku and create a new app.
- Add the postgres add-on
- Complete the config vars section
- Link Heroku and GitHub accounts together
- Select the repo (via Heroku) that I wanted to make an app of and give it a name in Heroku.
- Click on deploy.
- Log in to your GitHub account
- Navigate to the repository HERE
- Select the 'Fork' button in the top right corner of the page (under your account image)
- The repo has now been copied into your own repos and you can work on it in your chosen IDE
- If you have any suggestions to make regards to the code to make the site better, you can put in a pull request
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Ensure HTTPS is selected and click the clipboard on the right of the URL to copy it
- Open a new workspace in GitPod
- In the bash terminal type 'git clone [copy url here from step 4]'
- Press enter - the IDE will clone and download the repo
- You can then type 'python3 -m http.server' to host the website locally - this will not run the python file, only allow you to check how the web-app looks.
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Select 'Open with GitHub Desktop'
- If you haven't already installed GitHub desktop application - you will need to follow the relevant steps to do this
- The repo will then be copied locally onto your machine
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Select 'Download Zip'
- Once you have the Zip downloaded, open it with your prefered file decompression software
- You can then drag and drop the files from the folder into your chosen IDE or view/edit them on your local machine
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
This project was deployed via Heroku by carrying out the following:
There are many ways to deploy the project locally on your own device. The ways I will explain here are: Forking, Cloning, GitHub Desktop and Zip Exctraction, the steps in these processes are outlined below:
If you want to make changes to the repo without affecting it, you can make a copy of it by 'Forking' it. This will make sure that the original repo remains unchanged.