BROK

• Interactive map shows plots from cadastre, land auctions, and real estate ads
• Customers can use a traditional catalog with filters and sorting
• When users place ads, the system instantly retrieves data from registers
• To see cadastral data, users can click on the land plot
• You can order references and services for the plot you’re interested in right away
• Users can pay and set up shipment details on the website

Tech specs

The client came to us with a well-thought-out idea. Having a solid experience in his field (land surveying) allowed him to build a clear vision of what his new product should do. We just had to summarize project goals and break them down into technical subtasks.

Team

Project manager (PM), backend developer, frontend developer, QA engineer, UX/UI designer.

At the beginning, we worked on building a map closely with our client’s expert.

Website structure

PM designed a website structure based on project goals and competitive research. We decided to leave 4 main sections: homepage with a map, classified ads, services, and user account.

We also add some pages required for integration with third-party services. For instance, to connect LiqPay, a payment system, you should have a dedicated ‘payment and delivery’ page.

The structure map served as a starting point for designing the UI.

We designed the UI to make the key features easy to use. We placed main navigational links and CTA buttons in the header. Links to low-priority pages resided in the footer.

The key feature is the interactive map. We placed it in the center of the homepage. You can zoom the map in to see the plot in any part of the country.

When working on the prototype, we actively discussed the details with the client. We approved most of the elements from the first try. At that time, we’ve already launched 100+ projects and knew how to make a good UI. Although with some elements, we had to go through a couple of options.

For example, we wanted to make map markers as icons of different shapes, depending on the property type. But the icons would overlap on the map when users zoom out. Also the client would’ve to hire designers each time he adds new categories. So we decided to differentiate markers with color instead.

While working on a prototype, we were adding details into specs. And the document grew up from 15 to 50 pages.

In our experience, it’s better to spend time on extensive specifications than leave room for ambiguity. Investing in a good spec always pays off.

We built this website from the ground up because there were no ready-made solutions to achieve project goals.

We used our own modules for email newsletters and an SEO, adjusting them for this project. Our devs wrote frontend on Vue.js. They took Multiselect from libraries, everything else they code from scratch. For layout, we used pure CSS3 with pre-processors but without Bootstrap.

Challenges

When integrating with the online court database, we encountered problems obtaining data on real estate court cases.

We explained the situation to our client. And he guessed what the cause was right away. It turned out that there were changes in case name formatting in the new court database.

We fixed the code, and the sync started to run properly.

To check the cadastral number, intended use, type of ownership, and area of any land plot — just click on the map. To get more detailed information, you can order paid certificates and services right from the pop-up.

Users can add and search for ads on the website.

When you publish an ad, the set of input fields changes for each category. But you don’t have to fill in all of those fields manually. Simply enter the cadastral number, and the data from registers will load into the required fields automatically.

Visitors can sign up with email, Google, or Facebook. To ensure that users’ data is safe, we carry out this feature using secure protocol oauth2.

Sections

• Order history
• Inquiries
• Ad management
• Notifications
• Settings

Our client asked to implement only the core features and launch the project ASAP. But during the development stage, we came up with several ideas to expand the capabilities of the service.

So after launching the first version of the product, we proposed to add a few features:

• Blog-like section to promote the website with useful content
• Monetization module with paid options
• Other minor improvements

The client approved our suggestions, and we scheduled the upgrade for March 2020.