Clasifika: Multi platform Real estate app powered by Decoupled Drupal.

clasifika laptop-view

Clasifika is an upcoming housing startup from Panama connecting buyers and sellers in the real estate market. We helped Clasifika with product consulting to build the MVP backlog, used Design thinking to rapidly test ideas with real world beta users and finally delivered UX optimised and high performance web and mobile app both powered by Decoupled Drupal as the backend.

Product Consulting | Design | Decoupled Drupal | Frontend Engineering
clasifika laptop-view clasifika mobile-view

Discovery (Product Consulting)

QED42 and Clasifika together built the MVP backlog for the product so that stories with high value and low cost could be prioritised. Clasfika’s founder engaged real life stakeholders from his network to fill out surveys that helped us understand buyer and seller problems in high detail. After receiving 100’s of responses to our surveys, evaluating cost to benefit of we soon realised that following features were going to be critical for the product :

  • Buyer and Seller verification
  • Real time communication between buyers and sellers
  • Capturing high amount of data about properties
  • Bulk import of properties from excel / MLS systems
  • Mobile solution for inventory management
  • Decision Driven Search System
  • UX/UI to be key differentiator
for sale picture

Designing the Product

Thanks to our discovery, we had a lean and crisp backlog for the MVP and lot of clarity on what we were building. Our next task was to design the product and test our solutions, some of the key guidelines for the design team were:

  • Action based UX
  • Component based design for elements to be reusable across web and mobile
  • Minimalist Design with focus on important actions
  • Design for performance
Product designing picture

Our Solutions

Next gen real estate platform for connecting buyers with sellers.

  • Verified Buyers
    Clasifika Account kit login Desktop
  • Bulk import of property database
    Clasifika Properties listing mobile app
  • Chat based contact center to have conversations with potential buyers
    Clasifika chat window desktop
  • Mobile App to easily publish and manage listings
    Clasifika create properties mobile app

Decision driven user experience improving customer’s trust

Enhanced and search flow optimised for real estate sector

No Premium placement

Ability to shortlist properties


Building Clasifika

Looking at product and UX needs of clasifika we soon realised that we would need a distributed architecture of 3rd party systems backed by API First Drupal deployment also known as Decoupled Drupal.

Our tech stack included following frameworks and systems:

  • Decoupled Drupal -- CMS and REST points provider for various functionality.
  • Angular -- Web application consuming data from Drupal and other services.
  • Ionic -- Hybrid Mobile app for Android and iOS with Drupal as functionality Backend.
  • Firebase -- Realtime Database to power buyer and seller chats.
  • Elastic Search -- To power faceted and geo spatial search queries from web and mobile app.
  • External XML Feeds -- Property data from third party XML feeds were synced to Drupal periodically.
clasifika flowchart

Key Technical Highlights

  • We leveraged JSON:API specs via JSON API module to connect with multiple content-types using a single request.
  • Custom Indexer and sorting algorithm for Elastic Search and leveraged elasticsearch_connector Drupal module for stock integration.
  • Angular Web application directly queried Elastic search to bypass Drupal bootstrap for high performance.
  • Multi threaded Migration to speed up syncing of huge amount of data coming from XML feeds.
  • Component Driven Design and Frontend to share UI elements between Angular and Ionic e.g. we could use the chat directive built for ionic in Angular with some CSS adjustments.
  • Stateful Publishing workflow on mobile allowing for data to persist across screens and allowing the users to save their progress as draft.
  • Frontend Code Reusability and Best practices - We followed Angular best practices for making our codebase reusable using directives and services for common functionality.
  • Analytics -- Tracked user journey using custom events.

Start your Digital

Transformation journey

Consultancy | Design | Drupal