Donut Disturb

A Donut Store located in Dublin City Centre whose goal is to create and sell the best, most delicious desert in Dublin. The website is deployed and can be viewed here Donut Disturb.

UX

Project Goals

• The goal of this project is to establish a brand by building a website for a donut store in Dublin city centre.
• The website will provide information about the stores products, location and contact details.
• The website will provide the visitors with social media links to receive news/offers.
• This Website will be:
  • Easy to navigate on a desktop, tablet and smartphone.
  • Contain pictures of all our Products, their prices and allergens.
  • Provide the visitor contact and location information via phone, email, forms and maps.

Business Goals

• There are not many donut stores in Dublin but they're becoming extremely popular so that is where the Donut Disturb Store comes in.
• This website will provide an online presence to the Store.
• This website will build brand awareness.
• This website will showcase all the amazing, delicious products we sell and their prices.
• Grow a brand and reputation and create a chain of stores throughout Dublin city centre and large shopping malls.

Customer Goals

• Allow the customer to see our range of products, prices.
• Allow customers with allergies to see a products allergens.
• Offer a range of products that can suit the majority of potential customers tastes.

User Stories

1. As a potential Customer that loves donuts/pastries, I would like to see current donuts and prices, so that I can know what to expect in terms of price and flavours when I visit the store.
2. As a new visitor, I would like to seamlessly navigate the website and browse your donut products, contact page etc, so I may find what I am looking for efficiently.
3. As a potential Customer, I want to be able to find your social media, so I can know more about the company news and upcoming events or offers.
4. As a potential Customer, I want to know the allergens of your products, so I may know if they are certain allergy friendly products (e.g. gluten, lactose, nuts etc).
5. As a potential Customer, I want to be able to find the location of your stores, so I may visit in person.
6. As a potential Customer, I want to be able to contact the company, so I may request an item or ask questions such as like customizable products (e.g. company logo or birthdays).
7. As a Job seeker, I want find information to contact/apply for a job at the company, so I may get hired.

Wireframe mock-ups:

• Home Page
• Our Donuts Page
• Contact Page

Features

1. Every page should have a responsive navigation bar with the company name and logo in the top left.
2. Each page has a footer with copyright information and social media icons linking to the stores social media pages. ​
3. The home page and our donuts page should have its own hero image at the top, detailing the cafe and or products that we sell.
4. The images and how they are displayed will be responsive for different screen resolutions.

Home Page

1. A hero image of the shop will be under the navigation bar to grab the attention of the visitor to the site.
2. There will be information on the company's passion and skills along with pictures to compliment our products or staff.
3. The home page will contain recent customer reviews.
4. A section to invite the customer to contact us for special custom orders.
5. Our social media links will be provided at the bottom of the page.

Our Donuts Page

1. The gallery page will contain rows and columns of images of all our products.
2. The allergies and pricing information will be displayed next to the relevant product.
3. The gallery will be responsive to different screen resolutions and clearly show product information such as allergies and pricing clearly particularly on smaller screens.

Contact Page

1. The contact page has a form to contact us that allows users to reach us via email.
2. This page will provide the store address alongside a map widget that shows our location.
3. It will provide a business email address and phone number to use alternatively.
4. The page will also provide an email address for career opportunities.
5. There will be a section with the store opening times for customers.

Existing Features

• NavBar- The navbar is responsive and allows the user to navigate the website intuitively. The company logo is also present and can be used to bring the user back to the home page if clicked.
• The Footer presents the user with the company's social media accounts, and states copyright info also.
• The Home Page and the Our Donuts Page have a hero image / video that are both eye catching and draw the customers attention.
• All of the website pages are responsive and the elements fold appropiately for mobile, tablet and desktop screen sizes.
• The color scheme was selected using Canva. The theme was selected to fit a desert / pastry / donut store.
• The stores donut products and information is presented along with relevant allergens.
• The Contact Page provides the customer with the stores location, opening times, a contact form and other relevant contact information.

Features to implement in the future

• A Basket and ability to order from the website.
• Create your own donut flavour from a list of options.
• A Subscription service / offer using a modal.
• The hero image home screen animation should wait for the image to load first.

Technologies Used

The Technologies used in this project are the following:

1. Bootstrap 5.0:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Balsamiq:
   • Balsamiq was used to create the wireframes.
3. Hover.css:
   • Hover.css was used on the main nav bar and footer links for improving UX.
4. Google Fonts:
   • Google fonts were used to import the 'Roboto' and the 'Merienda' font into the style.css.
5. Font Awesome:
   • Font Awesome was used throughout to add icons for a more pleasing UX.
6. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive.
7. GitPod
   • GitPod was used as my Editor/ Development Environment.
8. GitHub:
   • GitHub is used to store the projects code with version control.

Testing

The W3C Markup Validator for HTML validation and the W3C CSS Validator to validate the CSS were used to check for errors in the source code.

Testing User Stories

1. As a potential Customer that loves donuts/pastries, I would like to see current donuts and prices, so that I can know what to expect in terms of price and flavours when I visit the store.
   • In our responsive navigation bar there is the our donuts button that brings our customer to our donuts menu.
   • On the our donuts page the user is presented with images and descriptions of all our current donuts that we offer in the store.
   • The price of each donut is provided with the description of each product.
2. As a new visitor, I would like to seamlessly navigate the website and browse your donut products, contact page etc., so I may find what I am looking for efficiently.
   • At the top of the website there is a navigation bar that allows the user to navigate our website efficiently.
   • On the home page the user can reach the contact page if they would like to contact us for special events.
   • The navigation bar is responsive and is made to be easily found and used on mobile, tablets, laptops and desktops.
   • The company logo leads the user back to the home page.
3. As a potential Customer, I want to be able to find your social media, so I can know more about the company news and upcoming events or offers.
   • At the bottom of every page, the company's social media links are presented and standout in a contrasting style.
   • The social media links open in separate tabs so that the user can get back to our website after visiting the social media sites.
4. As a potential Customer, I want to know the allergens of your products, so I may know if they are certain allergy friendly products (e.g. gluten, lactose, nuts etc).
   • On the websites our donuts page menu, the allergens of all of our products are listed below each donut, in a clear dark font.
5. As a potential Customer, I want to be able to find the location of your stores, so I may visit in person.
   • The location of our store is presented to the user on our contact page via a Google maps widget.
   • The address location is also present next to/above the map on desktops/ smaller screens.
6. As a potential Customer, I want to be able to contact the company, so I may request an item or ask questions such as like customizable products (e.g. company logo or birthdays).
   • In the contact page there is a form that allows the user to get in touch with the company to discuss potential catering/ orders for important occasions like birthdays or special company days.
   • The form requires 3 fields to be able to submit it.
7. As a Job seeker, I want find information to contact/apply for a job at the company, so I may get hired.
   • A careers email address and notice that we are hiring is provided at the bottom of the contact page.

Manual Testing

Home Page

1. The Navigation Bar/Header:
   • The responsiveness is tested by varying the screen size to cover desktops, laptops, tablets and smartphones. This is to ensure the nav links text don't fold or become cramped for various screens.
   • Tested on Iphone X, 6, 7 and 8, ipad/ipad pro and various desktop resolutions.
   • Test that the burger icon appears at the expected screen resolution for smart phones.
   • Click each navigation link to verify it brings the user to the correct webpage.
   • Check the hover css is working correctly and looks centered on each element.
   • Click the logo and make sure the user is brought back to the home page.
2. Hero image:
   • On the home page the hero image is located below the navbar.
   • Check the hero image stays tightly under the nav bar across all devices and is the full width of the screen.
   • Verify that the image quality is not stretched and not blurry on various screen resolutions.
   • Make sure the store counter and donuts are a key focus on various screens sizes as the image is modified/adjusted to fit for different device screens.
3. Company mission & events section:
   • Test various screen sizes to ensure the text and images resize without being cramped and that the images are not becoming distorted.
   • Make sure the click here button brings the user to the contact page.
   • On mobile devices the text should overlay on top of the images and be readable.
   • Inspect that the images have alt text on tablets, laptops and desktops (images become background images on SmartPhones and cannot have alt text).
4. User reviews:
   • Test various screen sizes to ensure the text and images resize without being cramped and that the images are not becoming distorted.
   • On desktops the user review blocks are in the same horizontal row.
   • On tablets and mobile the review blocks are on different rows.
   • On mobile devices the images of the reviewers disappear.
   • Inspect that the images have alt text on tablets, laptops and desktops (images become background images on SmartPhones and cannot have alt text).
5. Footer:
   • Check that each social media icon will open up the corresponding social media website in a new tab.
   • Make sure the hover css works and is centered around the social media icons.
   • The copyright info should be visible but not distracting.
   • Ensure the icons stay centered on all platforms.

Our Donuts Page

1. The Navigation Bar/ Header:
   • Repeat verification steps done for navbar on the home page section above.
   • Make sure the Navbar is identical to that of the home page.
2. Hero image/video:
   • On the our donuts page the hero image/video is located below the navbar.
   • Check the hero image/video stays tightly under the nav bar.
   • The hero image/video should be full width on tablets and smart phone but 60% on desktops above 1200px to avoid a very large scroll to get to the donuts menu.
   • Verify that the image/video quality remains not stretched/not blurry on various screen resolutions.
   • Test that the video auto plays and doesn't loop or play audio.
   • The video controls were disabled as the video control frame took away from the aesthetics of the hero image/video.
   • Make sure when the video is finished, the opened box of donuts remain froze like an image.
3. Donut menu section:
   • The donut images should be clear and not distorted across all devices.
   • The text should be clear and easy to read.
   • Vary the screen resolutions to test
     • On desktops and laptops there are 3 donuts on each row.
     • For Tablets there are 2 donuts on each row.
     • On SmartPhones there is 1 donut on each row.
   • Test the responsiveness of the page by varying the screen resolution to see that the text for the donut description doesn't fold or wrap and look cramped.
4. Footer:
   • Repeat verification steps done for the home page footer section above.
   • Make sure the footer html is identical to that of the home page.

Contact Page

1. The Navigation Bar/ Header:
   • Repeat verification steps done for navbar on home page section above.
   • Make sure the Navbar is identical to that of the home page.
2. Store opening times, location and map:
   • The store opening times and location information is to the left of the map on desktops, laptops and tablets.
   • The map widget takes up just over two thirds of the row on laptops, desktops and tablets.
   • On smart phones and smaller screens (<767px) the map widget takes up an entire row, and is below the store open times and location information.
   • The location information and location pin on the map are the same.
3. Contact form:
   • The get in touch form fields are all required and should not allow the send message button to work without them being filled in.
   • On desktops and laptops the form takes up almost two thirds and there is an image vertically aligned with email address field box.
   • Check the responsiveness of the image and form by changing the screen resolution and make sure the image and form are aligned.
   • Image next to the form only appears for laptops and desktops and disappears for tablets and smart phones.
   • The send message form takes up a separate whole row on tablets and smart phones.
   • A Modal giving the user feedback that the message was sent should pop up on submitting the form.
   • The modal should not appear if the form elements are invalid.
4. Contact details, Careers email section:
   • The contact information and the careers section are on the same row for desktops, laptops and tablets
   • On desktops and laptops they are closer together for a better visual.
   • On smart phones they are stacked on separate rows on top of each other under the map widget.
5. Footer:
   • Repeat verification steps done for the home page footer section above.
   • Make sure the footer html is identical to that of the home page.

Further Testing

1. Used Chrome and Firefox to test the site.
2. Tested the website on a physical desktop, smartphone and tablet.
3. Asked friends and family to visit the site and give feedback of bugs, visual discrepancies.

Known Bugs

Currently no known bugs.

Deployment

GitHub Pages

I followed the steps below to deploy my project:

1. Go to GitHub.
2. Click on your projects repository and then click the settings tab.
3. Locate the GitHub pages sections in the settings page
4. Select the branch you want to deploy your code from under the source drop down tab.
5. Now if you go back to the GitHub pages section your project should be deployed and you should see the link it was deployed to.

Creating your own local copy

1. To get a copy of this repo, go to Donut Disturb Repo, make sure your logged in.
2. In the top right hand corner, click the fork button which will create a copy of the repo into your account.

Credits

Media

• The photos used in this site were obtained from:
  • Free Logo Design - Created the 3 Donut Disturb Logo.
  • Pexels - Photo by Igor Ovsyannykov from Pexels.
  • Pexels - Photo by Mahima from Pexels.
  • Pexels - Photo by Daniel Xavier from Pexels.
  • Pexels - Photo by Vaibhav Jadhav from Pexels.
  • Pexels - Photo by Jeswin Thomas from Pexels.
  • Pixabay - Photo by Alexas_Fotos from Pixabay.
  • Pexels - Video by cottonbro from Pexels.
  • Pexels - Photo by Jess Bailey Designs from Pexels.
  • unsplash - Photo by Lore Schodts.
  • Canva - Color theme idea for the website.

Acknowledgements

• My mentor Miguel Martinez for awesome, helpful feedback.
• Got some understanding of the bootstrap class for inline list items from - stackoverflow.
• Used bootstrap forms and modified some examples together for my contact form from here - getbootstrap.
• I modified the code for the navbar from the whisky drop tutorial in the code institute course and also got information here - getbootstrap.
• I received inspiration for this project from The Rolling Donut.
• Got the idea of using box shadows for some of the elements on the home page to make them stand out from freefrontend.
• Good reminder about the grid model from w3schools.
• Got information about hiding elements on screen sizes from [w3schools] (https://getbootstrap.com/docs/5.0/utilities/display/).
• Got inspiration with writing the read me from the Code institutes github and from Anna Gilhespy's github posted in the slack group.
• Thanks to my mentor Miguel for pushing me to use some feedback on the form in contact page and told me to use preventDefault to stop the form submit reloading the page.
• I used a bootstrap modal for the form submit feedbackgetbootstrap.

Bugs/Issues Resolved

• Needed to make some text more visible when images are behind the text. Used some shadows and got some information from w3schools.
• Had some trouble with horizontal dividers adding white space above the divider line. Got some information on bootstraps style for the hr element but figured out to set margin and padding to 0 via the chrome tools to get what I wanted. This question helped me figure this out. stackoverflow.
• Wanted to switch to using img tags for some images rather than background images but the images were distorted, found equivalent to background-size here [w3schools] (https://www.w3schools.com/css/css3_object-fit.asp).
• My mentor Miguel found the navigation drop down bug where it was jumpy and pointed me to stackoverflow.
• Found my modal was appearing and bypassing the form validation so I found I need to instead use a submit function stackoverflow.
• Found out how to reset the form after submission from stackoverflow.
• The animation for the drop down wasn't appearing for me but I found it was due to a windows setting stackoverflow.
• Used a span for a background image so aria label can be used stackoverflow
• There was white space on the right hand side of all pages. I found this was due to padding and also rows not being inside a container from stackoverflow.