Haarlem, November 6th, 2023

Merlin is what they call “a Code Boutique”. It’s a way of saying that Merlin can help brands with web development related things in any phase of their project. Especially projects where 3D is the key to the puzzle. The agency challenges and pushes concepts to a level where some people call is digital magic with a group of innovative experts.

Mees Rutten is a Founder and Creative Developer at Merlin Studio, based in Haarlem, The Netherlands. In an interview with TIA, Rutten described the steps that led him to start the agency while explaining how the landscape of web development has changed over the years. He also listed the steps on their production process and the measures to ensure client satisfaction.

To kick things off, in your opinion what’s the best thing about Haarlem?

I’m really into cooking and coffee and love to visit places like Mochador, Toko Nina and “Traiteur Olivijn”. There are a lot of cultural places and things to discover as well: modern dance or theater at SCHUUR, “bevrijdingspop” during our Liberation Day, Haarlem Jazz, Haarlem Food Festival, and more. Other places include museums like Frans Hals and Verwey and Teyler Museum, which are great.

How has the landscape of web development evolved since you started your career, and what trends do you find most impactful for senior developers today?

I started programming in 2015 and started my part-time job and internship at Mediamonks in 2016. I started working with a custom tech stack, which a lot of companies used to build themselves. It was Mustache, SCSS and KnockoutJS. Pretty old school stuff. There were also some React devs, but they didn’t do creative work. The biggest shift I’ve seen is that React has taken over the landscape and that browsers are way more capable of delivering good experiences to the web. Every usable browser supports WebGL 2 and Web Apps, which is a big step upward.

What inspired you to co-found Merlin Studio?

We started in 2018 under the name “Level30Wizards”, we were a collective working towards higher quality websites and experiences than we could have worked on at the places we worked. I have outrageous ambition. I was partially leading a team on multiple Heineken projects at Mediamonks as an intern and wanted to become Teamlead after my internship (you read that right) which wasn’t possible, so I left. We rebranded to Merlin Studio to be a better fit for agencies and have a globally recognisable brand for interactive digital experiences. I was inspired by my old CEO Victor Knaap, he’s a cool guy. I thought: “If he can do it, I can probably do it as well”.

Could you give us an update on a project you’re currently working on and explain what it encompasses?

We always work on multiple projects at once and we’ve delivered experiences we’re really proud of this year like for Sprite and later for Kim Kardashian’s SKKY Partners. We’re currently knee-deep in crafting a WebAR experience for a world-renowned luxury brand. The project is slated for a December 2023 launch, and we couldn’t be more excited about it.

Do you have an inspiration routine when you start working on a new project?

For sure! At Merlin we don’t think in flat UI designs for inspiration but we think in transitions and story. The best websites tell a story in a beautiful setting, that’s exactly what we try to achieve as well. For inspiration I usually turn to Awwwards or Godly, and pick and match earlier projects by amazing companies. I also get inspiration from places like Musea, Instagram and graphic design books believe it or not.

Can you go into some more detail on your production process?

The first thing we try to do is thoroughly understand the person we’re talking to. They probably know their customer best so we try to listen closely. After listening to the problem or idea, we create a debriefing and gather inspiration. Once we’re all signed off on the plan, we start an exploration phase containing design phases until we hit the spot. It’s important that both the client and we are on the same page as to what we are delivering.

What we do is extremely complex so we lead our client through this phase. Once we know our design direction and motion style, we create more high fidelity designs and motion mockups. This is usually when development starts building infrastructure, hosting and the grid system. Afterwards it’s crafting by development and solving design problems if they arise.

What measures do you take to ensure client satisfaction with your products?

The work we do can be very complex. It’s of utmost importance that we guide our clients through our way of working and make sure they understand what we’re actually doing. This helps us to make decisions that help the product serve the client at a later point.

Quality Assurance is a big deal for us. We test continuously and extensively across multiple platforms. Web browsers build features which they have to interpret from W3C and align with all major competitors. That’s a blessing and a curse, because browsers want to differentiate themselves from their competition by shifting focus. This means Safari is privacy-first and puts 3D/graphic performance on a slowburner, and means Chrome is privacy-last but built the most usable product.

Due to us knowing the constraints of the platforms we have to work with, we can nip issues in the bud and do effective quality control on our websites.

How do you handle version control, collaboration, and code review processes in your web development projects?

We use Github for version control. Every line of code that’s written is checked by a developer with similar or more experience. We have really high expectations of our juniors and even interns when it comes to code quality. Performance, Accessibility, SEO and Semantics (PASS) are first priority when writing code, so we check every Pull Request to see if it “passes”.

What considerations do you take into account when designing 3D models and assets for WebAR and WebVR projects?

We need to be wary of the size of 3D models. We typically use GLTF or GLB objects and keep them below 50k vertices. Because not everyone is on a high speed connection at all times, we need to keep our sites as small as possible.

How do you approach user testing and feedback collection to iteratively improve the user experience?

We test our products with multiple people in our environment and our client does so as well. We have a Notion template in which we gather feedback from the client.

This is a central place to make sure we won’t get feedback through Slack, Email, Whatsapp and owls carrying letters.

What are the best practices for creating user-friendly navigation and interactions in WebVR applications?

To make a WebVR app great to use, we focus on clear layout and simple controls. Place buttons and options where people expect them, and keep them far enough apart to avoid mistakes. Add landmarks and signs to help users find their way.

A quick tutorial at the start can help people get used to how things work. Give sensory cues like vibrations and sounds to guide actions. Support different ways to interact, like hand gestures or controllers, and offer alternative methods for those who need them. Keep testing to find what works best and make sure your app loads quickly.

Because we build on the web, we can deploy WebVR experiences that work simultaneously on all devices and browsers. So, we can build a WebVR experience which you can see at a conference, and later showcase to your spouse on your phone at home.

This type of craft requires us to think about navigation, usability and accessibility across all devices and allows us to quickly prototype new interactions.

Best practices for a user-friendly interface mainly come down to: reachable buttons with “affordance”, you know what they’ll do when you click on it. Clear navigation, so no sudden teleporting. Never move suddenly, this can make people nauseous. And finally give people the ability to fuck up, meaning if you press something by accident, allow them to go back and reevaluate (unless it’s a game, then shake them up with a “WASTED” screen).

What emerging trends or technologies do you see on the horizon for real-time 3D, WebAR, and WebVR, and how are you preparing for them?

We think iOS will have to support native WebAR in the near future, if they are going to roll out the Vision. Safari is currently having a hard time fixing WebGL, the language for 3D graphics on the web, bugs and implementing the latest spec. Once they accelerate a bit, we think experiences are going to be similar to native app quality.

Looking ahead, what are your aspirations or goals for Merlin Studio in terms of growth, innovation, or impact in the design industry?

We want to be the leading Creative Tech Boutique in the Netherlands and a strong player globally. Coming few years we’re growing to 20-25 talented people. We strive to be a place for Interactive Digital Experiences; we’re going to host meetups, do hackathons and help people grow. We want to be a place where creativity and technology meet in harmony to allow Merlin to make the world a bit better than it was before.

How do you typically spend your weekends to unwind and recharge, especially after intense workweeks?

Good question! I’ve had issues with unwinding as I’m an “always-on” kind of person because of some childhood issues. The way I unwind is usually through intense workouts, walking in nature, cooking and trying new hobbies or new things. Recently I’ve taken up photography which allows me to go outside and really look at my surroundings which helps a lot with appreciation and going out of my head.

From your personal standpoint, what global issues are you most passionate about and why?

I’m really passionate about justice, mental health care and climate change.

I’m only 27 and have had a life full of mental health professionals who failed to help me, because I think they don’t have enough time to treat everyone correctly. I always try to help people around me get good care when needed or possible.

Merlin is part of “Fossiel No Deal” which is Dutch for: “Fossil, no deal”. It’s a group of agencies that doesn’t work for (gas fuelled) automotive, tank stations, oil suppliers, aviation companies and more. I also use Ecosia, and I think I’ve planted about 400 trees by just searching how to center divs.

Please share something you’ve always wanted to try but haven’t yet.

I’d love to travel to Japan. I think Japanese culture is amazing. I love the food, ingredients and ways of handling the things you use daily.

Thanks Mees!

• Learn more about Merlin Studio
• Follow Mees on social media:

LinkedIn

• Follow Merlin Studio on social media:

LinkedIn

Twitter

Instagram

GitHub

3DWeb DevelopmentWebArWebVR