Work | Pure Source Foods
Skip to content
Resume Work

Product Design | Design Systems

Authentic Design for Pure Source Foods

Creating a scalable, engaging digital experience.

Pure Source Foods homepage mockup on mac

The Solution

Final Product

The end result was a visually compelling, user-centered website that better reflected Pure Source Foods' ethical values and modern branding. The solution was well-received by stakeholders, with only minimal changes needed, highlighting the success of aligning goals early in the process and crafting a cohesive design system.

Engaging Color Scheme

The color scheme was designed based on the mood board created during the discovery phase, choosing light background tones with earthy, organic hues. This not only supported the desired aesthetic but also allowed the brand to communicate its sustainable, authentic message while ensuring readability and visual appeal.

 

Primary

#70200c

#f8f3eb

Secondary

#4a4b31

#cfad7e

Accessibility

I tackled accessibility through a holistic approach. The color scheme is well within WCAG limits, and images were given appropriate, thoughtful alt text. In addition to this, I optimized images, deferred javascript calls, and addressed other factors that affected page speed and performance.

Accessibility

a11y colors for pure source red text
a11y colors for Pure Source
Assorted Pure Source Foods web page mockups on iphone
Typeface

I selected a gritty, authentic typeface that resonated with the brand's earthy, down-to-earth image. This typography reinforced the company's values of ethical sourcing and their involvement in farming communities, while giving the site a modern, yet grounded feel that appealed to their target audience.

Pure Source Brand Components
Design System

I created an adaptable design system, ensuring brand consistency and simplicity for client updates.

UI components included buttons, CTAs, hero sections, feature sections, etc.

Special modules included an interactive map, animated product elements, animated title reveals, etc.

Database elements included product pages and listing as well as story pages and directory page.

Cashew Butter Product Page
Stories Listing Page
About-Us-_-Red-River-Foods0909009 (1)
Products Feature

OVERVIEW

Sustainable Partnerships for the Future

For over 40 years, Pure Source Foods has collaborated directly with farming communities worldwide, offering hands-on training to enhance crop quality and support improved livelihoods. By focusing on sustainability and care for people and the planet, it is helping to build a resilient food system.

Contributions

Product Design: I managed end-to-end design on this project. I used Figma to craft mockup options, Hubspot CMS to code (HTML, CSS, Javascript) design system components, and incorporate interaction animations.

Design Systems: I created an adaptable design system themed for their new visual identity, and ready for use across site and landing pages. 

UX Strategy: Collaborating cross-functionally with marketing, PM, and stakeholders, we established architecture and theming based on user personas and testing from the client side.

High Level Goals

Create an accessible experience that reflects Pure Source’s ethical, sustainable sourcing values clothed in a fresh, authentically branded, engaging visual identity. 

Improve user engagement, increase conversions, and provide a scalable design system that can be easily managed by the client moving forward. 

Role

Senior Designer

Timeline

5 Months

Responsibilities

Product Design
Design Systems
UX Strategy

Collaboration

Project Manager
Client Marketing Team
Stakeholders

The Problem

Poor Flexibility, Design, and User Engagement

The website was outdated and lacked the flexibility for growth. It didn’t reflect the modern, ethical brand image Pure Source Foods wanted to communicate. Poor site architecture and dated design led to low conversions and poor SEO. The absence of a design system or cohesive branding made the site feel disjointed and unengaging for users.

Key Flaws

  Dated, static web experience

  Poor UX, architecture

 Lack of design system

The SOLUTION

Organic, Earthy & Authentic

Pure Source needed a refined visual identity that was engaging, and strayed from their static, stagnant past branding. We wanted to ensure that their devotion to sustainability was expressed throughout the site with sincere messaging, bold visuals, and a scalable design system.

Project Moodboard

Moodboard

The PROCESS

Discovery

During the discovery phase, I led onboarding sessions and asked strategic questions to identify the client’s pain points, goals, and user personas. This helped clarify their needs and aligned the team's vision with the project’s objectives, ensuring the design solutions were effective and met user expectations.

"Can you describe the main issues or shortcomings with your current website that you'd like to address through this redesign?"

"What are the primary goals or outcomes you wish to achieve with the new website?"

The Process

User Research

I collaborated with Pure Source Foods' project managers and marketing team to identify target audiences, brand differentiators, and opportunities to enhance user engagement. We also gathered feedback on the previous site’s usability challenges, branding inconsistencies, and conversion roadblocks to inform a more cohesive and conversion-driven redesign.

Persona 1

Health-Conscious Consumer

Age: 29 years old
Location: Huntington, NY
Social Media: Instagram, Pinterest
Communication Preference: Email & Blog Content
Needs: Transparency on ingredients, sustainability info, and nutritional benefits.

Persona 2

Procurement Manager

Age: 49 years old
Location: Chicago, IL
Social Media: LinkedIn
Communication Preference: Business Email & Industry Reports
Challenge: Clear product specs, bulk ordering options, and certifications.

Persona 3

Food Entrepreneur

Age: 35 years old
Location: Los Angeles, CA
Social Media: TikTok, YouTube
Communication Preference: Online Chat & Webinars
Challenge: Ingredient versatility, product applications, and case studies.

The PROCESS

Mockups

I moved from concept to design by developing three distinct mockups, incorporating reusable components for scalability. As we iterated, I collaborated closely with the marketing team and project manager to integrate interactive elements, animations, and a custom database solution for 'Farmer Stories', staying within budget and timeline constraints.

mcok2o2
mOCK1
mcokw22

Map Feature Screenshot

Challenge

Surprise Obstacle

Meeting Expectations Through Smart Compromises

The client requested an animated 3D globe to showcase food sourcing, but budget and time limitations made it unfeasible. I proposed a simpler interactive design with concise animations and copy directing users to a detailed info page, keeping the project on budget and on schedule.

The OUTCOME

A Complete Solution

The end result was a visually compelling, user-centered website that better reflected Pure Source Foods' ethical values and modern branding. The solution was well-received by stakeholders, with only minimal changes needed, highlighting the success of aligning goals early in the process and crafting a cohesive design system. Significant changes were seen in SEO, as well as conversion analytics.

10+

NEW ENGAGEMENT OPPORTUNITIES
(FORMS, NEWSLETTERS, ETC)

20%

INCREASE IN PRODUCT
SHEET CONVERSIONS

Key Takeaway

Understanding the Unique Value Proposition

For Pure Source Foods, a clear and compelling value proposition was essential to actually resonate with their audience. By listening and understanding during the Discovery process, I was able to see the influence an earthy, organic styled site would help express the authentic, sustainable nature of the business. This is something I often think of and key in on when beginning new projects.

*This clients company name was altered to ensure privacy. Full info available upon request or in full case study.

More Work