Cafe Java is a local coffee shop which is unable to operate smoothly due to the Global Pandemic (Covid). The cofee shop was only able to accept walk in customers, which under current safety regulations are seen as not safe and more importantly it has seen an increase in revenu loses. As a team, we have build a website to enable Cafe Java customers to make their orders online in advance of their visit to the shop with the aim to save the business from collapsing.

Contents

• Logo
  • Contents
  • UX (User Experience)
  • Project Goals
  • User Goals
  • User Stories
  • Site Owner Goals
  • User Requirements and Expectations
  • Design Choices
  • Fonts
  • Colours
  • Wireframes
  • Technologies
  • Languages
  • Libraries
  • Tools
  • Features
  • Features Implemented
  • Future Features
  • Testing
  • Bugs
  • Deployment
  • Running BI-Team-5 Locally
  • Credits
  • Images
  • Colour
  • Image editing
  • Acknowledgements

Table of contents generated with markdown-toc

UX (User Experience)

Project Goals

The goal of this project is to build a website which allows a local coffee shop to better manage their business, minimise revenue loses and comply with social distancing requirements due to the Global Covid-19 pandemic.

The features on the website will:

• Give customers more ways to interact with the shop (online bookings, social media, phone, email)
• Enable the business to better manager the flow of customers through their premises and ensure safe conditions for all.

We achieve this by:

• Providing an option to the customers to make their to-go orders online.
• Prividing an option to the customers to book a table to prevent instances where the cafe it at full capacity and social distancing is not maintained.

User Goals

• Book a table in the coffee shop for a specific time.
• Order a coffee online for collection.
• Link to the coffee shop social media sites.

User Stories

• As a user, I want to see a menu for the coffee shop.
• As a user, I want to know where the coffee shop is located on a map.
• As a user, I want to be able to book a table online for a chosen time slot to have coffee in the coffee shop.
• As a user, I want to order my coffee online to takeaway.
• As a user, I can enter my contact details to secure my booking.

***Please note, all of the sections in both booking forms are mandatory

• As a user, I can place an order for my coffee in advance of my visit.
• As a user, I can get a notification my order is placed and a confirmation message reciting the order is displayed on a new webpage.
• As a user, I can contact the shop for any order problems using their social media channels, call them or email.

Site Owner Goals

• As a site owner, I want to create an interactive website allowing the user to look at the menu, book a table at the coffee shop or order a coffee to go.
• As a site owner, I want the user to be able to see a location of the coffee shop on the google maps.
• As a site owner, I want my users to be able to connect with the owner via social media channels.

User Requirements and Expectations

• Header, Main body devided into section and Footer.

• In the Header we should see a Logo and a navigation bar on the left side with option to go to:

  • Home section (top of the site)
  • Menu section
  • Booking section
  • Contact us section

• On the right side of the Header you should see additional Book here! button that should take you straight to the booking section.

• In the Main body we should see:

  • Welcome section with a welcome message.
  • Menu displaying a carousel with drinks order choices.
  • Booking forms (both drink in/take away).
  • Contact us section displaying google maps with the coffee shop location.

• In the Footer You should see self-explanatory icons allowing the user to connect them with the shop's social media channels.

Design Choices

Fonts

We have chosen Josefin for all of the headers and Raleway the rest of the text. We have used a Caveat font for the logo and headlines throughout the site.

Colours

We have chosen the colour that say "coffee now please!", applealing to the eye and also compliments the design of the project.

• Grullo (AF9483) - Light soft brown
• Umber (615550) - Dark bronw
• Albaster (F0EDE5) - Off white

These coulours will compliment each other well when used accross the site creating pleasant ambience.

Wireframes

We designed our site moc-ups using balsamiq wireframes. We were focusing on defining basic layout structure of the site and identifying how displays would change on different screen sizes such as mobile, tablet and desktop.

Technologies

Languages

• HTML
• CSS
• JavaScript

Libraries

• jQuery
• Popper
• Bootstrap
• Hover CSS

Tools

• Git
• GitHub
• Visual Studio Code
• Font-Awesome
• Google fonts
• Color editor
• Image editor
• Favicons
• Google maps API

Features

Features Implemented

• Responsive design
• User friendly display
• Navbar with easy navigation
• Functional booking form
• Google maps API for location services
• Social media links

Future Features

• User accounts to store personal details securely;
  • GDPR: Privacy and cookie policy statements.
  • Sign up for marketing emails and special offers.
• Include a shopping cart facility;
  • Use discount voucher codes in the shopping cart.
• Bookmark the site quickly and easily to encourage repeat visitors;
• The user should be able to get directions to the coffee shop from where they are located.

Testing

• Testing information can be found in a separate testing.md file.

Bugs

For every bug we found while in development process, we have loged an incident report. Bug we have managed to fix are now marked as closed.

Deployment

The website was developed using both GitPod and Visual Studio Code and using Git pushed to GitHub, which hosts the repository. I made the following steps to deploy the site using GitHub Pages:

• Opened up GitHub in the browser.
• Signed in with my username and password.
• Selected my repositories.
• Navigated to AlexNexton/BI-Team-5.
• In the top navigation clicked settings.
• Scrolled down to the GitHub Pages area.
• Selected Master Branch from the Source dropdown menu.
• Clicked to confirm my selection.
• BI-Team-5 is now live on GitHub Pages.

Running BI-Team-5 Locally

Cloning BI-Team-5 from GitHub:

• Navigate to AlexNexton/BI-Team-5.
• Click the green Clone or Download button.
• Copy the url in the dropdown box.
• Using your favourite IDE open up your preferred terminal.
• Navigate to your desired file location.

Copy the following code and input it into your terminal to clone BI-Team-5:

git clone https://github.com/AlexNexton.BI-Team-5

Credits

Images

You can find the images used for the site here. We have sourced them through various websites, which are free to use:

• Pikrepo
• Unsplash

Colour

We have identified the colour palette on W3.

Image editing

• We have used snippet tool for capturing screengrabs which we have saved as images.
• A handy Birme site allowed us to resise the images all at once.

Acknowledgements

• W3Schools for just being a constant source of help and inspiration!
• Bootstrap Carousel with Controls code.
• Bootstrap Borderless Table code.
• Stack overflow for help with removing the carousel auto-slide in Bootstrap.
• San Francisco State Univerity PMO Resources webpage where the original UAT Training Plan document was sourced
• Blog usersnap.com which was the inspiration for the modified UAT Testing document and wording.