Sky's Bakery

Sky's Bakery is a website for an online based bakery that specialises in home delivery of cakes and other deserts. They are also available to cater events such as party's, weddings etc as well. This can include set up and take down but also, if desired, staffing the event as well!

Sky's bakery are very diverse and are happy to take on a challenge if you have a design in mind for the perfect cake! They can provide a quote and discuss how it will work and what the finished product will look like, you can be as specific or general as you like with the details, they'll work something out!

UX

This website is designed for customers wishing to order large quantities of baked goods for celebrations. This website makes it easy for customers to find what they are looking for. For example if they are new they can scroll through the entire page with each section giving a brief explanation of what Sky’s Bakery do and the menu that sticks to the top of the screen makes it easy for them to navigate back and forth between sections without having to scroll as well. There’s a simple list of prices, for the customer, making it easy for them to understand the basic rate a long with delivery costs, which are fixed for simplicity. But it is also clear and easy for them to contact Sky’s Bakery for their own personalised order to receive a no obligations quote.

For someone who is a returning customer it would be easy for them to navigate straight to the contact page if they wish to book in a delivery or retrieve a quote as there is a link to the contact page that is separate from the navigation to make the process quick and easy.

User type examples:

• As someone who is getting married soon, I would like to book someone to build the perfect weeding cake and deliver it to the venue on the day of the wedding. I have an idea in mind of how I would like it to look and wish to know if they can provide this and how much it would cost.

• In order for the above user type to achieve their goal they would need to contact Sky’s Bakery using the form or phone number provided in the contact section. They would need to include their idea and the date of their wedding. Sky’s Baker would then respond letting them know if they need more information or provide a quote if there is already enough and also to book in a tasting session if needed.

• I am an employer and am throwing a party for my staff. I would like there to be a range of desserts set up on a table with someone there to serve them so that things are kept tidy and the set up and take down is all sorted for me.

• In order for the above user type to achieve their goal, they would just need to choose which deserts they would like provided from the menu shown on the website and use the contact form or phone number to provide dates, location, number of people expected to attend and the chosen deserts. Skye’s Bakery will then get in touch with a no obligation quote and to confirm if they are available then the customer can either confirm or decline the booking from there.

• I am a parent throwing a party for my young child and would like a custom designed cake delivered at a certain time on the day of my child’s party in order to reduce the stress of this on the day.

• In order for the above user type to achieve their goal they would just need to use the contact form or phone number to let the Bakery know the address and design and they would provide a no obligation quote confirming if they are available.

I created an initial wireframe for the project using Lucid Chart which is linked here

Features

Existing Features

• Navigation Bar - allows users to jump between each section of the website quickly and easily by tapping on the section they want to see.
• Contact form - allows users to get in touch for a quote by simply filling out the form and providing their contact details for responses.
• Contact section - allows users to find out the address of the Bakery and also allows them to contact the bakery via other means such as email or phone calls by providing separate contact information.
• Footer, left - Allows users to download a pdf version of the menu and prices for the bakery by tapping on the link. This also includes the contact details on the pdf.
• Footer, right - Allows users to follow links to the bakery’s social media pages.
• Subscription section - Allows users to subscribe to the mailing list to receive regular emails from the bakery by tapping on the subscribe button and inputing their email address.

Features Left to Implement

• In the future I would like to include a gallery on the website of custom deserts that the bakery has made and events that they have catered to show what they can do. This would involve gaining permission from the customers first as well.
• I would also like to include a booking form that makes it easier to check availability and also, if the customer just want’s items off the existing menu delivered, a way to book this in automatically through the website. It would need to include a system that responds with a confirmation email to let the customer know the booking has gone through and a way to take payments online.

Technologies Used

• Bootstrap

  • The project uses bootstrap for the columns feature and to be able to provide a collapsable navigation menu when viewing the website on smaller screens. It also allowed the use of modals and other functions such as forms.

• Fontawesome

  • To allow the use of icons and social logos on the page.

• Google Fonts

  • To allow the use of a wider range of fonts.

• HTML

  • For the main elements

• CSS

  • To style the HTML

Testing

1. Contact form: When trying to submit the contact form, it will not allow you to submit it without entering a name, a valid email address and text in the query section. An error will pop up if all the fields aren't included and also if the email entered isn't in a valid format.
2. The 'Subscribe' modal: If you try submit this form empty or with an invalid email then an error message will pop up. It will only allow you to submit it with a valid email.
3. Navigation: Each link in the navigation menu takes you to the correct corresponding part of the site and the nav bar remains at the top of the page in each section. The nav bar also collapses correctly when the screen size is smaller with a button that expands it when pressed.

Screensizes and Devices:

• I tested my project to make sure it worked correctly and all text and features fit well on every device given using Chrome Developer Tools when viewing the site in a browser and also that it transitioned at appropriate points when changing the screensize gradually.
• I tested my site worked well on a range of browsers such as Chrome, Firefox and Safari as well as a range of laptops such as a MacBook Pro, Dell Inspiron 7537 and a ThinkVision 4K external screen.
• I tested my site on a range of mobile devices with different screen sizes including Moto G6 Play, Samsung s7, Samsung s8, iPhone 5s, iPhone 6 and Huawei y6.

Deployment

In order to deploy my website I navigated to my GitHub repository for the site. I clicked on settings in the top right, scrolled down to the GitHub Pages section and changed Source to Master Branch. This then created the link to the published website at https://tilly3g.github.io/BakeryWebsite/.

In order to deploy the website locally you need to go to the GitHub repository. You then need to click download and copy the link. Next go to your terminal, enter the directory you wish to clone it to using the cd command and then type git clone and paste in the link. You can then enter the website directory again using the cd command and ls will bring up a list of the files. These can then be opened in your choice of editor.

Credits

Content

• The code used for the full page background was copied from CSS-TRICKS, article ‘Perfect Full Page Background Image'.
• The code used to create the collapsing navbar on smaller screens was edited from Code Institute from the module 'User Centric Front End Design', part 'Bootstrapping Your Next Big Idea With Bootstrap 4'.
• The code used to create the menu with the prices next to the name of the cakes was edited from Code Institute from the module 'User Centric Front End Design', part 'Putting It All Together | Mini Project with Bootstrap 4'

Media

• The photos used in this site were obtained from flickr, flickr, Max Pixel and pxhere.

Acknowledgements

• I received inspiration for this project from my mum. She is an avid baker and the moment I told her I needed to build a website she instantly came up with the idea that it should be for a bakery! My friend also once had a small business delivering home made brownies to neighbours as well which gave me the idea to make it a delivery service.