Nu bezig met
Creatieve marketing om zonwering in de spotlight te zetten - Sun Eclipse
Met een rebranding en nieuwe website naar de toekomst - Mobiliteitsbaas
Van 1973 naar nu met een aangescherpte huisstijl en nieuwe website - AORC
Nóg dichter bij de kern: de volgende iteratie op ons eigen merk - BrandBros
Een flowend nieuw merk: Admin voor de makers van nu - Flow&Co
Creatieve marketing om zonwering in de spotlight te zetten - Sun Eclipse
Met een rebranding en nieuwe website naar de toekomst - Mobiliteitsbaas
Van 1973 naar nu met een aangescherpte huisstijl en nieuwe website - AORC
Nóg dichter bij de kern: de volgende iteratie op ons eigen merk - BrandBros
Een flowend nieuw merk: Admin voor de makers van nu - Flow&Co

De online manifestatie van de MOYU rebranding

MOYU
Ontwikkeling van de nieuwe, flexibele MOYU-website: van wireframes tot Webflow, met creatieve layouts, videoanimaties en naadloze Shopify-integratie.
MOYU website ontwikkeling

De uitdaging

We waren al een tijdje fan van het merk MOYU en de handige notitieblokken van steenpapier. Toen Maja Grcic van MOYU ons benaderde met de vraag of we de nieuwe website van MOYU wilden co-designen en bouwen was ons antwoord natuurlijk gelijk: Jaaaaaa!

Voor MOYU was het van groot belang om een website te ontwikkelen die de nieuwe merkidentiteit en huisstijl perfect kon manifesteren. De website moest flexibel zijn, gemakkelijk aanpasbaar zijn, creatieve layouts ondersteunen en (video) animaties bevatten, snel laden, sterke SEO performance hebben en een soepele integratie met Klaviyo ondersteunen. Omdat Webflow een ster is in al deze zaken, was de keuze snel gemaakt.

Voor het product en shop gedeelte koos MOYU ervoor om een custom made Shopify website te laten ontwikkelen door Noughts & Ones.

Om internationale groei te bevorderen was het ook essentieel dat de website in vier talen zou worden gemaakt namelijk: Nederlands, Engels, Frans en Duits. 

"We willen niets minder dan een website 2.0 voor MOYU. Kunnen jullie dat?"

Aan de slag

Het idee

Het project startte met een kick-off sessie met Brand Guarding Maja. Tijdens de sessie werden we meegenomen in de wereld van MOYU: de nieuwe merkstrategie, merkidentiteit, visuele identiteit, verbale identiteit, productontwikkeling en natuurlijk de eerste aanzet van de nieuwe website. 

De homepage begint met een strakke slider met transparante WebP animaties.

We waren al vanaf het eerste moment enthousiast toen we de nieuwe visuele identiteit van MOYU zagen. De nieuwe visuele identiteit van de hand van Designer Elena Ivanova zag er fantastisch uit!

In de eerste aanzet van de nieuwe website zagen we schetsen van een aantal belangrijke pagina’s. Aan ons de taak om de rest van de pagina’s te designen en vervolgens daarna alle pagina’s te bouwen in Webflow.

Een tekort aan kleur? Dacht het niet!

De uitvoering

De eerste stap naar een website 2.0 was het bekijken van de bestaande wireframes. Zo zijn we per pagina gaan kijken of de flow, indeling, layout en content logisch was. We keken ook naar de plaatsing van knoppen op de juiste plekken. Daar waar we een mogelijke verbetering zagen, gaven we dat aan.

Voor de wireframes die nog gemaakt moesten worden, zijn we samen met het MOYU team aan de slag gegaan. We hebben specifiek gekeken naar het doel van elke pagina om vervolgens per pagina een wireframe te maken dat 100% klikt.

Illustraties geven de huisstijl van MOYU hun herkenbare look.

Stap twee betrof het omzetten van alle pagina’s uit het wireframe naar prachtige visuele mockups. Het doel van deze stap was om te laten zien hoe elke pagina er uiteindelijk uit zou komen te zien. Een wireframe is namelijk nog geen design en is daarom lastig op zijn visuele uiterlijk te beoordelen.

Voor deze stap waren de eerste mockups van Elena een fantastisch hulpmiddel. Zo hebben we prachtige mockups gemaakt voor o.a. de volgende pagina’s: Contact, Blog, Cases, Ambassadors, Teachers, Media kit, Personalize en meer.

De website bevat ook speciale landingspagina's zoals voor kerst.

Yes! Nu alle pagina’s akkoord waren gegeven, konden we aan de slag in Webflow. 

De eerste stap was het maken van de online stijlgids, die de basis vormt van elke website die we maken. Vervolgens hebben we de implementatie van het Wizardry 2.0 systeem, van Timothy Ricks, de website helemaal klaar gemaakt voor maximale responsiviteit.

Responsive design staat centraal.

Nu de basis goed stond konden we aan de slag om de design mockups om te zetten naar werkende webpagina’s in Webflow. 

Zo bouwden we als eerste de homepage met een custom navigatiebalk met scroll animaties en een shop uitklapfunctie met alle MOYU producten. De homepage was de perfecte pagina om alle elementen uit de online stijlgids mee te testen. Na hier en daar wat tweaken konden we gelijk de rest van de statische pagina’s bouwen en vullen met content.

MOYU's speciale ambassador programma heeft een geheel eigen pagina gekregen.

Na twee weken keihard werken waren alle statische pagina’s gebouwd en konden we door met de volgende stap: Het CMS systeem. De nieuwe MOYU website zou namelijk gebruikmaken van het uitgebreide CMS systeem van Webflow.

Zo bouwden we als eerst de CMS collectie voor de blogpagina en de casespagina. Op de beide pagina’s implementeren we een aantal slimme functies zoals filters en featured content.

De reviews van de MOYU website maakten ook gebruik van het CMS systeem. Ditmaal echter in combinatie met de custom CMS slider van Finsweet. Hiermee kunnen er oneindig veel reviews worden geïmporteerd, die vervolgens met twee simpele knoppen bediend konden worden. Handig!

MOYU's personaliseren voor je eigen bedrijf? Check!

En dan de kers op de slagroomtaart: Video animaties!

Dit was bij uitstek de grootste uitdaging. Onze eerste gedachte ging uit naar WebP animaties met dezelfde achtergrondkleur als de ondergrond waarop ze geplaatst zouden worden in Webflow. Echter, hadden we met 1 groot probleem te maken: De kleuren van de animaties kwamen nooit 100% overeen met de gebruikte kleuren in Webflow.

Na meer dan 20 codecs te hebben geprobeerd met verschillende export settings in After Effects gaven we het bijna op… 

En toen ontdekten we de magische wereld van transparante video's. Wie had dat gedacht! Na een week lang experimenteren was het eindelijk gelukt: Transparante videos in WebP format in hoge resolutie. BAM!

Bekijk de uitgebreide blog en kom meer te weten over MOYU, herbebossing en productiviteit!

Na 2 maanden hard werken was de gehele Webflow website van MOYU klaar om samen met de Shopify website gelanceerd te worden. Nog even snel Weglot koppelen ennnnnn publish!

Een positieve klantreview

Yellow star shapeYellow star shapeYellow star shapeYellow star shapeYellow star shape

Maja Grcic

MOYU

Behaalde resultaten

Heb je een uitdaging?

BrandBros white rotating stampYellow triangle shape
Door op "Accepteren" te klikken, ga je akkoord met het opslaan van cookies op jouw apparaat om deze website te verbeteren, het gebruik te analyseren en te helpen bij onze marketing. Bekijk ons privacybeleid voor meer informatie.