A buyer portal that guides people through the whole property deal

Context

Most people buy an apartment once or twice in their life. Someone earning around 1,500 dollars a month pays more than 100,000. The deal goes through booking, a mortgage, an e-signature, documents, registration and construction. Each stage takes weeks.

Problem

Buyers did not understand what was happening, what they had to do, or whom to ask. That meant stress for them and calls to the sales team. The goal was to remove that stress: the buyer always sees their stage and knows whether to act or simply wait.

My role

I designed the whole portal, from the prototype to final layouts for every section. I presented and defended the decisions to the client, and we made strategic calls together with the client and our team. I also built a coded interactive demo of the portal in Russian and English; the videos on this page are recorded from it.

Key decisions

1. The home screen works through one card

The key element is the deal card at the top left: the stage, how many steps are left and whether anything needs to be done now. This was the hardest part of the project.

• A progress scheme instead of a floor plan. We first showed the apartment floor plan in the card, but next to the progress it overloaded the screen. We kept a graphic progress scheme.
• Several deals in one card. The switcher sits right inside it, so the buyer never leaves the page.
• Upsell instead of extra sections. The client wanted more sections on the home screen. We pushed for storage rooms and parking spaces: right after buying an apartment, people add them most easily.

2. The home screen adapts to the buyer's stage

One screen, many states:

• saved apartments: we suggest booking one;
• booking interrupted: we show what is left and offer to finish;
• deal in progress: we show what to do now, such as getting an e-signature or paying for the booking;
• deal closed: we show how long until completion;
• keys ready: we offer to pick a handover date.

The buyer does not hunt for the right section. The portal brings up what matters now.

3. Booking: several plans and discounts, no confusion

There are several booking plans and discounts, and they are easy to mix up. I split them across the flow steps and the price tooltip, so the buyer sees what they are choosing and what each discount is for.

4. Sign-in inside the booking flow, matched against the CRM

A new buyer does not leave for a separate login page. They confirm their phone with an SMS code and enter the last four digits of their passport, which the portal uses to find their deals in the developer's CRM. If the person is not in the CRM, a new client record is created. The developer does not lose someone who has already chosen an apartment, and the client lands in the CRM right away.

5. Booking for yourself or for someone else

Adult children often book an apartment for their parents. There is a separate path with the other person's details.

After payment the buyer sees a short celebration animation, a booking summary and a PDF report. Below we suggest the next step: book a meeting or add parking and storage.

6. The deal section explains every step

It is the same card as on the home screen, with more detail: what happens at each step and what will be needed next. Buyers can browse past and future steps to see what is coming.

7. Fewer modals, less noise

• In the profile, a new phone number or email is confirmed right inside the input: the field turns into a code field, no modal.
• In meetings and favorites, secondary buttons sit behind one button. Meetings can be added to a calendar.
• In apartment comparison, the row under the cursor is highlighted instead of drawing grid lines, so people never lose the parameter they compare. Any apartment can be pinned.

8. Edge cases get the same care as the happy path

A deal is not only the happy path. Every section has its own edge cases:

• booking expired or cancelled, deal cancelled: each has its own state;
• several deals, including a parking space: switching right inside the card;
• no deals yet: the home screen helps pick an apartment instead of showing emptiness;
• wrong or expired code, no attempts left: a contact center instead of a dead end;
• empty favorites and comparison, errors when booking a meeting: their own states with a hint on what to do.

Outcome

• 7 sections: sign-in, home, booking, deals, favorites and comparison, profile, meetings.
• 100+ screens and states for desktop and mobile.
• A coded interactive demo in Russian and English.
• Approved by the client, development complete, launching soon.