- 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.
Rafqa UAE’s old site listed properties in a generic grid, buried key selling points, and required prospects to email manually—resulting in low inquiry rates and poor brand perception. Agents reported that clients felt overwhelmed by text-heavy pages and gave up before submitting a request.
- Discovery & Research
- Interviewed agents and 15 prospects to uncover decision triggers.
- Mapped the typical buyer journey: browse → shortlist → contact.
- Identified top pain points: lack of clear property details, no virtual tours, and cumbersome contact.
- Experience Mapping & Architecture
- Defined a streamlined user flow: hero search → property highlights → easy “Book Viewing” CTA.
- Organized properties by type, price range, and location to match how real buyers shop.
- Prototype Framework & Wireframing
- Created low-fi prototypes focusing on rapid access to filters and lead forms.
- Usability testing with five users showed a 60% faster time to find a suitable property.
- Visual Identity & Color Exploration
- Refined the brand palette to luxury neutrals with a bold accent to convey trust and sophistication.
- Chose a modern sans-serif font for readability on both desktop and mobile.
- Creative Direction & Mood Boarding
- Assembled a mood board of high-res Dubai skyline photography, elegant interior shots, and clean layouts to set the aspirational tone.
- High-Fidelity Interface Design
- Designed a dynamic homepage with a full-width search bar over a rotating hero carousel of flagship properties.
- Developed “property cards” showcasing key metrics (sqm, price, location) at a glance.
- Interactive Motion & Micro-Interaction Engineering
- Added subtle hover animations on cards, an animated price counter, and scroll-triggered image transitions to keep engagement high.
- Iterative Optimization Sprints
- Post-launch heat-map analysis revealed mid-page drop-off on property details.
- Moved “Schedule Viewing” button into a sticky footer and simplified form fields—boosting submissions by 35%.
- Launch Readiness & Handover
- Conducted cross-browser QA, performance tuning, and provided Rafqa’s team with a CMS tutorial.
- Delivered style guides, component library, and final code handoff.
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.
Our Project Timeline: From Start to Finish
Experience Mapping & Architecture
Defined content structure and navigation flow
Prototype Framework & Wireframing
Created layout prototypes for desktop and mobile
Visual Identity & Color Exploration
Selected brand-aligned hues and typography
Creative Direction & Mood Boarding
Curated visual inspirations to set the design tone
High-Fidelity Interface Design
Crafted high-fidelity UI mockups
Interactive Motion & Micro-Interaction Engineering
Developed scroll and hover effects, 3D elements
Iterative Optimization Sprints
Conducted feedback rounds and refined design and interactions
Launch Readiness & Handover
Deployed on Webflow and handed over all assets and documentation
Project Showcase
Explore our stunning final deliverables and media.







Transform Your Online Presence
Ready to elevate your website's impact? Let's connect!