Interactive Motion-Driven Webflow Website for Rubikn

Overview

To effectively utilize this component with Finsweet's Table of Contents attributes, please adhere to the following guidelines:

Ensure to remove the existing class from the content27_link item, as Webflow's native current state will be applied automatically.
For adding interactions that allow sections in the table of contents to expand and collapse, select the content27_h-trigger element, add an element trigger, and choose Mouse click (tap).
On the first click, select the custom animation 'Content 28 table of contents [Expand]', and for the second click, choose 'Content 28 table of contents [Collapse]'.
In the Trigger Settings, make sure to deselect all checkboxes except for Desktop and above to prevent bugs on tablet and smaller devices.

Context & Client Challenge
Rubikn partners with agencies that lack in-house design teams. Their clients often struggle to:

Differentiate their digital presence in a crowded market
Tell a cohesive brand story through static layouts
Maintain visitor engagement beyond the hero section
Update content quickly without developer overhead

Agencies were losing leads because their sites felt generic and failed to guide users through a compelling narrative.

Our Story-Driven Approach

Discovery & Empathy Mapping
We interviewed stakeholders to understand end-user motivations—what questions they asked, what hesitations held them back, and which visual cues inspired trust.
Narrative Arc Definition
Rather than dumping features, we wove a three-act story:
- Act I (Hook): Immersive hero animation that immediately showcased Rubikn’s motion expertise.
- Act II (Engagement): Scroll-triggered micro-interactions that revealed service benefits just as the user paused.
- Act III (Conversion): A clear, animated call-to-action that felt like the natural climax of the experience.

Solution & Deliverables

Experience Mapping & Architecture: Mapped user journeys to ensure each scroll depth delivered a narrative beat.
Prototype Framework & Wireframing: Built clickable prototypes that demonstrated timing and sequencing of interactions.
Visual Identity & Color Exploration: Crafted a palette that evoked innovation (electric blue accents) and trust (muted charcoal backgrounds).
Creative Direction & Mood Boarding: Selected imagery and typography that supported brand storytelling—balancing playfulness with professionalism.
High-Fidelity Interface Design: Developed polished UI mocks in Figma, annotating animation triggers for seamless handoff.
Interactive Motion & Micro-Interaction Engineering: Implemented subtle parallax shifts, hover-to-reveal content, and Lottie-powered 3D elements in Webflow.
Iterative Optimization Sprints: Ran two-week feedback cycles with the client, refining animation easing and load-time performance.
Launch Readiness & Handover: Documented all interaction guidelines, provided style-guide PDFs, and trained the client on Webflow CMS for effortless updates.

Impact & Results

Engagement Up 45%: Average session duration increased from 1:25 to 2:05.
Conversion Rate Lifted 30%: Form submissions rose by nearly one-third within the first month.
Client Autonomy: The agency reported zero developer tickets in post-launch CMS updates, thanks to our thorough handover.

This case study demonstrates how a narrative-driven design process, anchored by motion and interactivity, transformed a generic agency site into an engaging conversion machine.

‍

Contents Overview

Innovative Solutions for Unique Project Goals

At Rubikn, we crafted tailored solutions that not only met but exceeded our client's expectations. Our approach combined cutting-edge design with strategic functionality to ensure optimal user engagement.

Learn More

Journey