Live project can be viewed here

The Primary goal of the website is to build Cork Coffee Community, gather coffee lovers and professionals in and around Cork, Ireland, as well as other coffee enthusiasts from around the country. The Cork Coffee Club will host local events and facilitate collaboration between roasters and shops, cafes and bars.

The website will provide a quick, easy and trusted information about great coffee and coffee recipes, as well as other information about the Java drink. Users will be able to sign up for the Club to receive more information about the club and the coffee events.

UX PROCESS

The Strategy Plane

THE RESEARCH PHASE “Coffee has been a growing phenomenon among Irish consumers in recent years with 75% of Irish consumers stating they drink coffee, and seven in ten drinking more than one cup a day. Sales of fresh coffee are continuing to drive growth with overall sales of instant coffee declining year on year. Coffee until recent years was considered less favourable than tea, and although tea is still the most popular hot drink in Ireland, coffee sales are growing at its expense. With Irish consumers becoming increasingly conscious of their health and alcohol intake, many consumers are choosing coffee shops as a place to socialise as opposed to a pub or restaurant.” (Ian Kennedy, Consumer and Market Insight, Bord Bia – Irish Food Board https://www.bordbia.ie/industry/news/food-alerts/irish-coffee-culture-continues-to-grow/)

1. Primary goals of the website: build Cork Coffee Community and promote local coffee shops and coffee roasters during the hosted events.
2. We are creating a static website with informational and promotional information about coffee in general and, in future releases, local coffee opportunities.
3. The business objectives of the website are set to gather coffee lovers in and around Cork, Ireland, as well as other coffee enthusiasts from around the country. The Coffee Club will host local events and facilitate collaboration between roasters and shops, cafes and bars.
4. The customer's estimated needs are to get quick, easy and trusted information about great coffee, sellers and events. In the world of coffee there is a near infinite amount of flavours, tastes and recipes. The future of the website is for customers to be able to select their favourite coffee flavours and be able to get the list of local coffee sellers who provide similar coffee that would be to their taste however this feature is not currently developed and is in the prototype stages. I have decided to focus on building the Cork Coffee Community, creating a true local Community where like minded coffee connoisseurs and lovers can meet and enjoy in Cork.

Our target audience are people of all ages who have a passion for great coffee, and we expect most involvement from people in the 25-54 years old age brackets, as they have been determined to consume coffee the most and favour quality over quantity. (https://www.statista.com/outlook/30010000/140/coffee/ireland#market-age)

• Coffee fans

1. As an accountant who is currently working from home, I would like to join a community who share the love for coffee, so that I can stay connected with the world during the pandemic and the lockdown.

2. As Max, I want to find inspiration and coffee recipes so that I can make delicious coffee drinks at home.

3. As Amy I want to find new friends who share love for coffee.

4. As Jack I wanted to find out how to choose coffee beans that I like.

• Coffee professionals

1. As a barista I would like to learn something interesting about coffee so that I can have more varied small talks with my clients.

2. As a coffee shop owner I would like to be connected to coffee fans so that I can advertise my coffee shop.

3. As a coffee brand owner I would like to be connected to coffee fans and coffee shop owners so that I can promote my coffee brand.

4. As a coffee video blogger I want be involved in as many coffee events and communities as possible to get more viewers and followers.

HOW THIS PROJECT IS DIFFERENT FROM COMPETITORS AND SUBSTITUTES

Similar organisations do already exist and a similar project has been found: https://www.scaireland.ie/ SPECIALTY COFFEE ASSOCIATION – IRISH CHAPTER. This project aims to inform their users about many coffee companies (coffee shops and roasters) throughout the Republic or Ireland and Northern Ireland. While SPECIALTY COFFEE ASSOCIATION – IRISH CHAPTER project offers sustainability and educational features, their website is difficult to read, not predictable with a couple of misleading pages, e.g. when opening Education or Competitions section, the user is redirected to an external website within the same tab thus leaving the initial SPECIALTY COFFEE ASSOCIATION – IRISH CHAPTER. Another example being the Home page with the only Hover Over placeholder "Become a member", however when clicked, the user is brought to the page with the contact details of SCA IRISH CHAPTER COMMITTEE members with no clear instructions on how to actually become a member. The website has a rather chaotic presentation of information where the user would not be able to rely on his/her intuition.

Our project is aimed at offering a credible, trustworthy website with intuitive experience for the user. The users' main questions will be answered upon the first landing on the Home page, mainly:

• learn about history of coffee ("History" page)
• find the information about different coffee flavours depending on their origin ("Map Of Flavours" page)
• learn about different ways of coffee making and explore recipes ("Perfect Cup" page)
• join the Cork Coffee Club ("Cork Coffee Club" page)
• links to the websites of the partners and sponsors, social media pages as well as contact details will be available in the footer.

The Scope Plane

The website is planned to have three main releases as identified in the folowing table https://imgur.com/a/8lddGoE in order to unfold new experiences for the users. In order to consistently surprise and delight the customers, flash sales and competitions will be implemented in the future.

This website will become the building block for the coffee community, becoming their one-stop coffee shop, where true coffee fans will find like-minded friends and connections. Users will have the ability to find useful information about coffee origins and how the geographic location influences coffee beans flavour allowing users to learn where their favourite flavour comes from and open up a world of further exploration of their regions of choice. Users will have access to the library of video tutorials on coffee making, recipes and coffee art from experts.

This project is currently aiming at gathering social media followers and building a strong Community for coffee enthusiasts. I am passionate about local businesses and enterprise therefore I am dedicating my website to Cork local coffee roasters and sellers who in return may agree to become sponsors and partners in creating memorable coffee experiences for our Community, such as various coffee events, competitions, lessons. In the future I am aiming to have various local coffee brands in one online shop where not only coffee products will be available but also merchandise, gift cards, coffee kits and wholesale options.

This website can be sellable as it will have a clientele needed for coffee business needs.

The Structure Plane

The website has the nav bar that will feature five linear menu elements representing the five main sections of the coffee project, namely:

• Home
• History
• Map of Flavors
• Perfect Cup
• Cork Coffee Club

The footer will appear on each of the tabs and will have the following information to hand:

• Partners and Sponsors
• Social networks
• Contact details
• Copyright

Home page will briefly introduce the content of all the other website pages with the links to them in order to create a more intuitive experience for the user.

In the PC version, the navigation is represented by the Nav bar with inline elements. In future releases the nav bar items will have room for subcategories. In the mobile version the navigation will be represented by the Burger Icon. In the future releases the burger icon will have room for additional layers.

The Sceleton Plane

Wireframe built with Balsamic can be found in the project documents under the following directory name: cork_coffee_club_wireframe.pdf

The Surface Plane

Courier font is used across the website.

The most important elements must be abd are currently easily recognized:

• links: white text
• logos: located in the footer
• videos: are visible on pages
• navigation: has hover over effect

Color palette of the website consists of brown colour shades, black and white colours representing different coffee colours, milk and black coffee respectively.

Home, History, Perfect Cup and Cork Coffee Club pages have similarly positioned paragraphs to make the wesbite browsing more intuitive for its users.

As our main goal is to promote the local coffee roasters and build a community, the most important features of the website will be as follows:

• the sign up option for patrons to join the community in order for them to receive informtion about the Club and its events.
• the logos with incorporated links to the websites of the coffee roasters who are our partners and sponsors at the same time (these will be available in the footer).

Other features include:

• information about coffee origins which will educate the users about the facts and myths of the coffee origins.
• a page with videos and tutorials so that some users can get inspiration and recipe information while others can share their videos (invitation to be featured on this page will be included in the welcome email when a user signs up).

SECOND RELEASE

• online shop where local coffee roasters and coffee shops in Cork can participate (this will include worldwide shipping information and fees calculator).
• customer feedback section where the comments will be both collected and shared publicly.

THIRD RELEASE

• wholesale option and information
• sales and promotions
• gift cards
• gift wrapping option
• DIY kits (where a customer would be able to customize their own kit or hamper and get a discount)
• coffee rentals (rental of various coffee equipment)

• HTML5
• CSS3
• JavaScript

• Bootstrap. The project uses Bootstrap to simplify the responsive layouts.
• HTML Validation was performed using W3C validation service.
• CSS Validation was performed using The W3C CSS Validation Service.
• Autoprefixer CSS.
• Git was used for version control with the help of the GitPod terminal where the code was commited to Git and pushed to GitHub.
• GitHub was used to store the project's code and other relevant files.
• Fontawesome was used for the icons.
• Free ICONS Library was used for the brown coffee bean icon only appearing on the Home and Perfect Cup pages.
• Picresize was used for the resizing, cropping and reformatting of the images.

The following tests were performed:

• Website appears to work well in other browsers (i.e Google Chrome, Safari, Firefox).
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.

The following test conclusions were made:

1. All links are working as intended:
   • the logo on the top left brings the user back to the Home page.
   • the links in the main content on the Home page bring the user to the correct pages (i. e. "history of coffee" to "History" page, "coffee flavour" to "Map Of Flavours" page, "recipes and tutorials" to "Perfect Cup" page, "join the Cork Coffee Club" to "Cork Coffee Club" page).
   • the Bean Belt image on the Map Of Flavours page brings the user to the image source and opens in a new tab.
   • all the videos on the Home page and Perfect Cup page open in YouTube in a new tab when clicked.
   • video on the Home page auto plays and is muted.
   • partners and sponsors logos in the footer are linked to the official websites of those companies and open in a new tab.
   • social media links open their official websites and open in a new tab.
2. Sign Up form. Steps taken to test:
   • Go to the "Cork Coffee Club" page
   • Try to submit the empty form and verify that an error message about the required fields appears
   • Try to submit the form with an invalid email address and verify that a relevant error message appears
   • Try to submit the form with a valid email address but without making a selection on the radio buttons and verify that a relevant error message appears
   • Try to submit the form with all inputs valid and verify that a success message appears.
3. Hover over effect works in the following elements with all screen sizes:
   • Nav bar (menu items).
   • White text on the Home and History pages.
   • Sign up button on the Cork Coffee Club page.
4. Video on the home page autoplays and is muted.
5. Map Of Flavours page.
   • Text about coffee flavours appears above the image as the screen gets smaller, as the text on the image would not be readable otherwise.
6. Burger menu replaces the nav bar as the screen gets smaller.
7. The Pop-up Nav bar for mobile-sized devices is intentionally sticking out on the right-hand side to prompt users to peak inside there to discover more and trigger further steps.

BUGS

Cork Coffee Club page. The form does not allow any input, the radio buttons and the sign-up button do not respond to any action. The bug was fixed by splitting the main content into two separate sections: one with the four text columns and the other with the form itself.

Another existing bug: the nav pop-up window from the burger menu partially covers its "close window" icon on some mobile devices.

The project had to be rewritten from scratch in order to allow more frequent commits. More frequents commits will be ensured for future releases.

To access the live website, please follow the link.

Images only load onto the live webstie with the following path: assets/images/image.jpg.

1. On GitHub, navigate to the main page of the repository.

2. Above the list of files, click "Code".

3. To clone the repository using HTTPS, under "Clone with HTTPS", click "Clipboard Icon". To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click "Clipboard Icon". To clone a repository using GitHub CLI, click Use GitHub CLI, then click "Clipboard Icon".

4. The clipboard icon for copying the URL to clone a repository

5. The clipboard icon for copying the URL to clone a repository with GitHub CLI Open Terminal.

6. Change the current working directory to the location where you want the cloned directory.

7. Type git clone, and then paste the URL you copied earlier.

$ git clone https://github.com/olga-od-ua/CCC-MS1-2020---master

8. Press Enter to create your local clone.

History Tab information: https://en.wikipedia.org/wiki/History_of_coffee

Coffee logo header image: https://www.freepnglogos.com/pics/coffee-logo-png

The Bean Belt image https://www.pinterest.ie/pin/800022321291652492/

Coffee Recipes: Frothy Creamy Coffee Without Machine: https://www.youtube.com/watch?v=SM_dqUSJvgk How To Make the Perfect Cappuccino: https://www.youtube.com/watch?v=gvPetTPFsZM Coffee Shop Style Mocha At Home: https://www.youtube.com/watch?v=pUJH1sUfLWM Easy Cold Coffee At Home: https://www.youtube.com/watch?v=2HRVtKvU5FQ Latte Art Tutorial: https://www.youtube.com/watch?v=wEGLT02DGac The Espresso Guide: https://www.youtube.com/watch?v=ZuQu12vMQZM Everything About Coffee: https://www.youtube.com/watch?v=N8meCjVsJWI

Tips for the positioning of the header elements were taken from https://www.educative.io/edpresso/how-to-crop-an-image-in-css

Other borrowed codes and principles are mentioned in the comments within the code.

• Special thank you to my mentor Maranatha Ilesanmi for professional guidance and dedicated time.

• I received inspiration for this project from my husband Kevin who is a true coffee lover and my newborn girl Mila (born on November 10, 2020) who has been making me drink coffee a lot more often since she was born so I could succeed as both a mother and a Fullstack Web Developer.