Cornell Ingredients Website

Overview

Cornell Ingredients Corporation is a Philippine-based food ingredients distributor with over 36 years of experience, 500+ clients, and a network of 17 global suppliers delivering more than 3,000 orders annually. They carry a catalog of 50+ specialty ingredients: starches, food acids, gums, phosphates, non-dairy creamers, oat powders, cloudifiers, and more and hold an ISO 9001 certification that speaks to their operational standards.

What they did not have, until this project, was a website.

CIC came to us needing a first-time digital presence built entirely from scratch: no existing site to redesign, no established web design language, no digital assets beyond a company logo. My responsibility as Lead UI/UX Designer was to define who the site needed to serve, what it needed to say, and how it should look and feel then translate all of that into a design system and a set of high-fidelity prototypes ready for development handoff.

The Design Problem

For a B2B company in the food ingredients space, a website serves a fundamentally different purpose than a consumer-facing site. The audience isn't browsing casually they're food manufacturers, product developers, and procurement professionals who arrive with a specific business need: finding the right ingredient for a formulation, understanding whether this supplier can meet their requirements, and figuring out how to start a conversation.

The core design question: how do you build a site that establishes credibility and communicates product breadth to a professional audience, while making the path from "I found this company" to "I've made an inquiry" as short and frictionless as possible?

There was a second layer to this challenge specific to CIC's situation: we were building their brand's visual identity from scratch alongside the site. The logo existed, but everything else, the color system, the typography, the tone, needed to be created and then immediately applied coherently across an entire website. That's a different kind of design problem than working within an established brand.

Research: Learning from the Competition

Before any design decisions were made, I conducted a competitive analysis of two B2B ingredients websites provided by the client, anonymized here as Website A and Website B, to identify what the category was doing well and where consistent gaps existed.

Website A surfaced its products clearly on the homepage and had sensible navigation, but the design felt dated and inconsistent. Text legibility was a problem in places, and their blog section had gone dormant, undermining the credibility the site was otherwise trying to build.

Website B took the opposite approach: clean and minimal, with a clear articulation of product benefits. But it buried the details. Visitors who wanted to learn about specific products had to download a brochure, and not all products even had one. The contact form was overly generic, capturing inquiries without enough specificity to be useful for the sales team. And like Website A, it had no cookie compliance banner.

These two audits made the design priorities for Cornell Ingredients clear. The site needed to sit between these two approaches: as visually clean and benefit-led as Website B, but with the product depth that Website A at least attempted, all while fixing the friction points both had in common. Specifically, the site needed clean, modern design with consistent branding and readable typography; clear communication of who CIC serves and what they offer; detailed product pages that don't require a brochure download to get the information; a contact system that captures structured, specific inquiries; and full cookie consent compliance.

Information Architecture

With research complete and design principles established, I mapped out the full site structure before touching any visual design. For a B2B site with a focused scope, getting the IA right was the difference between a site visitors could navigate efficiently and one they'd abandon out of frustration.

The initial sitemap was deliberately lean: Homepage, Products (with individual product pages), About Us, Contact Us, and Privacy Policy. This restraint was intentional, a food ingredients company's website doesn't need to be complex. It needs to be thorough where it matters (products and contact) and clear everywhere else.

As the project developed and I gathered more input from the client, the structure evolved in two meaningful ways. First, individual product pages gained a dedicated applications section below the product description, a decision made after recognizing that procurement professionals don't just want to know what an ingredient is, they want to know what problems it solves and what formulations it fits. Showing applications directly on the product page removes a key friction point in their evaluation process.

Second, the contact page was redesigned around three distinct inquiry types rather than a single generic form: Consult about Ingredients for product-specific questions, General Inquiry for everything else, and Careers for job applicants. This decision was driven by a simple insight from the competitive analysis, a generalized contact form serves no one well. It puts the burden on the sales team to triage every submission, and it gives inquirers no signal that their specific question has been understood. Structured forms do both jobs better.

Building the Design System From Scratch

The most foundational challenge on this project was also the most creatively interesting one: Cornell Ingredients had only a logo to work with. No brand guidelines, no established color palette, no typography decisions. The entire visual language of the company's first digital presence had to be derived from a single asset.

I used the logo as my starting point and worked outward. The logo's green tones, representative, according to the client, of the natural, plant-derived quality of their ingredients, became the anchor for a full color system built on multiple shades of green, evoking organic freshness while maintaining the professional restraint appropriate for a B2B context. The leaf-inspired forms in the logo informed the system's aesthetic vocabulary without being literally reproduced across the site.

For typography, I identified that the logo appeared to use a relatively common font, and I made a deliberate choice to move away from it. A less generic typeface from Google Fonts — one with a similar character but a more distinctive personality, was selected to give Cornell Ingredients a visual voice that felt owned rather than borrowed. This decision helped the brand feel more distinctive in a category where many sites default to interchangeable industrial aesthetics.

The completed design system covered color tokens, typographic scales, iconography (the four "Cornell Experience" pillars: Service, Integrity, Commitment, Character, each paired with a custom icon), button styles, form elements, and card components for the product catalog. Having this system fully defined before moving into high-fidelity design meant every page of the site was visually coherent from the start, and the developer handoff was clean and unambiguous.

Design Process

Low-to-Mid Fidelity Wireframes

I began with low-to-mid fidelity wireframes focused on layout and content hierarchy rather than visual polish. Working at this fidelity level for client review was a deliberate choice, it kept conversations focused on structure and navigation rather than getting derailed by color or font preferences before the fundamentals were settled. Wireframes were developed across multiple screen sizes simultaneously, giving the development team responsive layout references from the outset.

High-Fidelity Homepage First

Rather than completing all wireframes before moving to high fidelity, I designed the homepage to high fidelity early in the process. This gave the whole project a clear visual direction and served as a shared reference point: client, design team, and developers could all see what the finished product would feel like before committing to it fully. The homepage established the design language that was then applied consistently across all remaining pages.

Iterative Client Collaboration

The design process involved active client participation throughout, not just sign-off at key milestones. The client reviewed work in Figma alongside the team, and feedback from each session shaped subsequent iterations. This collaborative rhythm meant the final design reflected genuine alignment rather than a series of formal approvals.

Key Design Decisions

Homepage as a Credibility Anchor For a company without an existing web presence, the homepage needed to do significant trust-building work. I structured it to establish CIC's credentials immediately, the headline communicates the business ("High-Quality Ingredients and Solutions for the Food Industry"), followed by the company's value proposition in plain language, then a "The Cornell Experience" section that articulates their four core values through iconography and concise copy. The "Reach" section, 36 years of experience, 500+ clients, 17 suppliers, 3,000+ annual orders, converts into a stat dashboard that communicates scale at a glance. Together these elements give a first-time visitor everything they need to quickly assess whether CIC is a supplier worth talking to.

Product Pages Designed for Procurement Each product page leads with the product image and description, then surfaces its applications directly below, the most practically useful piece of information for a food manufacturer evaluating a new ingredient. The clear CTA directing users to the contact page from individual product pages creates a straight line from product discovery to inquiry, reducing the navigation steps a professional user would otherwise need to take.

Contact Page as a Conversion Tool The three-part contact form structure was one of the highest-impact UX decisions on the project. By separating ingredient consultations from general inquiries from career applications, the form signals to each type of visitor that their specific need has been anticipated and that their inquiry will reach the right person. It also gives CIC's team cleaner, pre-sorted leads rather than an undifferentiated inbox.

ISO 9001 Certification as a Trust Signal The client's ISO 9001 certification is a meaningful credential in the food ingredients space, it signals operational quality and consistency to the procurement professionals who are the site's primary audience. I gave it explicit visual placement in the footer, where it would appear on every page, rather than burying it in the About Us section.

Results

Three months after launch, the site delivered measurable outcomes across every tracked dimension. Monthly traffic had grown 71%, reflecting both the impact of finally having an indexed web presence and the effectiveness of the SEO foundations built into the design. The site's overall performance score averaged 94% across web speed, accessibility, best practices, and SEO, a result of the clean, optimized build that the design system enabled. The 67% desktop usage distribution confirmed the site was reaching its intended professional audience, who were browsing in work settings on larger screens. The three highest-traffic pages: Homepage, About Us, and Products, mapped precisely to the intended user journey: discover the company, establish trust, explore the catalog.

The client specifically cited the intuitive design and user experience as a standout in their post-launch feedback.

Reflection

Cornell Ingredients was the most design-foundational of my projects in this period, not just designing screens, but constructing the visual identity of a company's first digital presence from a single logo asset. The constraint of building a design system from scratch rather than inheriting one turned out to be an opportunity: it forced deliberate decisions about what the brand should feel like, not just what it should look like. The result is a site that's grown consistently since launch and serves as the company's primary business development tool which, for a B2B company entering the digital space for the first time, is exactly what it needed to be.