Digital flagship for a real estate development company

Olea Estate is a new real estate development company with a team that has decades of international experience across Europe and the Middle East. With a pipeline of residential projects in Thessaloniki and Halkidiki, they needed a digital presence that matched the seriousness of their work, not a brochure site.

The assignment: design and develop a bilingual corporate website (Greek and English) that would act as the brand’s single source of truth for:

• The company narrative
• Its three flagship residential projects
• Future developments

Translating Complexity into Structure

We began by digesting a dense and highly detailed RFP, along with extensive documentation from Olea—content plans, legal requirements, specs, and sales materials. The first challenge was to make sense of it all, then translate it into a clean, navigable information architecture that would serve both buyers and investors.

We didn’t just want to build a website—we wanted to build a framework that could evolve with the brand. That meant starting with:

• Strategic planning of navigation and content flow
• A future-proof CMS structure to accommodate different project types and details
• Avoiding the “hardcoded chaos” many real estate sites fall into, and instead opting for a modular, maintainable system

Building the CMS Backbone

We pushed Webflow CMS to its limits, setting up 12 custom CMS collections that interlinked with one another, creating a web of data relationships and smart content delivery.

Collections included:

• Projects
• Units
• Project Highlights
• Project Documents
• Milestones
• Locations
• POIs (Points of Interest)
• Partners
• News
• Team Members

The Project and Unit CMS collections alone each contained over 60 data fields, structured to accommodate images, videos, downloadable files, sales content, availability info, maps, and more. Every relationship was carefully considered—from which highlights belonged to which project, to how POIs should appear dynamically per location.

This level of detail gave us full control over conditional logic, dynamic visibility, and personalized layouts—ensuring only relevant content was shown for each project or unit.

Designing the UI/UX & System Architecture

Once the data structure was in place, we moved into UI/UX design. This wasn't just about making things look good—it was about making them work better.

We collaborated closely with the client to define a clean, elegant design language that aligned with Olea’s brand values. After getting approval on basic elements, we built:

• A design token system with consistent spacing and typography using clamp() for fluid responsiveness
• A component library inside Webflow to ensure design consistency and future scalability

Every pixel, layout decision, and interaction was designed with purpose—reflecting a premium aesthetic without slipping into tired real estate tropes.

Designing Core Pages & CMS Templates

We began with the core pages—Homepage, About, and Brand pages—before moving to the two most critical components of the site:

1. Project CMS Pages
2. Unit CMS Pages

These templates had to handle large volumes of dynamic content, while remaining clean and intuitive. Key considerations included:

• Conditional visibility (Only show certain data if it's available)
• Full media support (Images, videos, maps, modals, documents)
• Content-heavy sections with information architecture that flows logically
• Visual elements like sliders, hover states, and animations that enhance—without overwhelming—the user experience

For the Project pages, we focused on telling the complete story of each development, including its highlights, location, availability, and vision. For the Unit pages, we adopted a leaner layout—streamlined and conversion-focused—prioritizing the key buying factors: price, specs, location, and availability.

Dynamic Mapping with Mapbox

To enrich each project’s location data, we integrated custom Mapbox maps, displaying nearby POIs dynamically from the CMS. The client could enter precise coordinates, titles, and descriptions for each POI, and the system would render it automatically on the appropriate project page.

This allowed Olea to not only showcase the property but also contextualize the lifestyle around it—a key differentiator in real estate.

Micro Interactions & Component Enhancements

The site features multiple dynamic components designed for clarity and engagement, including:

• Interactive sliders
• Accordions and tabs for organized content
• Modal windows for gallery and file previews
• Micro animations and hover states that guide the user experience

We built custom navigation for CMS content, ensuring ease of use across devices, and built tables and responsive layouts that remained clean and elegant regardless of screen size or content volume.

Final Pages & Infrastructure

Beyond the main content, we also crafted all essential utility and legal pages:

• Contact page with custom form handling and dynamic location data
• 404 page, Password-protected area, and Cookie consent integration
• Privacy Policy, Terms, and other compliance-related pages

QA, Performance, SEO & Accessibility

Before launch, we ran the website through a complete quality assurance process, addressing everything from SEO to performance:

• Speed optimization via asset compression, lazy loading, and optimized code
• Accessibility enhancements: ARIA labels, alt tags, proper heading hierarchy
• Improved HTML semantics for better indexing and screen reader support

Custom code base:

• Project Page: 1,089 lines
• Unit Page: 336 lines
• Global scripts: 661 lines
  Each script was documented, annotated, and organized for future maintainability.

We also implemented:

• Meta titles & descriptions for each page
• Open Graph images
• JSON-LD schema markup
• H1–H5 hierarchy audits for content clarity and SEO best practices

Analytics, GDPR, and Localisation

To round out the build, we connected all key analytics and compliance systems:

• Google Analytics
• Microsoft Clarity
• Google Search Console
• CookieYes GDPR compliance

Finally, we fully localized the entire site to Greek, ensuring a seamless, native experience for both Greek-speaking and international visitors.

The outcome is a bilingual, CMS-driven website that Olea can actually operate:

• The client has full content ownership, from projects and units to documents and POIs
• The architecture is custom to Olea’s reality, not a generic real estate template
• The design system supports future additions without redesign every time
• Project and unit pages are data-rich and interactive, but remain easy to navigate
• The CMS scale can handle many more projects without new development work
• The site is built on a solid technical baseline: performance, SEO, accessibility, and GDPR are accounted for from the start