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 initial launch of the new website. 

We were excited from the first moment when we saw MOYU's new visual identity. The new visual identity by Designer Elena Ivanova looked fantastic!

In the first draft of the new website, we saw sketches of some key pages. It was up to us to design the rest of the pages and then build all the pages in Webflow.

The implementation

The first step toward a Web site 2.0 was to look at the existing wireframes. For example, we started looking at each page to see if the flow, layout, layout and content made sense. We also looked at the placement of buttons in the right places. Where we saw a possible improvement, we indicated it.

For the wireframes that still needed to be created, we worked with the MOYU team. We looked specifically at the purpose of each page to then create a wireframe for each page that clicked 100%.

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

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

Yes! Now that all the pages were approved, we could get to work in Webflow. 

The first step was to create the online style guide, which is the basis of every website we create. Next, with the implementation of the Wizardry 2.0 system, by Timothy Ricks, we got the website all set up for maximum responsiveness.

Now that the basics were in place, we could get to work converting the design mockups to working web pages in Webflow. 

Thus, we were the first to build the homepage with a custom navigation bar with scroll animations and a shop drop-down with all MOYU products. The homepage was the perfect page to test all the elements from the online style guide. After some tweaking here and there, we could immediately 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 could move on to the next step: The CMS system. In fact, the new MOYU website would use Webflow's comprehensive CMS system.

Thus, we first built the CMS collection for the blog page and the cases page. On both pages, we implement some 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. With this, an infinite number of reviews could be imported, which could then be controlled with two simple buttons. Handy!

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

This was eminently the biggest challenge. Our first thought was to create WebP animations with the same background color as the background on which they would be placed in Webflow. However, we faced 1 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 then we discovered the magical world of transparent videos. Who would have thought! After a week of experimentation, we had finally succeeded: 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 a quick link to Weglot andnnnnn publish!