Services
Company
Services
Company
Services
Company
![](https://framerusercontent.com/images/2iRthP0SX6y0BtEj1V1Ibig7u8.png)
![](https://framerusercontent.com/images/2iRthP0SX6y0BtEj1V1Ibig7u8.png)
![](https://framerusercontent.com/images/2iRthP0SX6y0BtEj1V1Ibig7u8.png)
Cornell Ingredients Website
Cornell Ingredients Website
Cornell Ingredients Website
![](https://framerusercontent.com/images/z9xxQmQS9vITLI8knuXYYOlaFgw.png)
![](https://framerusercontent.com/images/z9xxQmQS9vITLI8knuXYYOlaFgw.png)
TEAM IOL
Project by IOL
June 18, 2024
June 18, 2024
About Project
Project Name: Cornell Ingredients Corporation Website
Project Duration: November 2023 - April 2024
Services: Web Development, Content with AI
Introduction
Cornell Ingredients Corporation (CIC), as a distinguished food ingredients company, needs to have a digital presence that speaks to your market position, advantages, and the quality of the products they offer. Based on the preliminary review of the client’s needs and their competitor’s website, the goal of the project is to accentuate CIC’s unique strengths such as responsive technical and after sales support, superior market knowledge, and your promise of fast and easy transactions.
Project Objective
The main objective of this website will be to enhance brand recognition and provide a seamless contact experience for potential clients.
Process
Phase 1: Planning and Design Phase
During this phase, we collaborated with the client to plan and design the website by having the client supervise the progress and critique the designs while the team creates suggestions based on the initial plans as well as feedback from the client. During this phase, the team, as well as the clients used Figma to create the website design and navigation.
Competitive Analysis
The research phase of the project started with taking a look at company websites of similar industries and offerings and taking note of the pros and cons of each website. These websites were provided by the client.
Disclaimer: We won’t be mentioning the names of the websites provided, so the names will be renamed as “A” and “B”
Website A
Pros
Highlights their products well on the home page
Clear navigation to key pages (products, about us, blogs, contact us)
Site has a cookie banner to comply with EU privacy guidelines
Cons
Aesthetically looks dated, design feels inconsistent and cluttered
Blogs aren’t being updated
Some texts are hard to read
Website B
Pros
Clearly defined the benefits of availing their products and services
Simple design and clear navigation
Clean design with little to no clutter
Cons
Lacks details, have to download brochure to learn more about products, some offerings don’t have brochures
Contact is too generalized without specifying the inquiry
No cookie banner
After which, we redefined what needs to be done to create a website that addresses the cons of the two websites and improve upon the pros listed on both sites.
Hence, for Cornell Ingredients, the website must have:
Have clean, modern design with clear navigation, and readable texts, that aligns with their brand guidelines and assets
Clear definition of who the company serves and what products they offer
Have a privacy policy and a cookie banner to comply with EU Data Privacy Standards
Sitemap
In order to know the pages we need to make, we created a sitemap to serve as a guide to what pages we need to create.
![](https://framerusercontent.com/images/rVLiyxmF4BBJlKTEOWGMGoHAQgM.png)
The site map of the website are as follows:
Homepage - The website’s homepage
Products - A list of products provided by the client
Product Page - A page which contains a product picture, product description and a CTA to the contact us page
About Us - Page that talks about the company
Contact Us - Page that contains the contact us form
Privacy Policy - The page that contains the data privacy policy of the website
Since we already know the core pages, we also need to know what details should be contained within each of these pages. And then created the sitemap below
![](https://framerusercontent.com/images/f1NaKmcl3Sl6HXRBNGg6T51evBg.png)
Changes in the Sitemap
As we were developing the sitemap and was able to obtain some documents and feedback from the client, made some changes to the sitemap:
Product Pages - we added a list of applications of the product below the product image and description.
Contact Page (Forms) - to make sure that inquiries are specified, we created three (3) types of inquiries
Consult about Ingredients - inquiries about the company’s products
General Inquiry - general inquiries to the company
Careers - inquiries on job applications posted by the company
Contact Page (Facilities) - We also added the contact information of the client’s office and warehouse so that they may be easily located by current and potential customers.
Prototype Design
For the prototype design, we used Figma to create the design of all the pages of the website. In creating the prototype, we focused on creating a low-mid fidelity design so that we can focus on laying out the copy and the navigation of the website and discuss them with our client for feedback.
While doing this, we also developed the design of the website on different screen sizes as a guide for the developers when developing the responsiveness of the website later on.
Since we also want this project finished, we also went ahead and started designing a high-fidelity sample design of the homepage to give us direction that can serve as a theme to be applied on the low-fidelity design later on.
Design Challenge
Although the company has a logo for their company, it’s the only design asset that seems to be used consistently by the client for their documents. This means in this project, we will need to create a design system from scratch to make sure that the typography as well as the colors used are aligned throughout the project.
Design System
![](https://framerusercontent.com/images/zYL4DngdOLmRPWtf0VAsHav63tM.png)
Due to the constraints stated above, we created a design system inspired by the company logo and translated that into a design system, which lead to the use of different shades of greens in the shape of leaves. According to the client, this signifies that their products they offer are natural, extracted from nature, and are of high quality.
After which, we then moved forward and tried to match the text used by the client on the logo. However, we believe the original logo used a common font, and we believe that a less common font should be used to express the uniqueness of the company. So we opted to use a similar but less common font from Google as the font to use for the website.
Development Handoff
After developing the design system for this project and getting approval from the client, we then updated the design of the whole website to a high-fidelity design. The handoff of the website was fairly simple and with all the assets available to their disposal.
Phase 2: Web Development (December - March)
This is the detailed approach done in the development phase of the project. For this project, we will be using custom code to develop the website with the latest tools and development languages to develop this website to ensure that this website loads fast with clean code. During the process of development, we continued to have meetings with the client to test and to gather feedback to address bugs and to fix and improve the user experience.
Initial Setup
First, we set up a new React project using the Create React App. This gave us a solid foundation with a pre-configured build process and development server.
Component Structure
We analyzed the design prototypes and broke them down into reusable React components. This included components like Header, Footer, Navigation, and various content sections specific to the site's needs.
Styling
We chose to use CSS modules for styling to keep styles scoped to individual components. We created a global styles file for common elements and typography, ensuring consistency across the site.
Responsive Design
We implemented a mobile-first approach, using CSS flexbox and grid for layouts, and media queries to adjust styles for larger screens.
State Management
For this project, we used React's built-in useState and useContext hooks for state management, as the complexity didn't warrant a more robust solution like Redux.
Routing
We implemented React Router for handling different pages and navigation within the single-page application.
Form Development
For the form that sends an email for each new submission, we created a custom React component. Here's a simplified version of how we structured it:
import React, { useState } from 'react';
import axios from 'axios';
const ContactForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('/api/send-email', formData);
alert('Email sent successfully!');
} catch (error) {
console.error('Error sending email:', error);
alert('Failed to send email. Please try again.');
}
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<form onSubmit={handleSubmit}>
{/* Form fields */}
<button type="submit">Send</button>
</form>
);
};
export default ContactForm;
We then set up a server-side endpoint (using Node.js and Express) to handle the email sending functionality using a library like Nodemailer.
Google Analytics Integration
To integrate Google Analytics, we added the following script to the `public/index.html` file:
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_GA_TRACKING_ID');
</script>
We also created a custom hook to track page views:
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export const usePageTracking = () => {
const location = useLocation();
useEffect(() => {
window.gtag('config', 'YOUR_GA_TRACKING_ID', { page_path: location.pathname });
}, [location]);
};
This hook was then used in the main App component to track page views across the site.
Cookie Banner
For the cookie banner, we created a reusable component that appears when a user first visits the site
import React, { useState, useEffect } from 'react';
const CookieBanner = () => {
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
const consent = localStorage.getItem('cookieConsent');
if (!consent) {
setShowBanner(true);
}
}, []);
const acceptCookies = () => {
localStorage.setItem('cookieConsent', 'true');
setShowBanner(false);
};
if (!showBanner) return null;
return (
<div className="cookie-banner">
<p>This website uses cookies to improve your experience.</p>
<button onClick={acceptCookies}>Accept</button>
</div>
);
};
export default CookieBanner;
This component was then included in the main App component to appear on all pages.
Phase 3: Training, Launch and Turnover (April)
Testing
Throughout the development process, we wrote unit tests for individual components using Jest and React Testing Library. We also performed manual testing across different browsers and devices to ensure compatibility and responsiveness.
Optimization
Before deployment, we optimized the site by lazy-loading components where appropriate, compressing images, and ensuring efficient bundle sizes.
Deployment
Finally, we built the production version of the site and deployed it to a hosting platform, setting up proper redirects and ensuring HTTPS was enabled for security.
Post-Launch Training
After successfully launching the website, our team focused on ensuring a smooth transition and empowering the client to manage their new digital asset effectively.
Client Training and Handover: We organized a comprehensive training session for the client's team. This session covered:
Presentation of the website
Understanding and interpreting Google Analytics data
We prepared a detailed user manual and sent the presentation materials for future reference. These resources were well-received by the client, who appreciated the thorough documentation.
Results
After three months, the website demonstrated significant impact:
Overall Traffic Growth: 71% increase in monthly traffic in 3 months.
Website Performance: Performance averages 94% encompassing web speed, accessibility, best practices, and SEO.
Device Usage: About 67% of visitors use desktop showcasing strong desktop optimization and indicates that the website is being used in a professional setting or using a larger screen. While there is a 32.7% and 0.3% of visitors use mobile and tablet respectively.
Top Performing Pages: The top three pages of the website the Homepage, About Us, and Products Page. This indicates effective SEO driving traffic to homepage with a high-performing about us page that indicates good interest in brand story, and products.
Client Feedback
The client was extremely satisfied with both the new website and the results it produced. They particularly praised:
The intuitive design and user experience
The comprehensive training and support provided by our team
The tangible improvements in site performance and user engagement
Conclusion
In conclusion, the website redesign and development project was a success, meeting the client's expectations. The analytical data demonstrates significant decent numbers in performance indicators, and has accomplished objectives to create an online presence and have a seamless inquiry from site visitors. Our team is committed to providing ongoing support and optimization to ensure the website continues to deliver value and drive business results for the client.
About Project
Project Name: Cornell Ingredients Corporation Website
Project Duration: November 2023 - April 2024
Services: Web Development, Content with AI
Introduction
Cornell Ingredients Corporation (CIC), as a distinguished food ingredients company, needs to have a digital presence that speaks to your market position, advantages, and the quality of the products they offer. Based on the preliminary review of the client’s needs and their competitor’s website, the goal of the project is to accentuate CIC’s unique strengths such as responsive technical and after sales support, superior market knowledge, and your promise of fast and easy transactions.
Project Objective
The main objective of this website will be to enhance brand recognition and provide a seamless contact experience for potential clients.
Process
Phase 1: Planning and Design Phase
During this phase, we collaborated with the client to plan and design the website by having the client supervise the progress and critique the designs while the team creates suggestions based on the initial plans as well as feedback from the client. During this phase, the team, as well as the clients used Figma to create the website design and navigation.
Competitive Analysis
The research phase of the project started with taking a look at company websites of similar industries and offerings and taking note of the pros and cons of each website. These websites were provided by the client.
Disclaimer: We won’t be mentioning the names of the websites provided, so the names will be renamed as “A” and “B”
Website A
Pros
Highlights their products well on the home page
Clear navigation to key pages (products, about us, blogs, contact us)
Site has a cookie banner to comply with EU privacy guidelines
Cons
Aesthetically looks dated, design feels inconsistent and cluttered
Blogs aren’t being updated
Some texts are hard to read
Website B
Pros
Clearly defined the benefits of availing their products and services
Simple design and clear navigation
Clean design with little to no clutter
Cons
Lacks details, have to download brochure to learn more about products, some offerings don’t have brochures
Contact is too generalized without specifying the inquiry
No cookie banner
After which, we redefined what needs to be done to create a website that addresses the cons of the two websites and improve upon the pros listed on both sites.
Hence, for Cornell Ingredients, the website must have:
Have clean, modern design with clear navigation, and readable texts, that aligns with their brand guidelines and assets
Clear definition of who the company serves and what products they offer
Have a privacy policy and a cookie banner to comply with EU Data Privacy Standards
Sitemap
In order to know the pages we need to make, we created a sitemap to serve as a guide to what pages we need to create.
![](https://framerusercontent.com/images/rVLiyxmF4BBJlKTEOWGMGoHAQgM.png)
The site map of the website are as follows:
Homepage - The website’s homepage
Products - A list of products provided by the client
Product Page - A page which contains a product picture, product description and a CTA to the contact us page
About Us - Page that talks about the company
Contact Us - Page that contains the contact us form
Privacy Policy - The page that contains the data privacy policy of the website
Since we already know the core pages, we also need to know what details should be contained within each of these pages. And then created the sitemap below
![](https://framerusercontent.com/images/f1NaKmcl3Sl6HXRBNGg6T51evBg.png)
Changes in the Sitemap
As we were developing the sitemap and was able to obtain some documents and feedback from the client, made some changes to the sitemap:
Product Pages - we added a list of applications of the product below the product image and description.
Contact Page (Forms) - to make sure that inquiries are specified, we created three (3) types of inquiries
Consult about Ingredients - inquiries about the company’s products
General Inquiry - general inquiries to the company
Careers - inquiries on job applications posted by the company
Contact Page (Facilities) - We also added the contact information of the client’s office and warehouse so that they may be easily located by current and potential customers.
Prototype Design
For the prototype design, we used Figma to create the design of all the pages of the website. In creating the prototype, we focused on creating a low-mid fidelity design so that we can focus on laying out the copy and the navigation of the website and discuss them with our client for feedback.
While doing this, we also developed the design of the website on different screen sizes as a guide for the developers when developing the responsiveness of the website later on.
Since we also want this project finished, we also went ahead and started designing a high-fidelity sample design of the homepage to give us direction that can serve as a theme to be applied on the low-fidelity design later on.
Design Challenge
Although the company has a logo for their company, it’s the only design asset that seems to be used consistently by the client for their documents. This means in this project, we will need to create a design system from scratch to make sure that the typography as well as the colors used are aligned throughout the project.
Design System
![](https://framerusercontent.com/images/zYL4DngdOLmRPWtf0VAsHav63tM.png)
Due to the constraints stated above, we created a design system inspired by the company logo and translated that into a design system, which lead to the use of different shades of greens in the shape of leaves. According to the client, this signifies that their products they offer are natural, extracted from nature, and are of high quality.
After which, we then moved forward and tried to match the text used by the client on the logo. However, we believe the original logo used a common font, and we believe that a less common font should be used to express the uniqueness of the company. So we opted to use a similar but less common font from Google as the font to use for the website.
Development Handoff
After developing the design system for this project and getting approval from the client, we then updated the design of the whole website to a high-fidelity design. The handoff of the website was fairly simple and with all the assets available to their disposal.
Phase 2: Web Development (December - March)
This is the detailed approach done in the development phase of the project. For this project, we will be using custom code to develop the website with the latest tools and development languages to develop this website to ensure that this website loads fast with clean code. During the process of development, we continued to have meetings with the client to test and to gather feedback to address bugs and to fix and improve the user experience.
Initial Setup
First, we set up a new React project using the Create React App. This gave us a solid foundation with a pre-configured build process and development server.
Component Structure
We analyzed the design prototypes and broke them down into reusable React components. This included components like Header, Footer, Navigation, and various content sections specific to the site's needs.
Styling
We chose to use CSS modules for styling to keep styles scoped to individual components. We created a global styles file for common elements and typography, ensuring consistency across the site.
Responsive Design
We implemented a mobile-first approach, using CSS flexbox and grid for layouts, and media queries to adjust styles for larger screens.
State Management
For this project, we used React's built-in useState and useContext hooks for state management, as the complexity didn't warrant a more robust solution like Redux.
Routing
We implemented React Router for handling different pages and navigation within the single-page application.
Form Development
For the form that sends an email for each new submission, we created a custom React component. Here's a simplified version of how we structured it:
import React, { useState } from 'react';
import axios from 'axios';
const ContactForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('/api/send-email', formData);
alert('Email sent successfully!');
} catch (error) {
console.error('Error sending email:', error);
alert('Failed to send email. Please try again.');
}
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<form onSubmit={handleSubmit}>
{/* Form fields */}
<button type="submit">Send</button>
</form>
);
};
export default ContactForm;
We then set up a server-side endpoint (using Node.js and Express) to handle the email sending functionality using a library like Nodemailer.
Google Analytics Integration
To integrate Google Analytics, we added the following script to the `public/index.html` file:
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_GA_TRACKING_ID');
</script>
We also created a custom hook to track page views:
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export const usePageTracking = () => {
const location = useLocation();
useEffect(() => {
window.gtag('config', 'YOUR_GA_TRACKING_ID', { page_path: location.pathname });
}, [location]);
};
This hook was then used in the main App component to track page views across the site.
Cookie Banner
For the cookie banner, we created a reusable component that appears when a user first visits the site
import React, { useState, useEffect } from 'react';
const CookieBanner = () => {
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
const consent = localStorage.getItem('cookieConsent');
if (!consent) {
setShowBanner(true);
}
}, []);
const acceptCookies = () => {
localStorage.setItem('cookieConsent', 'true');
setShowBanner(false);
};
if (!showBanner) return null;
return (
<div className="cookie-banner">
<p>This website uses cookies to improve your experience.</p>
<button onClick={acceptCookies}>Accept</button>
</div>
);
};
export default CookieBanner;
This component was then included in the main App component to appear on all pages.
Phase 3: Training, Launch and Turnover (April)
Testing
Throughout the development process, we wrote unit tests for individual components using Jest and React Testing Library. We also performed manual testing across different browsers and devices to ensure compatibility and responsiveness.
Optimization
Before deployment, we optimized the site by lazy-loading components where appropriate, compressing images, and ensuring efficient bundle sizes.
Deployment
Finally, we built the production version of the site and deployed it to a hosting platform, setting up proper redirects and ensuring HTTPS was enabled for security.
Post-Launch Training
After successfully launching the website, our team focused on ensuring a smooth transition and empowering the client to manage their new digital asset effectively.
Client Training and Handover: We organized a comprehensive training session for the client's team. This session covered:
Presentation of the website
Understanding and interpreting Google Analytics data
We prepared a detailed user manual and sent the presentation materials for future reference. These resources were well-received by the client, who appreciated the thorough documentation.
Results
After three months, the website demonstrated significant impact:
Overall Traffic Growth: 71% increase in monthly traffic in 3 months.
Website Performance: Performance averages 94% encompassing web speed, accessibility, best practices, and SEO.
Device Usage: About 67% of visitors use desktop showcasing strong desktop optimization and indicates that the website is being used in a professional setting or using a larger screen. While there is a 32.7% and 0.3% of visitors use mobile and tablet respectively.
Top Performing Pages: The top three pages of the website the Homepage, About Us, and Products Page. This indicates effective SEO driving traffic to homepage with a high-performing about us page that indicates good interest in brand story, and products.
Client Feedback
The client was extremely satisfied with both the new website and the results it produced. They particularly praised:
The intuitive design and user experience
The comprehensive training and support provided by our team
The tangible improvements in site performance and user engagement
Conclusion
In conclusion, the website redesign and development project was a success, meeting the client's expectations. The analytical data demonstrates significant decent numbers in performance indicators, and has accomplished objectives to create an online presence and have a seamless inquiry from site visitors. Our team is committed to providing ongoing support and optimization to ensure the website continues to deliver value and drive business results for the client.
About Project
Project Name: Cornell Ingredients Corporation Website
Project Duration: November 2023 - April 2024
Services: Web Development, Content with AI
Introduction
Cornell Ingredients Corporation (CIC), as a distinguished food ingredients company, needs to have a digital presence that speaks to your market position, advantages, and the quality of the products they offer. Based on the preliminary review of the client’s needs and their competitor’s website, the goal of the project is to accentuate CIC’s unique strengths such as responsive technical and after sales support, superior market knowledge, and your promise of fast and easy transactions.
Project Objective
The main objective of this website will be to enhance brand recognition and provide a seamless contact experience for potential clients.
Process
Phase 1: Planning and Design Phase
During this phase, we collaborated with the client to plan and design the website by having the client supervise the progress and critique the designs while the team creates suggestions based on the initial plans as well as feedback from the client. During this phase, the team, as well as the clients used Figma to create the website design and navigation.
Competitive Analysis
The research phase of the project started with taking a look at company websites of similar industries and offerings and taking note of the pros and cons of each website. These websites were provided by the client.
Disclaimer: We won’t be mentioning the names of the websites provided, so the names will be renamed as “A” and “B”
Website A
Pros
Highlights their products well on the home page
Clear navigation to key pages (products, about us, blogs, contact us)
Site has a cookie banner to comply with EU privacy guidelines
Cons
Aesthetically looks dated, design feels inconsistent and cluttered
Blogs aren’t being updated
Some texts are hard to read
Website B
Pros
Clearly defined the benefits of availing their products and services
Simple design and clear navigation
Clean design with little to no clutter
Cons
Lacks details, have to download brochure to learn more about products, some offerings don’t have brochures
Contact is too generalized without specifying the inquiry
No cookie banner
After which, we redefined what needs to be done to create a website that addresses the cons of the two websites and improve upon the pros listed on both sites.
Hence, for Cornell Ingredients, the website must have:
Have clean, modern design with clear navigation, and readable texts, that aligns with their brand guidelines and assets
Clear definition of who the company serves and what products they offer
Have a privacy policy and a cookie banner to comply with EU Data Privacy Standards
Sitemap
In order to know the pages we need to make, we created a sitemap to serve as a guide to what pages we need to create.
![](https://framerusercontent.com/images/rVLiyxmF4BBJlKTEOWGMGoHAQgM.png)
The site map of the website are as follows:
Homepage - The website’s homepage
Products - A list of products provided by the client
Product Page - A page which contains a product picture, product description and a CTA to the contact us page
About Us - Page that talks about the company
Contact Us - Page that contains the contact us form
Privacy Policy - The page that contains the data privacy policy of the website
Since we already know the core pages, we also need to know what details should be contained within each of these pages. And then created the sitemap below
![](https://framerusercontent.com/images/f1NaKmcl3Sl6HXRBNGg6T51evBg.png)
Changes in the Sitemap
As we were developing the sitemap and was able to obtain some documents and feedback from the client, made some changes to the sitemap:
Product Pages - we added a list of applications of the product below the product image and description.
Contact Page (Forms) - to make sure that inquiries are specified, we created three (3) types of inquiries
Consult about Ingredients - inquiries about the company’s products
General Inquiry - general inquiries to the company
Careers - inquiries on job applications posted by the company
Contact Page (Facilities) - We also added the contact information of the client’s office and warehouse so that they may be easily located by current and potential customers.
Prototype Design
For the prototype design, we used Figma to create the design of all the pages of the website. In creating the prototype, we focused on creating a low-mid fidelity design so that we can focus on laying out the copy and the navigation of the website and discuss them with our client for feedback.
While doing this, we also developed the design of the website on different screen sizes as a guide for the developers when developing the responsiveness of the website later on.
Since we also want this project finished, we also went ahead and started designing a high-fidelity sample design of the homepage to give us direction that can serve as a theme to be applied on the low-fidelity design later on.
Design Challenge
Although the company has a logo for their company, it’s the only design asset that seems to be used consistently by the client for their documents. This means in this project, we will need to create a design system from scratch to make sure that the typography as well as the colors used are aligned throughout the project.
Design System
![](https://framerusercontent.com/images/zYL4DngdOLmRPWtf0VAsHav63tM.png)
Due to the constraints stated above, we created a design system inspired by the company logo and translated that into a design system, which lead to the use of different shades of greens in the shape of leaves. According to the client, this signifies that their products they offer are natural, extracted from nature, and are of high quality.
After which, we then moved forward and tried to match the text used by the client on the logo. However, we believe the original logo used a common font, and we believe that a less common font should be used to express the uniqueness of the company. So we opted to use a similar but less common font from Google as the font to use for the website.
Development Handoff
After developing the design system for this project and getting approval from the client, we then updated the design of the whole website to a high-fidelity design. The handoff of the website was fairly simple and with all the assets available to their disposal.
Phase 2: Web Development (December - March)
This is the detailed approach done in the development phase of the project. For this project, we will be using custom code to develop the website with the latest tools and development languages to develop this website to ensure that this website loads fast with clean code. During the process of development, we continued to have meetings with the client to test and to gather feedback to address bugs and to fix and improve the user experience.
Initial Setup
First, we set up a new React project using the Create React App. This gave us a solid foundation with a pre-configured build process and development server.
Component Structure
We analyzed the design prototypes and broke them down into reusable React components. This included components like Header, Footer, Navigation, and various content sections specific to the site's needs.
Styling
We chose to use CSS modules for styling to keep styles scoped to individual components. We created a global styles file for common elements and typography, ensuring consistency across the site.
Responsive Design
We implemented a mobile-first approach, using CSS flexbox and grid for layouts, and media queries to adjust styles for larger screens.
State Management
For this project, we used React's built-in useState and useContext hooks for state management, as the complexity didn't warrant a more robust solution like Redux.
Routing
We implemented React Router for handling different pages and navigation within the single-page application.
Form Development
For the form that sends an email for each new submission, we created a custom React component. Here's a simplified version of how we structured it:
import React, { useState } from 'react';
import axios from 'axios';
const ContactForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('/api/send-email', formData);
alert('Email sent successfully!');
} catch (error) {
console.error('Error sending email:', error);
alert('Failed to send email. Please try again.');
}
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<form onSubmit={handleSubmit}>
{/* Form fields */}
<button type="submit">Send</button>
</form>
);
};
export default ContactForm;
We then set up a server-side endpoint (using Node.js and Express) to handle the email sending functionality using a library like Nodemailer.
Google Analytics Integration
To integrate Google Analytics, we added the following script to the `public/index.html` file:
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_GA_TRACKING_ID');
</script>
We also created a custom hook to track page views:
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export const usePageTracking = () => {
const location = useLocation();
useEffect(() => {
window.gtag('config', 'YOUR_GA_TRACKING_ID', { page_path: location.pathname });
}, [location]);
};
This hook was then used in the main App component to track page views across the site.
Cookie Banner
For the cookie banner, we created a reusable component that appears when a user first visits the site
import React, { useState, useEffect } from 'react';
const CookieBanner = () => {
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
const consent = localStorage.getItem('cookieConsent');
if (!consent) {
setShowBanner(true);
}
}, []);
const acceptCookies = () => {
localStorage.setItem('cookieConsent', 'true');
setShowBanner(false);
};
if (!showBanner) return null;
return (
<div className="cookie-banner">
<p>This website uses cookies to improve your experience.</p>
<button onClick={acceptCookies}>Accept</button>
</div>
);
};
export default CookieBanner;
This component was then included in the main App component to appear on all pages.
Phase 3: Training, Launch and Turnover (April)
Testing
Throughout the development process, we wrote unit tests for individual components using Jest and React Testing Library. We also performed manual testing across different browsers and devices to ensure compatibility and responsiveness.
Optimization
Before deployment, we optimized the site by lazy-loading components where appropriate, compressing images, and ensuring efficient bundle sizes.
Deployment
Finally, we built the production version of the site and deployed it to a hosting platform, setting up proper redirects and ensuring HTTPS was enabled for security.
Post-Launch Training
After successfully launching the website, our team focused on ensuring a smooth transition and empowering the client to manage their new digital asset effectively.
Client Training and Handover: We organized a comprehensive training session for the client's team. This session covered:
Presentation of the website
Understanding and interpreting Google Analytics data
We prepared a detailed user manual and sent the presentation materials for future reference. These resources were well-received by the client, who appreciated the thorough documentation.
Results
After three months, the website demonstrated significant impact:
Overall Traffic Growth: 71% increase in monthly traffic in 3 months.
Website Performance: Performance averages 94% encompassing web speed, accessibility, best practices, and SEO.
Device Usage: About 67% of visitors use desktop showcasing strong desktop optimization and indicates that the website is being used in a professional setting or using a larger screen. While there is a 32.7% and 0.3% of visitors use mobile and tablet respectively.
Top Performing Pages: The top three pages of the website the Homepage, About Us, and Products Page. This indicates effective SEO driving traffic to homepage with a high-performing about us page that indicates good interest in brand story, and products.
Client Feedback
The client was extremely satisfied with both the new website and the results it produced. They particularly praised:
The intuitive design and user experience
The comprehensive training and support provided by our team
The tangible improvements in site performance and user engagement
Conclusion
In conclusion, the website redesign and development project was a success, meeting the client's expectations. The analytical data demonstrates significant decent numbers in performance indicators, and has accomplished objectives to create an online presence and have a seamless inquiry from site visitors. Our team is committed to providing ongoing support and optimization to ensure the website continues to deliver value and drive business results for the client.
You might like these
You might like these
![](https://framerusercontent.com/images/m2XGr9JenSfC0OWXcOmXUhljE.jpg)
Prompting the Future: How Generative AI is Redefining Innovation
Katrina Gayao
Jun 19, 2024
![](https://framerusercontent.com/images/T2F4m576j24Xhrzj7BL4t2DL7o.jpg)
AI Solutions for Innovative Australian Startup
TEAM IOL
Jun 19, 2024
![](https://framerusercontent.com/images/3fAiCOpmiFUYL7vO9rGww5MrpGQ.png)
ARCS: Advanced Robust Cooperative System
TEAM IOL
Jun 17, 2024
![](https://framerusercontent.com/images/5LkB7GsOvYIFNDqTUON7C2zzgk.png)
VIVITA PH Website Redesign: Igniting Creative Minds, Shaping Visionary Futures
TEAM IOL
Jun 16, 2024