Launching a microbial protein brand on Shopify
- Client
- 1SCP/D
- Built with
- Shopify, Google Analytics, Klaviyo, Cookieyes, Google Search Console, Figma
- Timeframe
- 2 weeks
- Services
- Branding, Custom Shopify Store, UI/UX Design, CRO
A new brand and a new store for a protein grown by fermentation. We rebranded 1SCP/D and designed and developed their Shopify store from scratch: one design system from a phone to a 4K screen, a waitlist that opens before the product does, and a free scoop that turns first orders into accounts.
- A new category: protein grown by fermentation, not farmed. Most visitors meet the word microbial protein for the first time on this site.
- Evidence first. Every claim on the site has to be one the brand can back with a study.
- The store goes live before the product does, so the first job is a waitlist, not a checkout.
- Visitors pick one or both products and leave their email. No order is placed and nothing is charged.
- Each product sends its own confirmation mail, from Shopify Messaging, with no extra app.
- The site remembers the sign-up, so the homepage, the shop and the product page all show On the list.
A design system that scales with the screen
The site is fully fluid, from a phone to a 4K screen. Type, spacing and the twelve-column grid are one set of tokens that grow with the viewport and stop at a 2560 pixel content width, where the page is an exact enlargement of the design. Sections never set their own font sizes or gaps; they place content on the grid and pick from the scale, so every page lines up on the same columns.
01 Shop
One collection, filtered by its own fields
The shop is a single collection. Category, flavour, format, diet and availability come from the products' own data, so a new product files itself.
02 Product
A product page that reads the product
Claims, ingredients, the intake timeline and the specifications are filled in on the product. The page shows a waitlist, a pre-sale or a buy button from one field.
03 Waitlist
Hear it first
On the homepage visitors choose one or both pouches and leave their email. The choice is remembered on every page.
What the team changes in the Shopify admin
The theme editor only holds words, pictures, links and choices. Everything else comes from the products themselves.
A free scoop for an account
To grow a list the brand can write to after the first order, customers who order with an account get The Scoop, a metal measuring scoop, free with their first order. Guests can order as usual; the bag asks them to sign in or create an account. It works once per account: an automatic discount makes it free, the bag adds and removes it on its own, and a Flow tags the customer so it never comes back. The Scoop is also sold on its own.
How we worked
Sjonlee Ha designed and developed the store, from the design system to the last section.
The store runs on a Shopify theme with our own layer on top: every section a visitor sees is custom built, and the base theme supplies the cart, the product form and the account pages. Product facts come from metafields and metaobjects, never from text typed into the theme. Each change is checked against the fluid rules and looked at on a phone, a laptop and a 2560 and 4K screen before it ships.
50
Custom sections
2560 px
Content width, fluid up to it
12
Grid columns on every page
0
Apps for the waitlist and the free scoop
