Een microbiële eiwit merk lanceren met Shopify
- Klant
- 1SCP/D
- Gebouwd met
- Shopify, Google Analytics, Klaviyo, Cookieyes, Google Search Console, Figma
- Doorlooptijd
- 2 weken
- Diensten
- Branding, Shopify winkel op maat, UI/UX design, CRO
Een nieuw merk en een nieuwe winkel voor eiwit dat gekweekt wordt door fermentatie. We gaven 1SCP/D een nieuwe huisstijl en ontwierpen en bouwden hun Shopify-winkel van nul: één designsysteem van telefoon tot 4K-scherm, een wachtlijst die opent voor het product er is, en een gratis scoop die van eerste bestellingen accounts maakt.
- Een nieuwe categorie: eiwit dat gekweekt wordt door fermentatie, niet geteeld. De meeste bezoekers lezen het woord microbial protein hier voor het eerst.
- Bewijs eerst. Elke claim op de site moet het merk kunnen staven met een studie.
- De winkel gaat live voor het product, dus de eerste taak is een wachtlijst, geen kassa.
- Bezoekers kiezen één of beide producten en laten hun e-mail achter. Er wordt niets besteld en niets aangerekend.
- Elk product stuurt zijn eigen bevestigingsmail, via Shopify Messaging, zonder extra app.
- De site onthoudt de inschrijving, zodat de homepage, de shop en de productpagina allemaal On the list tonen.
Een designsysteem dat meeschaalt met het scherm
De site is volledig fluid, van een telefoon tot een 4K-scherm. Typografie, witruimte en het grid van twaalf kolommen zijn één set tokens die meegroeien met het scherm en stoppen op een inhoudsbreedte van 2560 pixels, waar de pagina een exacte vergroting van het ontwerp is. Secties zetten nooit hun eigen lettergroottes of tussenruimtes; ze plaatsen inhoud op het grid en kiezen uit de schaal, zodat elke pagina op dezelfde kolommen valt.
01 Shop
Eén collectie, gefilterd op haar eigen velden
De shop is één collectie. Categorie, smaak, formaat, dieet en beschikbaarheid komen uit de gegevens van de producten zelf, zodat een nieuw product zichzelf indeelt.
02 Product
Een productpagina die het product leest
Claims, ingrediënten, de innametijdlijn en de specificaties worden op het product ingevuld. De pagina toont een wachtlijst, een voorverkoop of een koopknop vanuit één veld.
03 Wachtlijst
Hoor het als eerste
Op de homepage kiezen bezoekers één of beide zakken en laten ze hun e-mail achter. De keuze wordt op elke pagina onthouden.
Wat het team zelf aanpast in de Shopify-admin
De theme editor bevat alleen woorden, beelden, links en keuzes. Al de rest komt uit de producten zelf.
Een gratis scoop voor een account
Om een lijst op te bouwen waar het merk na de eerste bestelling naar kan schrijven, krijgen klanten die met een account bestellen The Scoop, een metalen maatschep, gratis bij hun eerste bestelling. Gasten bestellen gewoon; het winkelmandje vraagt hen om in te loggen of een account te maken. Het werkt één keer per account: een automatische korting maakt hem gratis, het winkelmandje zet hem er zelf bij en haalt hem weer weg, en een Flow tagt de klant zodat hij nooit terugkomt. The Scoop is ook los te koop.
Hoe we werkten
Sjonlee Ha ontwierp en bouwde de winkel, van het designsysteem tot de laatste sectie.
De winkel draait op een Shopify-theme met onze eigen laag erbovenop: elke sectie die een bezoeker ziet, is op maat gebouwd, en het basistheme levert het winkelmandje, het productformulier en de accountpagina's. Productgegevens komen uit metafields en metaobjects, nooit uit tekst die in het theme getypt is. Elke wijziging wordt getoetst aan de fluid-regels en bekeken op een telefoon, een laptop en een 2560- en 4K-scherm voor ze live gaat.
50
Secties op maat
2560 px
Inhoudsbreedte, fluid tot daar
12
Gridkolommen op elke pagina
0
Apps voor de wachtlijst en de gratis scoop
