Augmenting the Webflow Conference with an online gaming experience. A translation tool for websites supporting over 100 languages. Weglot allows you to reach new audiences with high-quality translated content.
Translating a real booth into an immersive, web-based gaming experience for the Webflow Conference 2022 - unique, but on brand.
We divided the workflow into cross-department stages so designers, project managers, and developers could collaboratively align on design and functionality.
The aim was to define the game operations, the technical scope, and the conceptual and visual coherence.
We defined the specific tasks needed to find the right balance between a smooth gameplay experience and Webflow development.
We created wireframes to validate our thoughts and iterate quickly. This helped define the game, its rules, mechanics, and features.
The result is an immersive game where the user uses a flashlight to find clues in a magical theater. To win, the user has to figure out the meaning of the main word as quickly as possible.
Once we had the wireframes and the aim of the game defined, we explored how we can align the Weglot brand with the concept of Magic.
The result combines magic references with gaming UI to deliver the right balance between UX and engagement. All powered by Webflow.
The development phase was divided into different components that include the stage, primary and secondary controls, and navigation. Combining form and function into smooth gameplay.
Use the checkboxes to unlock new components and build the entire game.
A range of audio was implemented to create an atmosphere and environment inside of the Weglot Like Magic. The background track kept players engaged during the game and additional feedback sounds on the UI elements added another layer of gamification to the browser experience.
The main menu for the UI was created to help users understand the functionality of the game, as well as the collaboration of Refokus x Weglot and the prizes available to win through the game. Implementing the modals through Webflow’s Interactions and Animations tools and using custom code to trigger the different modals at different stages of the user journey to create a seamless user flow.
We placed different clues inside of the stage, which are revealed by the users magic torch. The main task of the game for the user, is to find the clues! A smart use of blending modes allows the torch to come to life and to reveal the clues. Custom code was implemented to randomly place the clues around the game canvas per question.
The main controls for the game were implemented in Webflow which included:
Injecting the word that needs to be guessed through custom code, for each round using the powerful Webflow CMS to store all of the words, clues and wrong answers for the game.
Creating all of the states for the buttons, which included user feedback for correct and incorrect answers that even flowed into the surrounding UI when a decision was made.
A custom cursor was implemented to further gamify the browser game which animated through mouse position on the different UI elements across the viewport. Inside of this custom cursor - the users main tool in winning this game - the light of the magic torch reveals the clues inside of the canvas.
Opening the dropdown in the game UI reveals a selection of languages in which the game can be played. This feature is directly powered by the Weglot Integration, which ensures that everyone could enjoy the magic at Webflow Conference.
The game logic was developed with plain javascript in a git centered approach and hosted on a Vercel server. While we wanted to stay as Webflow native as possible we were able to create most of the UI and even animations inside of Webflow. We used data-attributes to communicate between the codebase and the frontend canvas. By using Weglots API and Webflow CMS system the content translation and management is fully dynamic and can be scaled up in the future by the client themselves without touching the basecode.
The main stage, entirely built within Webflow is utilising the true power of visual development. Combining the use of Webflow Symbols, Animations and Interactions to build the curtains at the edges of the viewport and to create a feeling of theatre as you take your journey through Weglot Like Magic.
