Instant x Shopify – Supplement E-commerce Design & Build

New Lemon Studio

Shopify Developer

Instant Designer

Web Designer

Figma

Instant

Shopify

E-Commerce

Shopify Supplement E-commerce Design & Build using Instant

(Figma → Instant → Shopify)

1. Goal

To create a minimalist, science-driven supplement brand that bridges clinical credibility with modern lifestyle appeal.

The objective was to design and develop a complete e-commerce experience — one that feels calm, trustworthy, and premium.

2. Design Direction

The brand’s visual language blends clinical precision and natural calm.

With inspiration from Ritual, Seed, and AG1, the brand focus on balance, structure, and quiet confidence.

Creative goals:

Mood: Calm energy, credible simplicity, classy & technological

Palette: White, pine green, soft sage, warm beige

Typography: Manrope for calm functional sophistication

Imagery: Light product photography, minimal studio scenes

Motion: Subtle scroll reveals and hover micro-interactions

The direction set the tone for a digital experience that feels equal parts scientific and human.

Style Guide

3. Design in Figma

The full experience was designed in Figma, with a modular design system to ensure scalability and consistency across pages.

Core sections:

Hero banner with tagline + CTA

Product lineup grid with quick-view cards

Ingredient & benefit storytelling sections

Testimonials + social proof

FAQ & brand story integration

Each page was prototyped to feel editorial yet shoppable — using generous spacing, soft contrast, and responsive grids.

Figma design

4. Shopify Development with Instant

The build was executed using Instant, connected to Shopify for a fully editable and performant storefront.

This workflow allowed me to translate Figma layouts directly into responsive, production-ready components.

Development highlights:

Custom cart drawer with smooth transitions

Ingredient and benefit sections built as reusable blocks

Optimized scroll and hover animations via CSS/JS

Shopify-native product setup with subscription support

Responsive design tested across breakpoints

The result is a fully custom Shopify theme that preserves the design precision while remaining easy for the client to maintain.

⚙️ Tools:

Figma · Instant · Shopify · Custom Liquid · JavaScript

Instant Build

5. Summary

SP2 embodies a complete creative-to-code process — uniting design craft with development clarity.

From early direction to final deployment, the goal was to prove that a clean, science-backed aesthetic can deliver both credibility and conversion.

Like this project

Posted Nov 1, 2025

Designed and developed a minimalist, science-driven e-commerce site for SP2 using Figma, Instant, and Shopify.

Likes

Views