2021
Matterport.ua
A landing page for a local 3D photographer/modeller creating Real Estate tours.
step 1
Stakeholder interview
The goal of this step was to outline the service itself, so I could precisely explain it visually throughout the interface later.
The main interview quiestions were:
1
Who are the supposed clients? Who needs 3D tours and why?
2
How is the service performed, step by step, in terms of time&place?
3
Are there any standout features that competitors can't beat?
4
What are the price options and/or packages?
5
What is the target action on the page? What is the user supposed to do here?
step 2
User research
Having several user types defined, I needed to dig into each one's background and motivation. I joined a couple of local professional RE communities - not where they sell, but where they learn how to sell better. This gave us an insight on how to align the 3D tours service with the trending sales techniques.
Currently, urkainian RE brokers are focused on selling via social media: Instagram, Facebook, TikTok, Telegram etc. Thus I had to point out how exactly the 3D tour embeds into their SoMe funnels - not just present it as standalone tool (which was the owner's initial idea)
Also, I noticed that RE salespeople love checklists and guides on sales. So I came up with an idea of giving a free PDF checklist on preparing the apartment to the "open house" - as an instant gift for applying for the 3D tour.
User personas defined
Oldschool agent
Not well versed in modern sales and promotion technologies: doesn’t know how to manage social networks, how targeting works, etc. Needs to be explained how everything goes in general.
first time experience with 3D tour
needs simple answers
has to be guided
Trendy agent
More tech savvy, probably has her own website (agency website). Has already seen some 3D tours. Needs to be shown the unique features of our product and the convenience of the service.
values her time
compares us with competitors
focused on features
Property owner
Focused on long-term benefits. Treats the 3d tour as a sales automation tool - inside the tour, potential clients will find answers to their questions and immediately proceed to booking (deal).
expects long-term profit
deep features for more benefits
step 3
Sketching
I created a mobile landing page sketch based on AIDA formula (Attention-Interest-Desire-Action). I had to twist the structure a bit to not end up with a basic boring repetitive pattern, beacuse people would instantly recognise that as a marketing fraud.
After approving the sketch with the stakeholder, I was ready to draw the UI itself.
step 4
UI design
I chose dark color palette to match the actual 3D tour background, which allowed to embed the example models seamlessly into the landing page. For an accent color I took yellow - it speaks optimism, energy & wealth (color of gold).
The fonts are simplistic, easy to read, but at the same time they're not worn-out. This helps to stand out of competitors by giving a unique feel.
These are the actual mockups I ended up with. There is no complex component system due to the tiniest scale of the project, so I only defined the things necessary for the developer.
These are the actual mockups I ended up with. There is no complex component system due to the tiniest scale of the project, so I only defined the things necessary for the developer.
Desktop version
Instead of drawing a whole different layout for desktop, the stakeholder suggested to reuse mobile layout in a playful format highlighting the agility of the 3D tour as a tool. Here's how the desktop version is supposed to look like: