- Introduction
- UX
2.1 User Stories - Features and design
3.1. Models and functional design
3.2. Existing features
3.2.1. Sign up and Login
3.2.2. Landing page
3.2.3. Navigation
3.2.4. Footer
3.2.5. Browsing products
3.2.6. Product details and selection
3.2.7. Making a pruchase
3.2.8. Product reviews
3.2.9. Products management
3.2.10. Custom error pages
3.3. Features left to implement - Management via Django admin
- Marketing strategy
- Technologies
6.1. Languages used
6.2. Frameworks, libraries and programs used - Testing
- Deployment
- Credits
Green Bean is a slow fashion brand where a responsible attitude to the environment meets great design. Green Bean products are made with sustainability in mind using high-quality, recycled and responsibly sourced materials and designs that are truly unique. The brand targets young adults and adults located in the US, who are interested in the environment, slow fashion and ecology. The brand's page and e-commerce store is available here: https://green-bean-shop.onrender.com
The design of the site aims to follow best User Experience practices, focusing on easy browsing and a pleasant shopping experience. Considering the website is an e-commerce one, it is important it is visually appealing and that functionality and aesthetics are balanced correctly. The planning of the site involved creating wireframes to visualise the final look of the site.
The Colour scheme is kept simple with a mostly white or light background to emphasise products and their images while the typology reflects the artistic side of the brand.
The e-shop was developed using Agile methodology, with User Stories managed within a Github Project. All completed and outstanding User Stories can be viewed here.
The website data about the user, products, orders and all other relevant data are stored in a Postgres relationship database. The database model comprises of the following main tables:
Product model stores all the main information about the product and relates to the following supporting models: Type (type of product), Size, Color and Category. Type is required for each product and is used for their top level categorisation as well as in the generated SKU. All other supporting models are optional and can be left blank. This way the site owner has greater flexibility when adding new products and allows to easily scale up the product range, i.e. add new products that do not have different sizes or colours. Each of these supporting models also includes a slug for use in references within the code to prevent errors.
The rating model stores users' ratings and reviews for individual products. The user can choose a product rating between Poor (1) and Excellent (5) and leave a comment to help other shoppers make their decision about the purchase. The model links to User and Product models and the ratings are displayed along with the product information on the site (average and individual ratings).
Average rating on product pages
Order model stores information about an order placed by the users and the delivery address provided for the order. This way a purchase can be completed by shoppers who do not wish to sign up for an account, which significantly decreases the chance of the shoppers abandoning the purchase at this final stage.
OrderLineItem model on the other hand stores information about the purchased product and its details - ordered quantity, size, colour, and total price for that line item (product price x quantity). OrderLineItem also has a method that generates an SKU at the time of the order to be used to monitor stock levels and the demand for specific kinds of products.
UserProfile model stores information about the user and their default delivery address. The UserProfile gets created when the user registers to the website and the address is saved at the time of placing an order when the Save information box is ticked.
The components of each model and the relationships between them are represented in a graphic model representation available here.
The website offers an option for the users to create an account where they can view their previous orders and review history. They can register by clicking the account icon in the top right corner of the page and selecting Register. They are also prompted to register at the checkout and if they indicate a wish to leave a review for a product.
Clicking on Register redirects the site user to a sign-up page. Resgistration, just as Log in form, is delivered by Allauth Django app. The forms are fully validated for correct data input, and the Registration form asks to confirm the inserted password and email address for validation purposes. For security purposes, the registration process requires the provided e-mail to be verified by the user - on submission of the Registration form, the user receives an email with a link to verify their e-mail address. The site also allows users to reset their forgotten passwords.
Log in form
Registration form
Taking into consideration of the type of the site, the user needs to validate their email before they can fully register. After they submit a valid registration form (validated by Allauth) the user sees information about this next step.
They receive an email with a link taking them back to the site to confirm the email and complete registration.
All users are managed via the backend Django admin site by superadmin.
The landing page contains a blurb with information about the brand that sets out its purpose. The content was composed with the SEO in mind and features some of the keywords identified as valuable for the target audience. It also has a link to an outside source with information on slow fashion, which can be considered a source of authority.
The header is composed of two bars, the top bar shows the links to the social media and a user profile button with links to the Registration / Login or User Profile if they are already logged in. The main navigation bar takes care of the navigation through products according to their type and high-level grouping. Three of the menu items, T-shirts, Accessories and Special Offers are dropdowns with links to further groupings. The navigation bar also features a search bar and a shopping bag and a link to Manage Products functionality. The shopping bag has a badge showing the number of items that are currently in the shopping bag as well as the total price for all items added to the bag to allow the user to monitor how much they are about to spend. If the user is logged in, a bar showing their user name appears between the two elements described above.
Navigation:
Navigation on smaller devices:
The page footer is visible on scrolling to the bottom of the page to allow the shoppers to focus on products and contains links to Privacy and Returns and Refund policies.
The products page, showing all products, can be accessed by clicking Shop Now button on the landing page or All Products in the menu bar.
On the left-hand side on the top of the page, the user sees the information about the number of products showing at a given time as well as whether any filters or sorting has been applied. On the right-hand side, they can access various filtering and sorting options.
The products are shown as cards featuring the image if one is available or a default image if no image has been provided, product name, price and rating, as well as a list of available sizes and colours if applicable. The user can also add the product to their shopping bag directly from this page, by selecting the colour and size (if applicable) and then clicking Add to bag button.
The user can search products by keywords that can appear either in the product names or their descriptions directly from the search bar at the top of the page. The product titles and descriptions are composed with searchability in mind to help users find what they are looking for more easily.
When the user clicks on Fitler/Sort on the main products page, a pop up comes up, where they can filter products by size, colour and category as well as sort alphabetically and by price. Once the shopper is happy with their selection they can apply the filters or clear the filters.
Clicking on the product card takes the user to the product details page, where they view the product in more detail, read the product description, select the colour and size they wish to purchase and its quantity and add the item to the bag. The shoppers can then select a different size or colour and add this new selection to the bag as well as a separate item.
When clicked, the image opens in a separate browser tab, so that the user can have a closer look at the product.
The product page also contains suggestions of other products in the same categories that might be of interest to the user and has a list of previous reviews.
In order to make a purchase, the user needs to first select size and/or colour if these are options for the product they wish to purchase. To prevent errors, an option for each of these is already preselected (first option for colour and "M" for the size) and the user only needs to select another one if needed. Once these are selected, they can add the product to the bag. On adding the product to the bag, the user sees a pop up confirming that the item has been added to their shopping bag, and they can either close it and continue shopping or click on the button which directs them to the shopping cart.
The shopping bag can be accessed from the popup, by clicking Go to secure checkout or, if the pop-up was dismissed, by clicking the shopping bag icon.
The shopping bag contains information about the items currently appearing in the bag and allows the shopper to adjust the product quantity or remove items from the bag entirely. It also shows the user the price per product, the total for the order line, as well as the total order value and the delivery costs. If the order falls below the free delivery rate, the page will also show information about the amount the shopper will still need to spend to get free delivery.
The shopper also receives feedback on the change made to the order line, product that was changed and the updated status of the bag.
'Item removed' confirmation
'Quantity updated' confirmation
Clicking on the product image in the list takes the shopper back to the product details page.
When the shopper is happy to move on, they click on Secure checkout and are taken to a Checkout page to complete their purchase.
If the shopper is logged in and have a saved address the address in the checkout form is populated with the saved data. They can update it by checking the Save info checkbox. If the shopper is not logged in, he/she is prompted to log in or register for an account to save their information.
The checkout also contains links to the Privacy and Return and Refunds policies and a consent box to receive the brand's newsletter.
Once an order is complete the user is redirected to a page with order confirmation details.
The shopper also receives order confirmation via e-mail to the email they have provided during the purchase.
The website at present has a basic framework for product review, allowing the registered user to leave a review for any product. The review comprises of a star rating (from 1/Poor to 5/Excellent and comment, and is saved against the product as well as the user account.
At present, the user can access a review page from the product detail view. In the next feature update, the reviews will be restricted to products the shoppers purchased and they will receive an email with a request to leave a review. The reviews will also be monitored and will need to be approved by the site moderator before being published on the site.
The average product rview is shown as part of product details while individual reviews for each product appear at the bottom of the Product details page. By detault only 3 first reviews are shown and the rest can be expanded by clicking Show more... button.
Every registered user has a user profile, which can be accessed from the top banner menu, by clicking on the user account icon.
The profile page comprises of of 3 sections:
- The Default delivery address section features a button with a link to update profile page
Update address
- Your orders section listing the user's order history shows the last 5 orders and the rest can be viewed by clicking the View Older button.
- Your review hisory section shows only 5 latest ratings, since access to these is not crucial to the user.
Products can be managed from the Django admin site as well as from the front end. If the user is logged in with superuser rights, an extra button Manage products is available. The button takes the admin user to a page where they can edit, delete and add new products, product types categories, colours and sizes.
Main view
Expanded view
Editing and adding new products are managed on a separate page while editing and adding types, categories, colours and sizes in modals, which is easier and quicker considering the number of fields for these models. These elements can also be added directly from Add new product page, which makes it easier for the shop owner to manage their product database. One feature worth mentioning here is the presence of an image thumbnail in the Edit product form providing reference to the user of what they are editing.
Next to the elements that can have more than one element selected (which can be done using Shift or Ctrl/Cmd and click) the user also has access to Clear all button that clears all the selected product types, colours, categories and sizes. This button is also available in the Edit product template.
Add new product
Edit category - modal view
Add new category and clear all buttons within product add view.
Products and all other models can be also of course managed via django admin site. For brevity, this will not be discussed in detail here.
The site has custom 404 and 500 error pages with a button leading back to the Products page in case something goes wrong.
404 page
500 page
An e-commerce website is a complex application that requires constant development according to the users' needs. As such, there is still a lot of scope for improvement and additional features, some of which include:
- Allowing the users to filter products by more than just one colour, size or category.
- Build on reviews functionality:
- restrict the users to comment only on the products they've purchased and add a possibility to add additional comments to a given review or update it.
- add some sort of vetting process for reviews before they appear on the site
- Add a pre-publish status on products after they are added, to allow for product posting QC.
- Appropriate management for special offers and discounts and their presentation on the product pages. Discounts would be set up as a separate model and added to the product model as a foreign key.
- Add handling of registration for a newsletter on the Checkout page.
- Change layout of policies to home branding.
Considering the type of business Green Bean is as well as its target audience, the marketing strategy focuses on SEO, social media marketing and email marketing. Implementation of these three elements will help the brand grow organically and build a community and a loyal client base.
Keyword research was carried out following the process below:
- Jotted down a list of topics related to the site: t-shirts, slow fashion, design and sustainability
- Brainstormed to obtain a list of long and short-tail keywords related to the topics above. This exercise resulted in the following list:
t-shirts, quality t-shirts, clothing, jewellery, design t-shirts, unique t-shirts, unique jewellery and accessories, slow fashion, sustainable fashion, recycled clothing, great t-shirts, cool t-shirts, buy sustainable clothing, t-shirts for a gift, custom t-shirts, unique t-shirts us - Researched the list created in point 2 using Google Search to expand/refine it. This resulted in the addition of a couple of new terms and the following list:
good quality t-shirts, high quality t-shirts, quality t-shirts, design t-shirts, unique jewellery and accessories, slow fashion, sustainable fashion, recycled clothing, unique graphic t-shirts, buy sustainable products, unique t-shirts us, buy recycled t-shirts online, buy recycled clothes online, best ethical t-shirts us - Assessed whether the selected keywords are relevant and have authority using wordtracker.com, which resulted in the final list composed of:
good quality t-shirts, high quality t-shirts, unique design t-shirts, unique graphic t-shirts, unique design jewellery and accessories, slow fashion, sustainable fashion, recycled clothing, cool sustainable t-shirts, buy sustainable clothing, sustainable clothing us, ethical clothing, ethical fashion, eco-friendly clothing, sustainable brand, buy sustainable products, buy eco-friendly t-shirts online, buy recycled clothes
Considering the type and purpose of the site the implementation of SEO focuses on the meta tag, where all the above keywords have been placed, the text on the landing page, the product descriptions which are construed keeping in mind the results of the keyword search and the use of html elements to make them more prominent to the search engines, and product images and their alt-elements, which are mostly automatically generated and match the product name. Keywords are also used in aria elements whenever possible.
The links to the external sites (Good on You, social media sites) have been set as noopeners prioritising the site's security over SEO.
The site also includes sitemap.html and robot.txt files.
Social media strategy sets out to create and manage social accounts on Instagram and Facebook, where the shoppers can engage with the brand, post reviews and share interesting information about 'Slow fashion.' The Facebook page has been set up for the brand where news will be posted regularly to keep the audience engage and informed about the brand's activities. There is a plan to run discussion groups around the topics of slow fashion, environement and sustainability.
Newsletters with the news on the brand's activities in the area of 'slow fashion' and its involvement with various organisations operating in the area of sustainability, as well as news about the new products launched are also an important part of marketing for the site. The newsletters and subscription lists are managed in Mailchimp via forms embedded in the site allowing users to easily register their interest in receiving the newsletter, irrespective of whether they have a Green Bean account.
The subscriptions are managed in two ways. Firstly, after 5 seconds from entering the site, a Subscribe to our newsletter appears.
Secondly, as a backup since once dismiss the pop up will not appear again until the browser data is cleared, the site also features an embeded sign up form which can be accessed by clicking a 'SUBSCRIBE' button placed on every page of the site.
Another place where the shopper can register for the newsletter is the Checkout page, however, this feature is still under development.
Green Bean abides by the GDPR and has a Privacy Policy that states the purposes for which the user's data will be used. The link to the Policy is placed in the footer of the page as well as
Programming languages used in the project:
- HTML and CSS3
- Python
- JavaScript and JQuery
- Django: main application framework
- Bootstrap: CSS styling
- GitPod: primary code editor
- Git: for version control
- Git Hub: to store project files
- Python Tutor: used to help with debugging
- darw.io: to create the data model and program logic flow chart
- Balsamiq: for wireframes
- Cloudinary: to store image files uploaded by the user
- PostgreSQL Database: serving as main database
- Coverage: create reporting on level of tests
- AllAuth: user management
- widget_tweaks and crispy froms: used to format forms
- django-bootstrap-modal-forms: used to manage deletions, additions and edits to product and its supporting models
- Heroku: used to deploy the live version of the project
- Beautify: VSCode extension to format code
The error handling is currently mostly handled by the inbuilt functionality of class-based views as well as some if-statement based checks within these. Going forward, the application will be using a more robust approach using a set of custom error classes.
Information about the application testing is available in a separate file here.
The program was deployed to Heroku at the start of the project to ensure its correct functioning and is accessible here:
The steps taken to deploy the app:
- Updated the contents of the requirements file using the
pip3 freeze > requirements.txtcommand in VS Code. - Checked the project structure and run the program to ensure everything is working as expected.
- Created the Green Bean project on Heroku, giving it the name 'green-bean-shop'.
- Added a new Postgres database:
- In the Resources tab, searched for Heroku Postgres add-in and selected the free Hobby Dev option.
- In the Config Vars section of the Settings tab, added the environment variables to set up:
- Link to Postgres database
- Link to Cloudinary
- Disabled static files for the time of development
- App secret key
- In the Deployment tab:
- selected GitHub as the deployment method,
- selected Connect,
- authorised Heroku to access the GitHub account,
- searched for 'green-bean-shop' repository and confirmed the connection.
- First time deployed the app using the manual Deploy Branch button, then enabled automatic deploys.
- After the first deployment, added variables for email and set debug setting to FALSE in the deployed environment.
The website was built using Python3.8. All other requirements are contained in the requirements.txt file.
The application was built following the Code Institute's Boutique Ado walkthrough project - thank you to CI for providing the basis!
In addition, a great thank you to:
- My mentor, Caleb Mbakwe, for invaluable advice on the best approach to the project, organisation of code, and support throughout.
- CI tutors, especially Gemma, for helping to search for sources of bugs and fixing them.
- Stackoverflow community and those behind running it for making it possible to solve almost any problem.
- Creators of Django and Heroku documentation as well as authors of all the plugins and libraries used in this application.
- Artists posting their pictures on Pexels for the great pictures!
- Phillip for help with the images and sharing some of his designs.