Metadome.ai Case Study - Webflow Development
Client: Metadome.ai
Industry: XR Technology
Services Provided: Webflow Development
Integrations: HubSpot, Google Tag Manager, Vimeo
Overview
Metadome empowers brands with captivating extended reality (XR) technology, enabling hyper-realistic product visualizations that mesmerize and convert customers. They approached us at Skylar Studio for a Webflow development solution that would reflect their innovative XR capabilities while maintaining a clean, interactive, and user-friendly experience.
Project Goals
Build a responsive, engaging website showcasing Metadome’s XR technology.
Implement advanced Webflow functionalities using the Client-First framework.
Guide the client on managing content through a custom CMS.
Maintain design consistency and UX optimization across the site.
Approach
Custom Development with Client-First Framework
We developed the website in Webflow using the Client-First framework, which ensured structured and scalable code. This allowed for seamless navigation and performance across the site, regardless of updates.
Micro-Interactions for Enhanced User Experience
To enhance user engagement, we incorporated micro-interactions that added subtle animations and responses, making the site dynamic without overwhelming the user.
Components for Efficient Design
We built components for layouts that appeared across multiple pages. This provided consistency and allowed for quick updates whenever the client needed to scale or modify content.
CMS Training for Client Autonomy
We guided the Metadome team on how to easily add, edit, or delete items in the CMS. This hands-on training ensured they could manage the content independently after delivery.
Finsweet Attributes for Advanced Functionality
To meet specific project needs, we implemented Finsweet attributes, which enhanced various aspects of the site:
Filter: Created dynamic filtering for product categories and content.
Slider & Splide Sliders: Designed smooth, responsive sliders to showcase XR product visuals.
Pop-ups: Used pop-ups to highlight promotions or important updates without disrupting the user journey.
Table of Contents: Organized large pieces of content into easy-to-navigate sections.
Disable Scrolling & Load: Used disable scrolling to focus attention during interactions, and lazy loading to optimize page speed.
Integrations
We integrated HubSpot for CRM functionality, Google Tag Manager for tracking and analytics, and Vimeo for hosting product videos.
Design System Implementation
A design system was created to ensure style consistency throughout the website. From typography to color schemes, everything adhered to a unified visual language that aligned with Metadome’s branding.
Results
The site was delivered on time, featuring a smooth, consistent user experience.
The CMS training empowered the Metadome team to manage content updates independently.
The Finsweet attributes and Splide sliders provided advanced functionality and interactivity.
Increased engagement metrics were reported post-launch, particularly with video content and micro-interactions.
Key Technologies
Webflow (Client-First Framework)
HubSpot
Google Tag Manager
Vimeo
Finsweet Attributes
Splide Slider
This project reflects our commitment to building not only beautiful websites but also interactive and scalable platforms. Metadome.ai now has a powerful digital presence that aligns with its forward-thinking technology.
