The Leafy Bean Website
Table of Contents
Purpose
Many local businesses in Ireland have been hit hard by the COVID-19 pandemic. New Government restrictions have led to shop closures and continued uncertainty for small businesses. As consumers’ buying habits shift predominantly online, it’s more important than ever for small businesses to have a strong online presence during these challenging times.
I have created a fictional local independent coffee shop called The Leafy Bean located in Blackrock, Dublin. The Leafy Bean has a poor online presence and is struggling to reach their customers during the pandemic. They requested a fully responsive website which will allow them to notify their customers of their opening hours in line with government restrictions, and promote their new takeaway coffee service. Furthermore, The Leafy Bean wants to establish itself as a local provider of the best coffee in Blackrock and provide information about its high quality coffee beans.
Please note, this company is entirely fictional and was created for the Code Institute’s Milestone Project 1 as part of their Diploma in Full Stack Software Development. It was developed using the knowledge gained from the HTML, CSS and User Centric Design modules.
Please see The Leafy Bean’s live website.
User Experience Design
User Stories
First-time Visitor Goals
- As a first-time visitor, I want to be able to navigate through the website easily on mobile to find what I’m looking for
- As a first-time visitor, I want to see a visually pleasing website with eye-catching coffee related imagery to entice me to buy
- As a first-time visitor, I want to locate their social media links to see if they have a large social following and whether they're well-rated
Returning Visitor Goals
- As a returning visitor, I want to find information about their takeaway service
- As a returning visitor, I want to check the shop’s opening hours during the COVID-19 restrictions
- As a returning visitor, I want to see information about the quality of their coffee beans
Frequent Visitor Goals
- As a frequent visitor, I want to see if they take reusable cups
- As a frequent visitor, I want to check to see if they have a loyalty scheme
- As a frequent visitor, I want to read about the company to establish whether they're an independent coffee shop or a chain
Design
Colour Scheme
The two main colours used across the website are an off-white and brown to tie in with The Leafy Bean's product offering - coffee. Furthermore, a dark grey was used for the paragraph text, instead of black, to improve its contrast and readability on screens.
Adobe Color was used to create a colour swatch to find the right shade of brown for the site. A dark brown (Hex Code #695138) was used for the H2 headings and a lighter shade of brown (Hex Code #8f6f4d) was used for icons and buttons.
Adobe Color Swatch:
Wireframes
The Leafy Bean's website is a single page site. A single page design was chosen because the website has a narrow focus and is purely informational. Furthermore it's ideal for a mobile first design and users will have less clicking to do to find the information they need.
Please see the wireframes below for the varying devices:
A high-fidelity mockup for mobile was also created using Adobe Illustrator to trial the use of colour and to allow for better visualisation of how the website would look prior to commencing coding.
Typography
The fonts originally chosen for this website were Roboto and Playfair Display, based on inspiration drawn from The Art of Coffee website. However, once I commenced building the site, I didn't feel that Playfair Display tied into the branding I had in mind for The Leafy Bean - a fun and modern coffee shop who's knowledgeable about their coffee.
I trialed new fonts using Google Fonts and Google Chrome Developer tools to view sample text from The Leafy Bean's website in various fonts before applying them to the website. Furthermore, I took guidance from Google Font's "Popular Pairings" to find new fonts.
I decided to change Playfair Display to Roboto Slab instead. Roboto Slab offers a more fun font with its friendly and open curves, versus Playfair which has a more vintage feel to it.
Imagery
The website uses strong and impactful coffee imagery to reinforce The Leafy Bean's product offering and to also appeal to the website user. These images were sourced from Pexels and Unsplash and are referenced in the code. In addition, the images give structure and dimension to the website and help provide the user with a positive user experience. The size and positioning of these images varies depending on the screen size.
Lots of white space was used to help structure and organise the content and images on the page, improve the user experience and legibility of text on the site.
Features
The website is a single page site and is broken down into eight sections. Each section is described in more detail below along with its features and how they meet the visitor goals outlined in the user stories:
Existing Features
Section 1 - Navbar
The navbar is fully responsive and collapses down into a hamburger menu on smaller devices. It provides a full list of links to access each of the key sections on the website and remains fixed to the top on all devices so the user can easily navigate the site without scrolling.
As a first-time visitor, I want to be able to navigate through the website easily on mobile to find what I’m looking for
Section 2 - Hero Image
The hero image sets the scene for The Leafy Bean's product offering by displaying a large and enticing image of coffee and descriptive text overlaying it.
It includes a CTA which directs users to the shops Opening Hours/ Find Us section of the website. The text displayed shortens down to just the H1 heading on mobile devices so as not to obstruct the users view of the attractive coffee image.
As a first-time visitor, I want to see a visually pleasing website with eye-catching coffee related imagery to entice me to buy
Section 3 - Coffee to Go
The Coffee to Go section provides information about The Leafy Bean's takeaway coffee service. It includes four icons which highlight the shop's unique selling points which expand when hovered over or clicked. These allow users to quickly identify The Leafy Bean's key selling points
As a returning visitor, I want to find information about their takeaway service
As a frequent visitor, I want see if they take reusable cups
As a returning visitor, I want to see information about the quality of their coffee beans
Section 4 - Bean Points
The Bean Points section describes details of the shop's loyalty scheme and provides a strong image of coffee beans to capture the users attention.
As a frequent visitor, I want to check to see if they have a loyalty scheme
Section 5 - About
The About Section offers the user more information about The Leafy Bean and their passion for coffee. It also includes a grid of four images to illustrate the About section's content. These remain in a grid of four across all devices to reduce the scrolling for users.
As a frequent visitor, I want to read about the company to establish whether they're an independent coffee shop or chain
Section 6 - Opening Hours/ Find Us
The Opening Hours/ Find Us section includes details of The Leafy Bean's opening hours during the COVID-19 pandemic. It also includes an embedded Google map to help users find the shop's location.
As a returning visitor, I want to check the shop’s opening hours during the COVID-19 restrictions
Section 7 - Contact
The Contact section offers a simple contact form to allow the user to send a message to the shop with any queries they may have. The fields are all required and it will not allow a user to submit it unless the email input is valid (contains @). The email listed above the form is clickable and contains a mailto link.
Section 8 - Footer
The Footer highlights the shop's contact details and address again and also includes links to their social platforms. These were all included in the Footer because this is a location which they are most commonly expected to be by website users.
As a first-time visitor, I want to locate their social media links to see if they have a large social following and whether they're well-rated
Features Left to Implement
Users would like to have a newsletter to sign up to which provides them which insights on the latest coffee trends. This feature was not implemented in the initial release, but will be addressed for a future release. It's dependent on the growth of The Leafy Bean's marketing team.
Technologies Used
-
- GitHub is the hosting site used to store the source code for the Website
-
- Git was used as the version control software to add, commit and push code to the GitHub repository
-
- Gitpod was used as the development environment to write my code
-
- balsamiq was used to create low-fidelity wireframes of the website
-
- Bootstrap was used throughout the website for the grid layout, navbar, forms and buttons
-
HTML
- HTML was the main language used to create this website
-
CSS
- Custom CSS was used to add bespoke design
-
- Photoshop was used to create high-fidelity mock-ups of the website
-
- Illustrator was used to create the logo and favicon for the website
-
- Adobe Color was used to generate a color palette for the website
-
- Google Fonts was used to find, sample and import fonts to the website
-
- Font Awesome was used to source the icons used across the site
-
JavaScript
- JavaScript was used to create interactive elements such as the hamburger icon
-
- Am I Responsive was used to test the website's responsiveness across different screen sizes
-
- Responsinator was used to test the website's responsiveness across different screen sizes
-
- Chrome Developer Tools was used to test the site's responsiveness on different devices and to debug the code
-
- The W3C Markup validator was used regularly to check for any errors in the HTML on the site
-
- The W3C CSS validator was used regularly to check for any errors in the CSS on the site
Testing
Automated Testing
Responsiveness
To check the responsiveness of the website across all devices, Am I Responsive and Responsinator were used. I input the project's live URL to view it across multiple device sizes.
Furthermore, I regularly used Google Chrome Developer Tools to simulate the website on different device sizes throughout coding this project.
W3C Validator Tools
The website HTML and CSS were regularly run through the W3C Markup Validation Service and CSS Validation Service. A final validation check was performed with no errors before submitting the project:
Problems Encountered
-
A number of issues were picked up for the styling of the iFrame for the embedded Google Map. It specified that the elements used were obsolete and CSS should be used instead. This issue was fixed by moving the styling from the html file to the css file and removing the unused styles
-
Another issue encountered was for the layout of the code for the hero image CTA button. It identified that the button element must not appear as a descendant of the a element. This error was resolved by changing the button element to an a element instead
-
The validator also gave the following error "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections." This issue was resolved by changing the section element to a div
Manual Testing
User Story Testing
- A manual review of the user stories was carried out where automation was not possible. Please view these here.
Devices
The website was tested on different physical devices with varying screen sizes including:
- Apple iPhone XS Max
- Samsung Galaxy S5
- Samsung A71
- Apple iPad (6th generation)
- Samsung Galaxy Tab Pro SM-T520
- Macbook 12
Browsers
The website was tested across different browsers including Google Chrome and Safari. It rendered well on both browsers and worked as intended.
CI Peer Code Review
The webite was also submitted on the Code Institute's Peer Code Review channel on Slack, which highlighted a few areas for improvements.
From this feedback, I implemented a hover over effect on the navbar items and removed the "Opening Hours" nav item which linked to the same section as "Find Us". I decided not to change the four icons in the Coffee to Go section into clickable links, as my mentor highlighted that the mouse cursor should make it clear that they're not clickable.
Issues Encountered
Overall the website worked well across all device types, however a few minor issues were encountered:
-
The Samsung A71 was set to open websites in 'dark mode' and the website did not appear as well visually on this device until its settings were changed to restore its view to normal. This highlighted the need to implement a dark mode functionality in a future release, but it's out of scope for this project
-
The navbar menu on the Apple iPad jumped onto two lines when displayed horizontally. This issue was fixed by decreasing the amount of padding placed left and right on the navbar from 100px to 80px
-
The nav links did not jump to the desired locations on the website on both mobile and desktop devices and despite multiple attempts to fix this, it was impossible to get them accurate on each device. Some padding was added to the Find Us and About links to better align them to the right content when clicked. However, following mentor guidance, no further edits were made to the links and it was highlighted that these could be improved with the use of JavaScript at a later point.
Deployment
GitHub Project Creation
The project was created using these steps:
- Click the green 'New' button in my GitHub repositories section
- Select the Code Institute template
- Name repository "The Leafy Bean" and give it a description
- Set repository to 'Public' to ensure the commit history is visible
- Click 'Create repository'
GitHub Pages
The website was deployed using these steps:
- Open The Leafy Bean repository in GitHub
- Navigate to the 'Settings' tab at the top
- Scroll down to the 'GitHub Pages' section
- Select 'Branch Master' as the source
- Click save
- Click link to live deployed website
Run Locally
To run the code locally, follow these steps:
- Navigate to The Leafy Bean repository
- Click the 'Code' drop down menu
- Select to copy the GitHub URL from HTTPS box or 'Download Zip'
- Open a new terminal and type the 'git clone' command in the CLI and paste copied URL
- Alternatively, click 'Open with GitHub Desktop' and follow the steps to complete the clone
Credits
Code and Guiding Resources
- Sourced code for navbar from Bootstrap - https://getbootstrap.com/docs/4.0/components/navbar/
- Sourced code for contact form from Bootstrap - https://getbootstrap.com/docs/4.0/components/forms/
- Icons sourced from Font Awesome - https://fontawesome.bootstrapcheatsheets.com/
- Stack Overflow resource helped to create jumplinks - https://stackoverflow.com/questions/34125917/how-to-make-anchor-links-jump-to-content-when-using-bootstrap-tabs
- Favicon website provided information on how to add a Favicon to the website - https://favicon.io/tutorials/how-to-add-a-favicon-to-a-website-png-format/
- Stack Overflow resource outlined code to collapse navbar after clicking a nav item - https://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click/23926645
- System 22 I.T. Solutions YouTube video demonstrated how to add a Google map to a website - https://www.youtube.com/watch?v=3posLKQrhfU
- Bootstrap provided information on their grid system - https://getbootstrap.com/docs/4.5/layout/grid/#stacked-to-horizontal
Media
- The logo and Favicon for The Leafy Bean were designed by me using Adobe Illustrator
- The photos used on this website were obtained from Pexels and Unsplash and their source is referenced in the code
- The icons used across the website were sourced from Font Awesome
Acknowledgements
- A huge source of inspiration for this website was drawn from The Art of Coffee's website and coffee themed projects on Behance
- My friend, and coffee lover, Aisling gave me a great insight into the target audience for this website
- Thank you to my family members for testing the website across their mobile device
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
