This is the presentation website for a new online service that is aiming to deliver high-quality meat products for families across Ireland, based on a monthly or yearly subscription. Butcher's Bundle is an educational project that serves as the Milestone Project 1 for the Full-Stack Software Developer programme powered by Code Institute.

• Demo
• Introduction
• UX
  • Business Goals
  • Customer Goals
  • User Stories
  • Scope
  • Structure
  • Skeleton
    • Wireframes
  • Design Choices
• Features
• Technologies Used
• Testing
• Deployment
• Credits
• Acknowledgements

Live Website

• Delivery of high-quality meat products to members across Ireland.
• Product delivery directly to the user’s door once a month, based on a monthly/yearly subscription.
• Raising awareness on the physical/mental/environmental benefits of the consumption of pastured, grass-fed, organic meats.
• Promote safe sourcing, working with trusted partners and fair labor practices.

• Access to high-quality, affordable products that are essential to good health.
• The facility of shopping online for fresh/frozen food.
• A wide range of products to choose from.
• Detailed information about each product.
• A professional website with a mobile-first approach.

1. "As a first time visitor, I want to navigate through your website to find content and information efficiently."
2. "As a first time visitor, I want to easily understand the purpose and quality of your services."
3. "As a returning visitor, I want to find the price range of your services, so I can quickly decide if it fits my budget."
4. "As a potential client, I want to be able to sign up for the newsletter in order to receive relevant news and offers."
5. "As a potential client, I want to follow your social media accounts in order to join the community."
6. "As a potential client, I want to find reviews from past clients regarding your products and services."
7. "As an interested client, I want the transaction process to run smooth and quickly."
8. "As an interested client, I want to be able to get in touch with customer support."
9. "As a frequent visitor, I want to be able to access your website across a range of devices."

• Functional requirements:

  • option to join online/choose a plan/make payments;
  • option to easily explore the product range;
  • option to sign up to newsletter;
  • fixed navigation bar to facilitate the user's experience across the website;

• Content requirements:

  • catchy and compelling content that clearly communicate the business practices and ideals;
  • content spreadability for easier scanning;
  • mixed media content to make the concepts easy to understand;
  • various call to actions;
  • customer support via telephone line/e-mail;
  • customer reviews;

The website was designed to be intuitive, learnable and consistent.

• Interaction design
  • The interface responds to the user actions as expected. The scroll/swipe functional behaviour is standard and the buttons respond instantly when actioned
  • Subtle visual feedback was added throughout the website(on hover, focus and action of buttons and fields) in order to increase the user's sense of interaction
• Information architecture
  • The content is organised in order of importance, from top to bottom
  • Structurally, for diversity, the content is presented in various ways across the website

• Wireframes
  • Mobile
  • Tablet
  • Desktop

• Colors
  • The color palette subtly emphasizes the powerful contrast between the seriousness of the neutral colors and the cheerfulness of the two shades of orange, all in attemp to communicate the concept behind our service and products: thoughtful and unrefined.

• Typography

  • Two fonts were used for this project, both with a serif fallback. They were meant to inspire elegance and honesty:
    • Inter was used as a general font.
    • Hachi Maru Pop was used in the Explore Section for its playfulness.

• Media

  • The hero image displays our product and the immediate hero CTA presents our service.
  • All the other images used throughout the website are relative to our service or products.
  • All images have been resized and compressed in order to boost the UX flow.

• Iconography

  • Icons have been used throughout the website to improve the efficiency of UX.

The website's features are presented in order of importance.

• Navigation Bar

Allows the user to navigate through the page. Because the website consists of a single landing page, the navigation bar will be visible at all times.

• Full width CTA (Call to Action)

It helps the user understand the purpose of the website at a first glance. It allows the business to sell its product and the user to find relatable information right away. The height of the CTA is 80% which invites the user to navigate further down the page.

• Choose Your Plan Modal Forms

Allows the user to claim offers and join the community.

• Service Features Section

Presents the main features of the service presented. Being of equal importance, they are presented in line, followed by one more CTA button right beneath them.

• Business Model Section

Information on how to obtain the product, details about the business idea and how the user can go about joining the service.

• Slideshow Photo Gallery Section

Presentation of the whole range of products available which helps the user understand more about the products available.

• Review Section

Newcomers can learn about past users experiences.

• Footer

Provides contact details and an invitation for the user to sign up for the newsletter. Allows users to explore social networks by accessing the social icons.

• Accesibility

All images come with descriptive text. The website is optimised for screen readers and allows users with impaired vision to zoom in/out anytime.

• Features left to implement

Modal forms to instantly send relevant e-mails to users when they submit for service plan or newsletter.

• Workspace

  • Gitpod was used as an online Integrated Development Environment

• Languages

  • HTML5
  • CSS3

• Frameworks & Libraries

  • Bootstrap4 was used for its incredible responsiveness and styling templates
  • Font Awesome icons were used to improve aesthetics and UX
  • Google Fonts was also used to enhance the user experience

• Version Control

  • Github for repository hosting

• Wireframes

  • Balsamiq for creating the wireframes

• Media

  • ConvertIco for converting the logo format from .png to .ico
  • Coolors was used as a tool to establish the color palette
  • Photopea was used to edit images
  • Adobe Photoshop Express for resizing images

• Click here for the full testing process.

• Encountered Issues
• User Stories
• Functionality: broken links
• Functionality: browser back/forward
• Functionality: form validation
• Compatibility: Responsiveness
• Compatibility: System-cross
• Compatibility: Platform-cross
• Compatibility: Browser-cross
• Performance
• Accessibility
• HTML Validation
• CSS Validation
• Overflow
• Spelling

• GitHub Pages

  The project is hosted by GitHub Pages. To deploy it, follow the steps:

  1. Log in to GitHub and locate the Milestone-Project-1 Repository.
  2. At the top of the Repository, click on the "Settings" Button on the menu.
  3. Scroll down the Settings page and find the "GitHub Pages" Section.
  4. Under "Source", click on the dropdown called "None" and select "main" branch.
  5. The page will automatically refresh.
  6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

• To fork the GitHub Repository

  By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:

  1. Log in to GitHub and locate the Milestone-Project-1 Repository.
  2. At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
  3. You should now have a copy of the original repository in your GitHub account.

• To make a Local Clone

  1. Log in to GitHub and locate the Milestone-Project-1 Repository.
  2. At the top of the Repository just above the list of files, locate and click the "Code" dropdown.
  3. To clone the repository using HTTPS, under "Clone", make sure "HTTPS" is selected and copy the link.
  4. Open Git Bash.
  5. Change the current working directory to the location where you want the cloned directory to be made.
  6. Type git clone, and then paste the URL you copied in Step 3.

  $ git clone https://github.com/alexandruvalentin/Milestone-Project-1.git
  

  7. Press Enter. Your local clone will be created.

  Click Here to find more details about the above process.

• Content

  • ButcherBox.com as a general inspiration.

• Media

  • ConvertIco for converting logo format(.png to .ico).
  • Unsplash and Shutterstock for all photos shown on website except for the logo.
  • Adobe Photoshop for adding the brand logo on the box of the third image of the How It Works section.
  • Coolors for generating the color palette.

• Code

  • Stack Overflow as a general source.
  • W3Schools as a general source.
  • CSS-Tricks as a general source.
  • Matt Rudge of Code Institute for the opaque-overlay of the hero image.

• My mentor: Precious Ijege for continuous and helpful feedback throughout the project.
• The Slack community of Code Institute for feedback.
• Peer student: Paul Istratoaie for helpful feedback throughout the coding process and for helping with device testing.
• My friend and graphic designer Bala Cosmin for creating the brand logo.