The Regional Taste

We delivery a piece of your country taste at your door!

Live app link here

User Experience

User Stories

1. As a user, I would like to be able to …

   1.1 ... register using the name, email, username and password;

   1.2. ... login on website using my email/username and password;

   1.3 ... logout easily;

   1.4 ... have all information about website services on the landing page;

   1.5 ... see details about each available box;

   1.6 ... add boxes on my bag;

   1.7 ... check all available boxes and products;

   1.8 ... pay for my product using a Credit Card;

   1.9 ... add my shipping and billing address;

   1.10 ... get a confirmation email with my order and shipping details;

   1.11 ... create my profile

   1.12 ... check my previous order details on the profile page;

   1.13 ... subscribe the newsletter;

   1.14 ... unsubscribe the newsletter;

   1.14 ... select five products to add to my box;

   1.15 ... check user's review's on boxes;

   1.16 ... add a review on boxes;

   1.17 ... edit or delete my reviews on boxes.

2. As a site admin, I would like to be able to …

   2.1 ... have admin privileges and check the product management page;

   2.2 ... be present to a list of products to edit or delete;

   2.3 ... create products or add them to the boxes;

   2.4 ... o delete created products or boxes;

   2.5 ... the user to be redirected to a specific page if any error happens.

1. Strategy

• Project Goal

Create an e-commerce app that allows people (users) who lives out of their home countries or loves different cuisines to have access to a range of regional products from various part of the world.

2. Scope

• A simple, straightforward, intuitive UX experience;
• An explicit content;
• An easy navigation for the user through all the features;
• A site that is visually appealing on most devices.

Functional Scope

Flowchart

• Customer Flowchart

• Management Flowchart

DER - Diagram Entity Relationship

Agile Methodology

All functionality and development of this project were managed using Jira

• Credentials to this management tool will be provided during submission.

3. Structure

• A clear and straightforward layout is in place to ensure users can navigate intuitively and have a leisurely experience.
• Navbar is fixed on top to facilitate users easily navigating through pages. Small navigation is the same on all pages to ensure easy navigation.
• Footer is fixed on the bottom with links to social media and newsletter subscription.

4. Skeleton

Wireframes created with Balsamiq. The project was developed from initial wireframes, and some modifications were made during the development process to respond to user feedback and ensure the best usability.

• UI was changed during the project to ensure a better user experience.

Click to see wireframes (before UI changes):

HomePage
Register Page
Login Page
Reginal items Page
Bag Page
Payment Page
Order Placed Page
Site Map Page

5. Surface

• Colours

The Colour scheme was generated using the eyedropper plugin to get one colour from the logo image and colours to create the colour palette.

• Font Selection

Two complimentary fonts were chosen with Google Fonts to be used across the website.

The chosen fonts were Roboto for headings and navbar and Lato for links, buttons and paragraphs.

Business Model

• A traditional B2C (Business to Customer) application has been chosen, with a straightforward and user-friendly responsive interface.

• This online store offers regional products to the final customer. The customer can receive five standard products and five chosen products in each box.

Marketing

• This site has a Facebook Business Page with a link on the page footer. It can be viewed here

  Facebook page image is available here (SS from 15/02/2022)

  
  
  

• Users can subscribe to our newsletter to receive all offers in their email box. Subscription links are available on the footer on all pages.

• Upon registering, the user is redirected to a new page confirming their subscription. The site owner can now see the new subscriber on their audience dashboard, and new campaigns will be sent to them too.

Existing Features

Navbar

• Fixed Navbar allow the user easy access to all pages.

1. On the left side, How it works and Boxes links leads the user to these pages;

2. On the right side, Account and Cart buttons are available to the user;

2.1 Not logged user:

• Register and Login options are available

2.2 Admin logged user:

• Product Management, login, and Logout options available

2.2 Customer logged user:

• Login and Logout options available

2.3 Cart Button are available to all users and leads to the respective page

3. Collapsed navbar on smaller devices to wrap all options and assure better navbar design.

Footer

• Sticky footer present on all pages with a link to subscribe to the newsletter and social media links.

Homepage

1. Homepage jumbotron

• A brief explanation about the store with a button link to the products page

How it works

1. 3 steps images

• A brief explanation about how the store works

Boxes Page

1. Cards with all available boxes are present on this page with images, descriptions and prices.

2. Buttons are available on each card to lead the user to add the box directly to the cart or customize it

Boxes Details Page

1. A card with all box information are available to the user (box name, description, image, standard products, selectable products and price)

2. The user can customize the box by choosing five items from the checkbox list before adding the box to the cart. If the user doesn't customize the box, five surprise items will be added to their box on the cart page.

3. User's reviews are available on the bottom of the box card and can be viewed by all customers (logged or not)

4. A logged user can add a review about the box by clicking on Add Product Review button.

Shopping Cart Page

1. User can check all data about the boxes in the cart (box name, quantity, selected products, number of items and total price)

2. On the right side, an order summary is available with several items and the total price

3. Optional buttons can lead the user back to the box page or checkout

Checkout Page

1. Shipping address

• Users can add a shipping address and save it on the profile if they didn't do it before.
• user can add the same billing address just by checking the checkbox

2. Billing address

• users can add a billing address and save it on the profile if they didn't before.

• User can auto-complete billing address with a saved shipping address from profile

Confirm Order Page

1. All shipping and billing addresses are available to be confirmed by the user

2. If users want to change address user can come back to the last page and change it

Payment Page

1. Credit card only payments are available on this page

2. When payment is confirmed, user will receive an email about it.

Management Page

1. On his page, the admin user can find all options to add, edit or delete products, boxes and products on boxes, and check all sent newsletters or send a new one.

1.1 Send newsletter

• Admin users can send the newsletter to all users or choose some of them.

1.2 Newsletters sent

• Display a list of all sent newsletters

1.3 Add box, product and product on the box

• Admin users can add all products in the database from the frontend.

1.4 Box, product and product on box list to edit or delete

• Admin users can edit or delete all products in the database from the frontend.

1.5 Edit box, product and product on the box

• Admin users can edit all products info in the database from the frontend.

Future Features

1. Paginate Box, Products and Products on boxes list to show the admin user only 20 items per page;
2. Create a search feature to the management page to make it easier to find boxes, products and products on boxes;
3. Store all orders ins a JSON file to have all data even if boxes or products were deleted;
4. Create a wishlist in the user profile;
5. Display all users comments on the profile page;
6. Only allow users to comment on the product if they have already bought it.

Languages Used

Python 3.0

Frameworks, Libraries & Programs Used

• Balsamiq: Balsamiq was used to create the wireframes during the design process.
• Favicon Generator: Used to develop favicon used on the website.
• Font Awesome: Font Awesome was used on all pages to add icons for aesthetic and UX purposes.
• Grammarly: Used to correct any spell mistakes on readme and app text.
• 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 project's code after being pushed from Git.
• Google Fonts: Google fonts are used to add fonts for aesthetic and UX purposes.
• Django: Framework used to add structure to the platform.
• PGAdmin: Used to administer Database and generate DER.
• Multi Device Website Mockup Generator: Used to create mockup image.

Testing and Code validation

All testing and code validation details are described in a separate file called TESTING.md and can be found here.

Project Bugs and Solutions:

Deployment

This App is deployed using Heroku.

Credits

Media

• All pictures and images used in this project are from Depositphotos and Unsplash.

Work based on other code

JustDjango Youtube Channel - Used as a base to develop cart and checkout features
Dennis Ivy Youtube Channel- Used as a base to develop cart, checkout and confirmation email features
Master Code Online- Used as a base to develop newsletter app
Code With Stein- Used as a base to develop box reviews app

Acknowledgements

• Stack Overflow is a valuable resource for solving lots of issues.
• W3schools and Django documentation for general reference.

I would also like to thank:

• My husband Guilherme for all the support on stressful moments, helping to figure out lots of bugs and for reviewing everything.
• Code institute tutors and my CI Mentor Daisy Mcgirr for the guidance and help with several issues and bugs.