De online manifestatie van de MOYU rebranding
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.Â
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.
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.
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.
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.
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.
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!
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!
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
Maja Grcic
MOYU
Behaalde resultaten
.avif)
