Case Study - Interactive Map Platform for Ivanhoé Cambridge

Introduction

With a vast portfolio of properties spread across the world, Ivanhoé Cambridge needed an interactive map platform that would serve as a comprehensive digital touchpoint. Their vision encompassed a tool that was not only functional but also visually captivating, ensuring stakeholders could engage and retrieve property details with ease.

Challenges

Ivanhoé Cambridge's requirement was specific: an interactive map experience for a diverse set of devices, from touchscreen displays to mobiles and tablets. The platform had to present properties globally, incorporate detailed property pages, and an interactive "screensaver" mode.

Mandate

Our mission was multifold:

• Conduct a thorough analysis of needs.
• Ideate, conceptualize, and develop the interactive map project.
• Ensure optimal functionality across all targeted devices.

Objectives

1. Interactive Global Mapping: Design an intuitive world map interface, offering users the ability to access a multitude of properties spread across various geographies.
2. Multi-device Compatibility: Ensure the map interface is fully optimized for touchscreen kiosks, mobile devices, and tablets, accounting for various user interactions and gestures.
3. Data Integration: Seamlessly fetch and display property details through API integrations while ensuring real-time data accuracy.
4. Advanced Touch Interactions: Offer users a range of touch functionalities – from pinch-to-zoom and drag-to-navigate to property selection.
5. Property Information Display: Design detailed pages for each property, offering extensive insights such as property images, descriptions, location advantages, and more.
6. Engaging Screensaver Mode: Develop a dynamic and captivating screensaver mode that showcases a selection of prime properties, inviting users to interact further.
7. Custom Filters and Dimensions: Integrate advanced filters that allow users to customize their property viewing based on various criteria such as property type, value, location, etc.

Results

• Versatility: With compatibility across a range of devices, the map platform ensured Ivanhoé Cambridge's global properties reached a diverse audience.
• Dynamic Data: The successful integration of real-time API data means users always accessed up-to-date property details.
• Aesthetic Appeal: The blend of sleek design, smooth transitions, and rich animations effectively encapsulated Ivanhoé Cambridge's premium brand identity.
• Efficient Navigation: Advanced filter capabilities and touch interactions ensured users could quickly find and view properties of interest.
• Modular Components: Designed with a Design System and adaptability in mind, our UI components scaled gracefully for varied screen sizes without losing their functional essence.

Technologies

• NextJS & React:
  • Used to craft a dynamic, responsive front-end, ensuring the platform's agility and smooth user interactions.
  • Server-side rendering capabilities of NextJS ensured fast load times
• Mapbox GL:
  • A powerful mapping platform offering 3D visuals, making global property exploration an immersive experience.
  • Customization features of Mapbox allowed for design tweaks to match Ivanhoé Cambridge's branding.
• xState:
  • Employed for its robust state management capabilities.
  • Facilitated the efficient handling of complex map states, from filter selections to zoom levels and property details.
  • Ensured that despite the range of user interactions, the map’s state remained consistent and bug-free.
• API Integration:
  • Robust API integrations fetched real-time data, populating the map with current property details and ensuring data accuracy.

About Ivanhoé Cambridge

Ivanhoé Cambridge stands as a testament to world-class real estate development. With properties scattered globally, they exemplify excellence in real estate investment, development, and management. Their commitment to sustainability and innovation is evident in their diverse portfolio and strategic initiatives.

What we did