About Project

Project Name: Cornell Ingredients Corporation Website
Project Duration: November 2023 - April 2024
Services: Web Development, Content with AI

View Project

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:

1. Have clean, modern design with clear navigation, and readable texts, that aligns with their brand guidelines and assets

2. Clear definition of who the company serves and what products they offer

3. 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. 

The site map of the website are as follows:

1. Homepage - The website’s homepage

2. 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

3. About Us - Page that talks about the company

4. Contact Us - Page that contains the contact us form 

5. 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

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:

1. Product Pages - we added a list of applications of the product below the product image and description.

2. 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

3. 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

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:

1. Presentation of the website

2. 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:

1. Overall Traffic Growth: 71% increase in monthly traffic in 3 months.

2. Website Performance: Performance averages 94% encompassing web speed, accessibility, best practices, and SEO.

3. 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.

4. 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:

1. The intuitive design and user experience

2. The comprehensive training and support provided by our team

3. 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.