Little Freddie Shopify Website Design & Build

Project overview

Little Freddie is a fast‑growing baby food brand with a clear mission—nutritious ingredients and joyful mealtimes. I led the Shopify website design and 2.0 rebuild to modernize the store, make shopping simpler, and communicate the brand’s quality and care across every page.

The brief

Create a conversion‑focused Shopify storefront that balances commerce with brand storytelling. The new experience needed to showcase product ranges, highlight awards and sourcing credentials, and provide easy access to educational content such as the Nutrition Hub, Ingredients, and Sustainability.

Goals

Launch a custom Shopify 2.0 theme that’s fast, flexible, and easy to manage.
Improve navigation and product discovery (by age, range, and dietary needs).
Elevate brand trust with awards, ingredient transparency, and retailer presence.
Strengthen on‑page SEO and Core Web Vitals.
Increase add‑to‑cart and email sign‑ups while keeping the interface joyful and accessible.

Role & tech

I was responsible for end‑to‑end Shopify website design, UX, and development:

Discovery, IA, wireframes, high‑fidelity UI in Figma
Theme development with Liquid, JSON templates, CSS/SCSS, and vanilla JS
Metafields schema for structured, reusable content
Performance optimization, analytics, and SEO setup
QA, accessibility, and launch support

Core tools: Shopify 2.0, Liquid, JSON templates, Shopify CLI, GitHub, Figma, GA4, GTM, Klaviyo.

What I delivered

UX and navigation

Clear top‑level navigation: Our Range, About Us, Nutrition Hub, Ingredients, Sustainability—so shoppers can buy, learn, or validate trust in seconds.
Mega‑menu with image‑assisted links to key ranges (e.g., Home‑Style Meal, Full of Veg, Weaning Bundle) and age filters.
“Where to find us” retailer grid (Tesco, Sainsbury’s, Ocado, Morrisons, Co‑op and more) to support omni‑channel shoppers.
Consistent component system for awards, trust badges, and content teasers.
Collection and product templates with intuitive filtering and prominent CTAs.

Theme build (Shopify 2.0 / Liquid)

Custom 2.0 theme with sections everywhere and flexible page templates.
Metafields for age suitability, texture stage, allergens, and nutrition callouts—driving dynamic badges and PDP highlights.
Reusable hero section supporting video and image, used on the homepage with the “Mealtimes full of joy” message.
Range “cards” and carousels built as schema‑driven sections to scale new collections quickly.
Content‑rich templates for Nutrition Hub and Ingredients pages to balance editorial and commerce.

Performance and SEO

Image compression, modern formats, responsive srcsets, and lazy‑loading.
Code‑splitting and critical CSS to improve LCP and CLS; reduced third‑party scripts.
Semantic headings, internal linking, and descriptive alt text.
Structured data for Organization, Product, Article, and Breadcrumbs.
Yoast‑style on‑page best practices applied to titles, slugs, meta, and copy—reinforcing the focus keyphrase “Shopify website design.”

Accessibility

WCAG‑aligned color contrast, focus states, and keyboard‑navigable menus.
Skip‑to‑content and landmark roles for assistive tech.
Clear form labels and error states for account, newsletter, and checkout‑related forms.
Motion‑reduced hero treatment for prefers‑reduced‑motion users.