- Table Of Contents
- User Experience Design - UX
- Technologies
- Resources
- Implementation
- Testing
- Project Barriers and Solutions
- Deployment
- Credits
- Acknowledgements
The business is a bakery shop called Hansel's Bakery established 1 year ago, in that time they have provided customers with world class service and the products they produce all with high quality ingredients and beautiful design to indulge customers and empower them to have their best moments in life sharing with their friends and family.
This section is where we have established user stories to identify website functionality. The initiative is to build a website that will promote their shop, bring convenience to customers and visitors by letting them order online, get their business known to a bigger audience.
-
User Stories
-
As a First Time User, I want to be presented with a well structured and designed website, so I can intuitively navigate through the website and access the information I seek.
-
As a First Time User, I want to be able to get back to the home page quickly and easily, so I don't waste time on going back and forth for what I need.
-
As a First Time User, I want to be able to see pictures of all the products are sold by the shop, so I can browse through it and choose the one that most catches my attention.
-
As a First Time User, I want to know in a glance what the website is about and why I should make a purchase, so I can make an informed decision whether to buy or not.
-
As a First Time User, I want to know prices for all products, so I can know if my budget is sufficient to purchase it.
-
As a First Time User, I want to be able to order cakes to be delivered to my home, so I can save time by having the convenience of home delivery.
-
As a First Time User, I want to have special occasion section, so cakes can be bespoke based on my needs.
-
As a First Time User, I want to change the website colour, so if I am colour blind the website will be more accessible.
-
As a First Time User, I want to see reviews about their products, so I can understand what others think about the company.
-
As a Returning User, I want to have a section where I can see their social media links, so I can follow them to get new updates.
-
As a Returning User, I want to have a section where I can contact the Bakery, when I have questions about the company.
-
As a Returning User, I want to easily login to my account, so I can make a purchase.
-
As a Frequent User, I want to have a section where I can sign up for newsletter, so I can get the latest offers and news about the shop.
-
As a Frequent User, I want a booking a table, so I can reserve ahead of time in case its busy.
-
-
Functional Specifications
- The functional specification will be based on the assessment criteria and user stories.
-
Content Requirements
The content required to bring value are the following:
-
The written content has to be concise and to the point, relevant to the section of the website. It has to follow the same typography to maintain consistency throughout the website.
-
The imagery has to be consistent throughout the website in terms of colours and sizes.
-
The colours has to be consistent with the logo colours to bring a theme based to the visitors.
-
The typography will have consistency between written content and logo. It is important that the website will have one typography for the logo and one for the content.
-
The logo has to bring set the tone for the look and feel of the website so that the other parts can follow it nicely.
-
All information to have the right amount of contrast between foreground and background to avoid distractions.
-
I have designed the structure and skeleton using Balsamiq to layout how I would implement sections of the website. I have started by doing a sitemap of how I would structure the website, following that I have laid out all the wireframes using low fidelity wireframing.
-
Sitemap
- Sitemap for website - view
-
Wireframe Stage
-
Home Page Wireframe - view
-
Menu Page Wireframe - view
-
Bookings Page Wireframe - view
-
Gallery Page Wireframe - view
-
Our Story Page Wireframe - view
-
Contact Page Wireframe - view
-
Signup Newsletter Page Wireframe - view
-
Customer Service Page Wireframe - view
-
Product Information Wireframe - view
-
Privacy and GDPR Policy Wireframe - view
-
At this stage I have chosen the Colours, Typography, Logo and Images.
-
Design Choices
-
Colours - you can view my colour palette here. The palette was created based on the logo.
-
Typography - I will use Playflair Display (Medium Metallic) for the Logo and Montserrat (Regular) for the content from Google Fonts.
-
Images - I will use Pixabay and Pexels to source the images.
-
Logo - I used Canva to design logo and favicon. You can view this under Resources in this document.
-
Icons - I will be using Font Awesome for icons needed for the website.
-
-
Mockup Stage
-
Below you will see all the pages using high fidelity software Figma. I decided to use Figma to plot the website so that the look and feel gets as close as possible to the real implementation before I start any code. The main reason behind this is much easier for me to change things at design stage than at coding stage, as well as it would get close to the end product.
-
This is the final mockup for the whole website. Once the prototype is loaded you can navigate through the links in the pages - view
-
This section is for technologies used in this website. I explain how I used them and a brief description of each.
-
CSS
- I have used CSS to create custom styles to fit the purpose of my design plan. This has been used as a requirement of this project to describe HTML elements how to be styled and structured. By using the Bootstrap Framework, it reduces dramatically the amount of CSS being used in the project.
-
HTML
- HTML was also a requirement for this project and it was used for the semantic side to give the bare bones of the pages.
-
jQuery
- I have used jQuery where I could not use CSS and HTML to achieve a particular feature or to reduce amounts of coding or even to structure the project better.
-
Javascript
- jQuery is a library built to write less and do more from Javascript. It is a programming language that allows us to implement more complex pages and features.
-
CDN
- I have used the CDN from imagekit to store my images. This is called content delivery network (CDN) which are servers that are geographically distributed around the world to deliver fast internet content by serving from the server closest to the user.
-
Gitpod
- This is a platform that I have used to write my code. It is and IDE based on VS Code essentially a Software as a Service (SaaS) that gives opportunity to share code, it integrates github, easily test code. It has its drawbacks but for the scope of this project it was more than sufficient.
-
Github
- I have used github to create the repository for this project and have constantly saved my code through commits locally and then pushed to remote server from github, it uses Git as the version control. The great about using it is that in a way it creates versions of the work done as it is being committed, if something breaks or go terribly wrong it is possible to load the latest working version. Fortunately I have not had critical problems.
-
Git
- I have used Git as my version control, through the project I have made several commits whenever I made changes to the code. I recognise that I could have made more commits but I got carried with coding at times and not committed in sections where I should have done. This is something I am working on to improve from next project.
-
Web Development Tools
- I have used this tool to help me with debugging issues that I had during implementation. In addition, by using the inspection mode I could see how responsive the feature was after coding it.
-
W3C Validation
- I have used the W3C validador to check on my CSS and HTML to check if it complies with standards, please refer to the Testing section for more details.
-
Am I Responsive?
- This is a website that provides an online tool to check website responsiveness to different screen sizes. Please, refer to the Testing section for more details.
-
Responsive Website Checker
- This tool in conjunction with Am I Responsive were used for responsive testing.
-
Pexels, Unsplash and Pixabay
-
Font Awesome & Iconify
- I had initially not planned to use Iconify but during the mockup stage I have used Iconify for it and for some icons during implementation. In addition, Font Awesome was also used for most of the icons.
-
Canva
- I have used canva to design some iterations of the logo which you can view them here.
-
StackEdit
- I have come across this small website called StackEdit where it makes editing of markdown content easily by having a split window where you write your markdown and to visualise updates as you change it.
-
Boostrap
- I have used bootstrap documentation, extensively through out this project, so this piece of resource has been crucial to it. Please, check implementation section in this document for more details.
-
jQuery
- I have used jQuery documentation to remind myself how some of these functions work on this framework.
-
Javascript
- I have also used javascript documentation as a refresher and reference.
-
HTML
- I have also referenced to the HTML documentation during implementation as a refresher.
-
CSS
- I have referred to the CSS documentation during this project.
-
ImageKit
- This resource was used to store all images and video for faster loading.
-
Timepicker.js
- I have used this library to implement the time picker for this project.
-
Datepicker.js
- I have used this library to implement the time picker for this project.
-
Auto CSS Prefixer
- I have used auto-prefixer in this project to enhance compatibility with browsers, it can be found here.
-
Auto Minifier
- I have used this website to minify my CSS and JS to improve loading times. I have preserved the un-minified versions. The auto minifier can be found here.
I have coded the HTML side of the project by starting from the home page. The first section was the header, once I was happy with that section I moved on to the next section. During implementation I took some decisions that I believed it would contribute to a better user experience.
-
Modals
- I have decided that instead of loading the user with dedicated pages for Product Information, Join Us, Privacy Policy, Product Information, Testimonials and Customer Service, I chose to load them as modals. By doing this it would avoid reaching server to load them saving loading times and seamless user experience.
-
Components
-
In addition to the modals, later in the project I have realised that by using bootstrap framework HTML code can quickly build up and get long and at times difficult to debug and read. So I took the decision to split my code in components at least to some parts where code were being repeated. As I have some background in coding I was able to implement all modals, header and footer were this way which made things easier to read.
-
In the components folder you will find 3 sub-folders Header, Footer and Modals. These will contain header code, footer code, and modals code respectively. To load these components I used jQuery by using their APIs. The section which repeated a lot across all pages was the header and footer, by doing this it saved quite a bit of repeated code.
-
-
Loading Components and Code Organization
- This was not a requirement for this project but knowing and used javascript before I found it would make the readability of the code much better by splitting at least parts of my code and load them when required. Also, it allowed me to implement some of the features and modals that brings a better user experience, such as, displaying the user with a spinner to simulate server side request and then displaying the user with a modal message acknowledging that their booking is confirmed.
-
Datepicker
- I have used a javascript library for the datepicker in the booking page, when user clicks on the input a calendar is displayed to the user so the user can select a date for their booking. In addition, I have set the calendar to only display 1 month of available dates ahead and user cannot book for the same day that they are requesting their booking. I have chosen to do it this way so that user does not book too much ahead of time and that tables are not booked for the same day because of space restrictions of the use case used in this project. Also, I have initially tried to implement date picker from bootstrap but because of customisation issues and deprecated code I decided to change.
-
Timepicker
- Also, I used a library to implement time picker and this was set for one hour timepicker intervals from 10am to 8pm. This is to give groups of people roughly one hour especially for busy periods when time is crucial. I have initially tried to implement time picker from bootstrap but because of customisation issues and deprecated code I decided to change.
-
As a First Time User, I want to be presented with a well structured and designed website, so I can intuitively navigate through the website and access the information I seek.
- This has been achieved by having a navigation menu where users can navigate through 6 pages. Home Page, Menu Page, Bookings Page, Gallery Page, About Page and Contact Page. All sections are easy and simple to understand. I have tested all links to make sure navigation are 100%.
-
As a First Time User, I want to be able to get back to the home page quickly and easily, so I don't waste time on going back and forth for what I need.
- This has been achieved by having the menu navigation in the header, a sitemap in the footer and also a back to top button. I have tested all three features and all were working fine.
-
As a First Time User, I want to be able to see pictures of all the products are sold by the shop, so I can browse through it and choose the one that most catches my attention.
- This has been achieved by having the gallery page. I have tested that all images are loaded correctly and all modals are opening correctly upon clicking on a cake from the gallery.
-
As a First Time User, I want to know in a glance what the website is about and why I should make a purchase, so I can make an informed decision whether to buy or not.
- To achieve this I have created an about page where user can find out more about the bakery, the bakery logo is a giver to what we provide, plus the carousel as well. All these have been tested and all are functioning correctly.
-
As a First Time User, I want to know prices for all products, so I can know if my budget is sufficient to purchase it.
- This has been tested by going to the menu page and looking at the prices. There is also a contact page where enquiries can be made for bigger whole cakes. The contact form has been tested and it works fine to simulate this functionality.
-
As a First Time User, I want to be able to order cakes to be delivered to my home, so I can save time by having the convenience of home delivery.
- The website has a section where the bakery can be contacted to enquiry about deliveries and refunds. I have checked the contact form and it all works fine to simulate a user enquiry.
-
As a First Time User, I want to have special occasion section, so cakes can be bespoke based on my needs.
- Due to the scope of the project that was discussed with mentor this feature has not been implemented, instead users can send an enquiry form, which its functionality has been tested and it simulates an enquiry request.
-
As a First Time User, I want to change the website colour, so if I am colour blind the website will be more accessible.
- Due to the scope of the project that was discussed with mentor this feature has not been implemented exactly, instead users can send an enquiry form, which its functionality has been tested and it simulates an enquiry request.
-
As a First Time User, I want to see reviews about their products, so I can understand what others think about the company.
- To achieve this user story I have created a testimonials modal that is opened from the the footer navigation. In addition, the home page has a section where it shows products which other customers have eaten and their review. These has been tested by loading the home page and clicking on the Testimonials link.
-
As a Returning User, I want to have a section where I can see their social media links, so I can follow them to get new updates.
- To achieve this user story I have implemented social media icons in the header at bigger screen devices and in the footer at all screen sizes. This has been tested by clicking on them and they open as external link.
-
As a Returning User, I want to have a section where I can contact the Bakery, when I have questions about the company.
- This has been achieved by having a contact page. The contact page has been tested and it is fully functional, in addition I simulate a server side request.
-
As a Returning User, I want to easily login to my account, so I can make a purchase.
- Due to the scope of the project discussed with my mentor it was decided to not implement the initial plan but to down it a notch. instead, if user would like to purchase a cake the website has a contact form and information about deliveries and customer services. All links and form have been tested fully.
-
As a Frequent User, I want to have a section where I can sign up for newsletter, so I can get the latest offers and news about the shop.
- To achieve this user story I have created a Join Now form that can be accessed from the header and footer. Once validated and submitted it will simulate a server side request and respond user with a message in a modal component. This has been tested and it is fully functional.
-
As a Frequent User, I want a booking a table, so I can reserve ahead of time in case its busy.
- To achieve this user story I have implemented a booking page where it will take details from the customer for booking once validated and submitted it will simulate a server-side request and display user with a nice modal confirming their booking. It has been tested.
- The website was compatible with most browsers with latest updates. The optimum experiences was at Firefox, Chrome, Edge and Safari. The worst experience was IE 11 and below which completely broke the website. I have added prefixers to improve browser compatibility using Autoprefixers online.
In this section, I have checked how responsive my website is by using Google Development Tools, Am I Responsive? and Responsive Design Checker. Also, I checked on Samsung S20, iPhone 6S and iPhone 6S Plus which all worked 100%.
-
Am I Responsive?
- I have checked with it and it was showing a white space, this is because I used the bootstrap navbar which was overlapping with the carousel. Because this was something that I could not fix immediately I decided to instead use a back to top button in case user would like to go to the top.
-
Google Development Tools
-
I have tested my website extensively during development and testing. I have taken some screenshots for the following sizes below, all tests done below worked properly without issues, however, if the screen is smaller than 320px the website breaks. I have chosen not to make the website responsive past this point first because I believe the amount of users with screen below 320px are very very small and the user experience past this point does not give a very good experience. I would say 425px and above are optimum sizes for the website.
-
-
Responsive Design Checker
- I have tested using this website for all iPhones and all Samsungs were displaying the website appropriately.
The tests that I have carried was for all forms. I can confirm that I have tested all forms and all of them behaved as expected, I did not screenshot extensively all inputs validation as all of them are the same, but all passed validation tests.
-
Footer Join Form
- TEST 1 - It was validated by trying to submit without any input, the form uses the default validation to let the user know that no input was entered.
- TEST 2 - This time I have tried to input something and clicked on subscribed. The form displayed with a message asking to input an email with @ symbol.
- TEST 3 - This time I have input all correct information required and form was successfully submitted.
-
Booking Form
- TEST 1 - It was validated by trying to submit without any input, the form uses the default validation to let the user know that no input was entered.
- TEST 2 - This time I have tried to input something and clicked on subscribed. The form displayed with a message asking to input an email with @ symbol.
- TEST 3 - This time I have test the timepicker input. If not time is selected it will display an error message alerting user to select time.
- TEST 4 - In this test I was validating the calendar, if user has not selected a date it will display an error alerting user to input date. However, if user select the calendar input it will open to choose a given date.
- TEST 5 - In this test I have checked input for the number of people for the booking. The max number of people per booking is 6, this was an implementation choice as we don't want the bakery to overcrowd.
-
Contact Form
- TEST 1 - It was validated by trying to submit without any input, the form uses the default validation to let the user know that no input was entered.
- TEST 2 - This time I have tried to input something and clicked on subscribed. The form displayed with a message asking to input an email with @ symbol.
- TEST 3 - This time I have test the timepicker input. If not time is selected it will display an error message alerting user to select time.
-
Menu Page
- TEST 1 - I have tested the menu download link and it opens correctly as a pdf.
- I have tested my website on the HTML Validation, only one error was displayed saying that there is a heading section missing from the carousel section. To fix this issue I have removed the section element tags that wrapped the carousel. The final check after the change shows validation successful. It can be viewed here.
- I have tested also my CSS file using the W3C validation. The result is that it did not pass the validation checks due to the bootstrap framework. All the CSS that I have coded passed were validated fine. As it shows in the screenshot it shows that there were 2 errors and 751 warnings all from bootstrap. The result can be viewed here.
-
Project Scope
-
I initially planned to have a lot more done than required because of my background in coding. However, after discussions with my mentor it was decided to down size my initial proposal. So I have cut down from an eCommerce website to a more static one.
-
In addition, I was initially going to do an ordering system so users would be able to order cakes from the site, it would have a small backend and google maps for users to check location distance and so on. I have turned the ordering section into a photo gallery instead and removed the google maps feature.
-
-
Bootstrap Framework
- The main challenging part for me was using bootstrap framework, as i have not used it extensively in the past. I took the wrong approach of not going through the documentation in detail. This lead me to do a lot of hard coding CSS when bootstrap had already had all laid out. After realising this mistake, starting from mid project forward I have extensively used more the framework and less hard coding.
-
Heavy Loading Website
- In addition, I have had problems with the amount of images in my website. Initially I have just uploaded all images to the project images folder and even after resizing and using TINYPNG it still was making the website very heavy to load. So I decided to look for a CDN platform to mitigate this issue. Once I had the images in the CDN the website loaded much faster due to auto compressing and resizing.
-
Bootstrap Navbar
- I have come across an issue during testing where the fixed top navbar was overlapping with the carousel, so I have followed bootstrap solution to add padding top to the body, even though this does work, if using older browsers it will actually display the white padding space, due to this reason I decided to remove the navbar being fixed to the top when scrolling and instead added a back to top button.
- I created an account on GitHub - My account
- I used the my-full-template - Code Institute Template from Code Institute as the base for my project.
- I created the repository - Hansel's Bakery for my Milestone project.
- To publish the project and make it available for public viewing, I used the following steps:
- Opened my repositories.
- Selected - Hansel's Bakery Repository from the list of repositories.
- Chose the settings option on the right of the taskbar.
- Scrolled down the page until ‘GitHub Pages’ was visible.
- Clicked on the ‘source settings’ drop-down menu and selected ‘master branch’ for publishing.
- You are returned to the top of the page.
- After scrolling back down to ‘GitHub Pages’, a link to my repository was available.
- My project is now available to view publicly - https://github.com/tpsantos2120/hanselsbakery
-
You can select to clone my repository via CLI.
- Open terminal in your preferred IDE.
- Navigate to the folder where you wish to close the repository.
- Enter
git clone https://github.com/tpsantos2120/hanselsbakery.git - The project will be pulled to your current directory.
-
To download this project do the following:
- Navigate to the menu in the very top of this page
- Click on the Code button.
- Then click on Download.zip
- Note you can also click here to download the zip file.
- Choose the directory you wish to download it.
- Unzip file.
- Once unzipped project will be ready.
-
Borrowed Code
- I have used a code from the internet which helped me achieve the back to top button. The source can be found here. I have used that code and customised it to my requirements.
-
Code Institute
- Some concepts I have got from the Love Running website part of Code Institute HTML and CSS studies. The main thing I have used as concept was the cover text in the hero image. However, this was implemented differently using bootstrap and some CSS to reshape the box and placed in a different position.
-
Timepicker.js & Datepicker.js
- I have used this Timepicker library and Datepicker library in this project.
-
Bootstrap
- The majority of the project was completed using Bootstrap framework, I have mainly customised the framework to my own proposed wireframes and mockup as specified in the UX section of this document. I have used a lot of the documentation from Bootstrap to accomplish the end project.
-
jQuery
- I have used jQuery for parts of the website, I have mainly used previous knowledge and documentation provided by jQuery.
-
ImageKit
- This is a CDN where I have used to store all images and video.
-
Our Ethos
- I have used ethos from this website with some minor changes. You can find it here.
-
Privacy Policy
- I have used Termly to generate the privacy policy. You find their website here.
-
Images and Video
-
All images were taken from Unsplash, Pexels and Pixabay. In addition, I have one video that was taken from Pexels which is a video of a coffee and a muffin, which is the only video in the website. Please check below where all images and video were sourced:
- Shop Image - here
- Christmas Cupcake - here
- Home Page - Macaroons Image - here
- Home Page - Carousel Image Slider 1 - N/A
- Home Page - Carousel Image Slider 2 - here
- Home Page - Carousel Image Slider 3 - here
- Menu Page - Menu - here
- About Page - Macaroons Image - here
- About Page - Coffee Video - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - Cupcakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - One Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Two Tier Cakes - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
- Gallery Page - Special Events Cake - here
-
-
I would like to thank you Stuart Crang for helping me getting enrolled in this course which took ages and the support. Also, for the long conversations and patience that he had with me through this time.
-
Also, I would like to mention my mentor here. Thank you Dick Vlaanderen for the support and guidance especially when my plan was bigger than was needed so he told me to calm down. Also, for giving me your opinion throughout our meetings.
-
Last but not least, I would like to thank the Code Institute for the course content and amazing support they have always provided me!