Welcome to the Coffee Palate!
Aren't you tired of always having to choose between hundreds of different coffees when you go to the supermarket? Do you always end up choosing that kind of coffee that barely meet your preferences just because there is not enough information about it? Have you ever realized how big roasters are always deciding which coffee you must drink? The Coffee Palate is finally here to give you exactly what you are looking for in a cup of coffee!
You can finally stop complying with what big roasting companies think you need and adjust the coffee profile to your own specific palate. If every person is different, why do we have to drink the same kind of coffee, right? Coffee by convenience is no longer what you need. You deserve you own unique blend! Throughout this website you can learn about different coffee origins, learn about the roasting profiles and, finally, based on your brand-new acquired knowledge, develop your own exclusive blend. All of this, through an appealing, intuitive website with straight-forward and clear information.
Thank you for visiting my project and do not hesitate to contact me via GitHub if you have any doubts or concerns related to The Coffee Palate project.
-
1.2 User Requirements and Expectations
1.3 Company Goals
1.4 Design Choices
-
2.1 Mobile
2.2 Tablet
2.3 Desktop
-
3.2 Future Features
-
Languages, Libraries, Frameworks and Tools
4.1 Languages
4.2 Libraries
4.3 Frameworks
4.4 Tools
-
5.1 Ordering Process
5.3 Navigation
5.5 Debugging
-
7.1 Credits
7.2 Acknowledgments
As a user I aim for:
- a simple and intuitive website,
- with value-added content,
- displayed over visual attractive pages,
- containing clear information on coffee and blending process,
- with several call-to-actions.
As a user, I want to:
- buy good quality and year-round consistent coffee.
- be able to select several origins to use in my blend.
- be able to learn more about coffee produced worldwide.
- get to know where my coffee comes from.
- understand about the different roasting profiles.
- access an intuitive website, easy to navigate.
- easily find the company contacts.
- easily find the company's social networks.
- Easy navigation.
- Interesting and pertinent content about coffee and blends.
- Clear pricing information.
- Good access points to contact the company.
- Clear information about the steps to make my own blend.
- When clicking on links to external pages, I expect the new page to be opened in a separate browser tab.
- During the blending process, user wants to receive tips through "Tooltips".
- Reach out to the user's specific blend throughout no more than 4 steps.
- Strong connection with website visual effects.
- Links must be working properly to reach the target with any setbacks.
- Receive feedback after submitting my order through the form.
As the company owner, I want to:
- Establish the company online.
- Advertise the "make your own blend" as an innovative and unique service.
- Attract customers to the art of blending.
- Promote different coffee origins.
- Educate the readers in regard to the different roasting profiles available.
- Convert webpage readers into potential customers.
As a coffee roaster specialized in blends, I tried to choose colors, both cold and warm, that work harmoniously, standing out the same effect expected on a blend from different origins and coffee with different profiles.
Whilst trying to generate the business logo through Tailor Brand I came across several appealing color schemes. Afterwards, I have transferred the most appealing one to Coolors where, through slight adjustments, came up with a final, strong and harmonious scheme.Through Tailor Brand, I also got to know interesting font types.
Afterwards, I have used Google Fonts to try to replicate the ones found.
For the overall content I am using Kumbh Sans font. A font that is easily readable and visually attractive.
For the headings I have decided to go with Allerta Stencil font, making the heading stand out from the general content and reflecting a characteristic from the roasting process: the cracks!
I trust that both typographies used blend very well with each other, creating a calm and inviting look to the website.
The icons that I will be using throughout my page are from FontAwesome.
The icons chosen are easy to understand and in line with the company branding , providing interest and supporting the navigation.
For instance, the navigation bar will collapse into a hamburger icon in mobile devices.
-
congo-pink: #ed8074 The congo pink will be the color standing out the most as it will be used for the call-to-action buttons.
-
metallic-seaweed: #1d7a8c; The metallic-seaweed color will be and "aid" color. It will be used, if necessary, to separate sections or highlight borders.
-
outer-space-crayola: #0b3037; This color will be the used throughout the website as the main text color. It has a great contrast with the background.
-
ghost-white: #f8f8ff;
The overall website will have a clean and fresh background, reason why I have opted by the Ghost White. This particular color has a blue-purple accent that eases the transition to the three colors already mentioned.
In the creation of this palette, the Contrast-Checker tool from Coolors has been used in order to guarantee as good user readability.
My website will be divided into 3 different pages.
The landing page is aimed to be visually attractive, with appealing images/icons that says "Welcome" by itself, unconsciously engaging the reader and creating curiosity to keep navigating throughout the page.
The Lab is the educational part of the website where readers can come to learn more about the different coffee origins available and the several roasting profiles provided by the company.
The Blending store is the place where the magic happens. Here, the consumer can put into practice his/her new-found knowledge and create their own unique blend.
-
Navigation: As you can see on my wireframes, the original idea was to have a home button in the navbar. Nonetheless, this option was a little redundant as the logo and brand had the same effect throughout all the pages. Therefore, the next step was to put aside the home button and substitute it for a subscribe button instead linking it to the subscribe section (See next bullet point).
-
Subscription section: The susbcription section is also something that was not forecasted during the website design, but is an important tool to bring a better user experience. Therefore, adding this to the website was a logic step to take.
Firstly, it was implemented in the footer, but after discussing it with my mentor, the solution passed by creating a separate section for this option.
The modal that pops-up when clicking subscribe was also not forecasted, but certainly it gives a great interaction with the user.
- Tabs vs Carousels: Whilst designing the website, the current carousels applied to The Lab page were firstly idealized as tabs.
After further review and research, the carousel option started to be more appealing due to its easier implementation, responsiveness and overall attractivness. This resulted in some trade-off regarding the content to be displayed, but without affecting the outcome for the user.
Overall, the final result looks much better than the idealized.
- Order Form:
When designing the wireframes, I did not notice that the pricing content was not putted in place.
This generated a more complex aproach in order to maintain the max. 4 steps per order process. To do this, I have merged the pricing and amount content into to the grind selection, righ before the contact details.
The order form initially was designed not to be in a carousel but placed throughout the page vertically.
Nonetheless, despite of the increased complexity of embedding a form into a carousel, I decided to endeavor in this additional challenge in order to improve the UX, maintaining the same structure as the other two pages.
- Icons: I did not apply the icon idealized for the hero-container in The Store has it would generate too much visual noise.
The representative icons used in the form in the wireframes were later susbstituted for batteries icons, where the charge of the battery increases every step of the way in the form until is fully charged.
- Large screens layout: Initially, the Landing page was designed to include only 1 hero-image and two smaller images dividing the portview into 50/50. This option did not end up to be too appealing, the reason why I have switched for 3 hero-containers.
This ended up being a win for the project.
For the navigation bar, I have used Bootstrap to implement a responsive navbar across devices. In this case, the navbar is 100% visible in large screens, while on small/medium devices it will collapse into a dropdown menu, resulting in space saving of the real-estate.
Moreover, the navbar will highlight the page where you are.
The landing page is displayed through 3 hero-images, each representing a separate section.
The first section gives an introductory paragraph about The Coffee Palate project.
On the following two sections, custom buttons were implemented to give the user another possibility than the navbar to navigate to the corresponding pages.
The last section is the subscription section, which is implemented the same way across the pages.
The Lab page has been built following closely the design structure of the landing page.
The introductory section uses a hero-image, whereas the following two sections have implemented a carousel each. The page body ends at the subscription section.
Implementing the carousels with other content than pictures and make it responsive through devices has been quite a challenge, resulting in some trade-offs.
My first idea was to have fixed height carousels, but this resulted in a very complicated way to approach variable content. See [Debugging] section.
Therefore, I saw the need to restructure the carousels, so they would work properly. For that I used Bootstrap grid to make the carousel adjust to the content and turn it into a fully responsive feature across devices.
The store has a similar structure to the [The-Lab] page, whereas only one carousel is used instead of two.
On the same line as [The-Lab], this page also run into the same issues with the carousel. Instead of having variable content across slides (i.e text and graphs/diagrams) a form has been implemented.
Embedding a form that has several steps, and consequently varies in height throughout the form itself, into a carousel was quite tricky. To solve the responsiveness across devices, the solution passed by restructuring the carousel as explained in [Debugging] section.
FontAwesome icons where used in the carousel title to visually also inform the user on which step he/she is in placing the order.
The subscription section was an idea that came across through the actual coding and not idealized in the design process, result of missing some more interactivity with the user.
Firstly, this section was implemented in the footer, but after discussing with my mentor and checking several other webpages, the decision was to implement it as an individual section to be used throughout the 3 HTML pages.
For this section I have used the Bootstrap flex grid.
The contact options are placed in the footer of the page, displaying social links and e-mail options, via FontAwesome for the user to get in contact with the company.
This is a simple and intuitive way of approaching it.
Feedback to the user throughout the website and actions is fundamental. To address this user need, I have decided to implement modals linked to the "Subscribe" and "Place Order" buttons.
- Track&Trace for each order
- Personal profiles with history of user's purchases and blends
- Validation system to guarantee that user can only proceed from first slide on The Store form after the blend totals 100%.
- Packaging customization form, where user uploads his/her own brand/logo to be applied on their coffee bags
- Immediate payment of the order through credit card, Stripe and Paypal
- Carousel on [TheLab] page with information on different brewing methods
- Updates Terms&Conditions under the GDPR on how user data is used
- Implement an interactive shopping cart so the user can visualize in real-time his/her order and correspondent pricing
- User receive confirmation email after placing the order
- Tooltips on parts of the page where additional information might be required (i.e the type of grinding that is not covered on The Lab)
- Git
- Gitpod
- Balsamiq
- W3C-Markup-validation
- W3C-Jigsaw
- W3C-Spell Checker
- Google-Lightouse
- TinyPNG
- Microsoft Excel
- Contrast-Checker
- Techsini
- Favicon
- Buy good quality and year-round consistent coffee.
- Be able to select several origins to use in my blend.
- Clear information about the steps to make my own blend and reach out to the user's specific blend throughout no more than 4 steps.
- Receive feedback after submitting my order through the form.
- Clear pricing information.
- During the blending process, user wants to receive tips through "Tooltips".
When user enters the store he/she must intuitively understand how to proceed with the purchase, receiving all relevant information to attain his/her unique blend.
To tackle these needs and requirements I have implemented a form within a carousel where, throughout well-defined 4 steps, the user starts by choosing the blend origins via dropdown lists with percentages. In doubt, the user can navigate back to The Lab to clarify any doubt or obtain any suggestions through the corresponding carousel, through the link placed there for that purpose.
The second step is to choose the roasting-degree. At this point the user can pick through radio buttons which kind he/she thinks will fit better with his/her preferences. As the previous step, the user can navigate back to The Lab via the link placed there for the purpose.
Third step passes by choosing the type of grind, together with the amounts needed. At this stage, the user is faced with the "pricing policy".
Fourth and final step of the order is a contact form with mandatory fields, where the invoice is to be sent.
After accepting Terms&Conditions, the user receives immediate feedback provided with a modal that the order has been placed and which steps follow.
I have gone through the four steps of the order and found out that the pricing method displayed is not sufficient clear. Also, as we are in a middle of a form and don't want to lose the data inserted so far, by clicking on the link back to The Lab, this was opening in the same tab which was afecting the user experience. Thereof, target="_blank" attribute has been included in the corresponding anchor element.
The order testing clearly passes 4 out of 6 stories and requirements. The first topic to address in future releases would be the tooltips, that due to time constraints I was not able to implement in due course. Using Bootstrap tooltips might be the fastest option to guarantee compatibility and responsiveness with the rest of the website. The second and final topic to tackle in future releases would be the clear pricing information, for which I would have to use deeper developing languages, like Javascript, and at the moment I don't have the knowledge to implement an interactive shopping cart so the user can visualize in real-time his/her order and correspondent pricing.
The test passes 67% of the stories and requirements and works as planned. The remaining 33% (clear price information and tooltips) are still to be implemented due to lack of time and knowledge.
- Be able to learn more about coffee produced worldwide and get to know where my coffee comes from.
- Understand about the different roasting profiles.
- Interesting and pertinent content about coffee and blends.
When user navigates to The Lab, he must infer automatically where the info he/she is looking for is.
To display the learning content on The Lab page, I have implemented two separate carousels. One for the coffee origins and another for the roasting profiles. Has both carousels present only 5 items each, using this option is appropriate. If there were a lot more items, most probbably I would have to re-think the full content display on the page.
On the first carousel, user can know where the coffee comes from. As The Coffee Palate only provides standard coffee, a general briefing of the coffee sector per country is sufficient.
The roasting process is quite complex, the reason why I have opted to present through a diagram the range of acidity/bitterness that the coffee undergoes whilst roasting. For the common mortal, this information is more than enough to understand which degree to choose for his/her blend.
Moreover, whilst the first carousel presents fun facts about the origin to make the content more appealing, the second carousel presents tips instead. This because the choosing process is more complex during this stage than choosing the favourite origin based on the radial graphs presented.
Entered The Lab page and scrolled down to the origins' carousel. The info presented is clear, appealing, easy to understand and easy to compare between origins.
Moved to the second carousel. Info is clear and self-explanatory.
Carousels are working properly and all the info is passed without any issue to the user.
The test passes all the criteria.
- Access an intuitive website, easy to navigate.
- Strong connection with website visual effects.
- Links must be working properly to reach the target without any setbacks.
- Landing Page
When the user enters the landing page, he/she is confronted with a clear and intuitive website.
Throughout the navigation bar / dropdown menu (triggered by the "coffee mug icon"), the user can access the 2 main sections: The Lab and The Store. Also, the user has always available the option to navigate to the Subscribe section, either via the navbar/dropdown menu or scrolling to the bottom of the page.
Moreover, on big screens the user can know on each section of the page he/she is due to the highlight of the specific section.
On top of this, the user is confronted with 3 impactful hero-images, where the last 2 display 1 button each to navigate to the corresponding page.
Reaching the bottom of the page, the user can visually identify the points of contact with the company.
- The Lab
When user get to The Lab it is confronted with the same structure, creating a feeling of harmony during the navigation.
At this stage, user is faced with 2 carousels displaying useful information for the blending process. These present a very easy, intuitive and appealing way to navigate through the info.
At this point user can navigate directly to The Store through a button placed below the two carousels.
- The store When the user reaches this point he/she already understands the structure of the page and can now fully focus on the blending process.
For the blending process, users faces a form within a carousel where, within 4 steps, he/she can place his/her order.
- Modals Modals presented when subscribing to the newsletter and placing the order through the "Let's Blend" button, give an immediate feedback to the user that is action is now being taken care of.
- Nabvar
For the sake of ease of navigation, I have implemented through Bootstrap a toggle menu for medium and small devices.
The user can also know on each section he/she is due to the pseud-class:active that gives that specific section on the navbar a fixed color. This does not apply to the subscription link as it is transversal to all the pages, sending the user to the bottom of each of the pages.
-
Hero-images The hero-containers applied via Bootstrap included a min-heigh of 60vh in the backgound-images giving the user a sneak-peek of what comes below when the content does not exceed this height. As the content is of extreme importance, this sneak-peek stops applying if necessary.
-
Carousels The carousels implemented to show the content and the form, together with d-flex and h-100 bootstrap classes guarantees that they are fully responsive across devices.
-
Forms To embed the form in the carousel, I have opened it right at the beginning of the carousel and closed right before the end. The formatting was made with Bootstrap guaranteeing its responsiveness.
-
Overwriting I have used Bootstrap throughout all the website, but to guarantee the customization of the page, I overwrote some classes with CSS.
To test the navigation, I have conducted a thorough analysis going page by page and clicking on any button available to guarantee that there is nothing not functioning properly. Started with the navbar in small-devices up to big-screens, analyzed in-between pages buttons and carousel and modals buttons, finishing with the anchor elements at the footer of the pages.
Website does not show any contradictory information, has a well-defined structure and is easy to navigate.
Colors and images bring a perfect identity to every step/location where the user is navigating.
External links are internal The Lab links within the carousel form, open in a new tab to guarantee that the user does not lose track of what he/she is doing, nor information already inputted in the form.
Test matches fully the user requirements and passes all the criteria.
- Easily find the company contacts and social networks.
- When clicking on links to external pages, I expect the new page to be opened in a separate browser tab.
- Good access points to contact the company.
The website uses what is currently accepted to place the contact information: the footer.
Being the visual identity very important when navigating through a website, I have decided to display the contacts only through self-explanatory icons.
All links are to be opened in a blank tab.
To test this, I have ran a thorough inspection of the footer element, clicking link by link to guarantee its workability as desired.
All links are working properly and opening either on a new tab or on the corresponding app on mobile devices.
Test fully matches the user requirements and address the user stories, passing all the criteria.
horizontal scroll-bar displaying on mobile
Footer content was not contained in a container, originating it to exceed the admissible width. Containing the content into a container-fluid solved the issue.
a:hover color seaweed not displaying properly on mobile and showing text-decoration
a:hover color was within the media query for big screens. Moving this element styling to the top of the CSS below the main a element solved the issue.
Dropdown menu not collapsing automatically when choosing the subscribe option.
At the moment I don't have the necessary skills to solve this bug, but certainly this is possible to correct with some Javascript
Modals not centered
Modals where not being displayed centered has the width of the modal class was set to 90%. Changing it to 100% solved the bug.
User can proceed through the first and third step of the order form without selecting the percentages of coffee for the blend and without selecting the amount of bags/amount of coffee per bag.
In the future I would like implement some validation code on this steps to prevent the user of proceeding forward without filling this content. For instance, if the total of the blend does not equal 100%, the user will not be able to go to step 2. On the same line, the user will have to tick the box of the desired grind in order to be able to choose the amount of bags/amount of coffee per bag. User will only proceed if input fields linked with the checkbox selected are duly filled. To minimize the impact of this issue, I have chosen to place clear warnings/advice throughout the form.
The Coffee Palate project has been deployed via GitHub after its final push.
These are the deployment steps:
- 1 - Go to settings within the corresponding repository in GitHub
- 2 - Enter the Source section within the Pages section
- 3 - Choose the correspondent master branch on the GitHub Pages section and click save
The page is now live on https://arturmpinho.github.io/thecoffeepalate/
The page updates automatically after commit and push to Github any potential change.
You can find all the images sources through the collection prepared here.
Side note: Graphs and diagrams are own-creation.
https://www.cecafe.com.br/en/about-coffee/interesting-facts/
https://www.cafedecolombia.com/particulares/historia-del-cafe-de-colombia/
https://jporganiccoffee.com/blogs/news/10-interesting-facts-about-kenya
https://www.backyardtravel.com/blog/8-things-to-know-about-vietnamese-coffee/
https://www.ethiobeauty.com/article/interesting-facts-about-ethiopian-coffee
https://coffeeattendant.com/2018/04/24/these-are-the-coffee-flavors-by-country/
https://www.sucafina.com/emea/origins/vietnam?price=EUR
To accomplish this website I have used some content from Stackoverflow community, to whom I would like to thank for all the suggestions and content made publicly available.
Also, some parts of the code have been based on the content available in W3Schools and Bootstrap that allowed me to attain the final result.
All software and applications used to create this website are mentioned above in section [Languages_Libraries_Frameworks_and_Tools].
A big thank you to my mentor, Anna_Villanueva, for all the inputs and guidance throughout the past months.
To my friends and family that took time to test and re-test the website and for their valuable recommendations.
Last but for sure not the least, a special thanks to my wife-to-be, Anouk, for all the suggestions, inputs, testing and above all for the extreme patience and support shown during this journey.
Thank you all!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
