MOYU

The idea

The project started with a kick-off session with Brand Guarding Maja. During the session, we were taken into the world of MOYU: the new brand strategy, brand identity, visual identity, verbal identity, product development and, of course, the first launch of the new website.

We were thrilled from the first moment when we saw MOYU's new visual identity. Designer Elena Ivanova's new visual identity looked amazing!

In the first setup of the new website, we saw sketches of a number of important pages. It was up to us to design the rest of the pages and then build all pages in Webflow.

The implementation

The first step towards a website 2.0 was to view the existing wireframes. For example, we started to see per page whether the flow, layout, layout and content was logical. We also looked at the placement of buttons in the right places. Where we saw a possible improvement, we indicated that.

For the wireframes that still needed to be made, we set to work with the MOYU team. We specifically looked at the purpose of each page and then created a wireframe per page that clicks 100%.

Step two involved converting all the pages in the wireframe into beautiful visual mockups. The purpose of this step was to show what each page would ultimately look like. After all, a wireframe is not yet a design and is therefore difficult to judge by its visual appearance.

Before this step, Elena's first mockups were a fantastic tool. For example, we have created beautiful mockups for the following pages: Contact, Blog, Cases, Ambassadors, Teachers, Media kit, Personalize and more.

Yes! Now that all pages were approved, we were able to get started in Webflow.

The first step was to create the online style guide, which forms the basis of every website we create. Then, implementing the Wizardry 2.0 system, by Timothy Ricks, we made the website completely ready for maximum responsiveness.

Now that the basics were right, we were able to get to work converting the design mockups into working web pages in Webflow.

For example, we were the first to build the homepage with a custom navigation bar with scroll animations and a shop drop-down function with all MOYU products. The homepage was the perfect page to test all the elements of the online style guide. After some tweaking here and there, we were immediately able to build the rest of the static pages and fill them with content.

After two weeks of hard work, all the static pages were built and we were able to move on to the next step: The CMS system. Indeed, the new MOYU website would use Webflow's extensive CMS system.

This is how we first built the CMS collection for the blog page and the case page. On both pages, we implement a number of smart features such as filters and featured content.

The reviews of the MOYU website also used the CMS system. This time, however, in combination with Finsweet's custom CMS slider. This allows an infinite number of reviews to be imported, which could then be operated with two simple buttons. Handy!

And then the icing on the cream cake: Video animations!

This was the biggest challenge by far. Our first thought was WebP animations with the same background color as the background they would be placed on in Webflow. However, we had one major problem: The colors of the animations never 100% matched the colors used in Webflow.

After trying more than 20 codecs with different export settings in After Effects, we almost gave up...

And that's when we discovered the magical world of transparent videos. Who would have thought that! After a week of experimenting, it was finally successful: Transparent videos in WebP format in high resolution. BAM!

After 2 months of hard work, MOYU's entire Webflow website was ready to be launched together with the Shopify website. Just quickly connect Weglot ennnnnn publish!