The Real Estate Builder’s Challenge: How I Built a CMS‑Powered Site in Wix Studio
- Aug 31, 2025
- 7 min read
Updated: Jul 13
This project began with a very specific challenge: to create an elegant, aspirational real estate showcase in Wix Studio that would feel refined, load quickly, and stay easy to manage behind the scenes.
🥈 Second Place Winner – August Builder Challenge: Real Estate Edition (Creative Crew x Wix Studio)
This project was created for the Creative Crew Builder’s Challenge: Real Estate Edition, a real‑world brief focused on a CMS‑powered property showcase that’s responsive, visual, and easy to update. Requirements included a listings grid, dynamic detail pages, an embedded or dynamic Google Map, and an inquiry form on each listing, with bonus points for filters, featured logic, and animations.
"Sonia's entry reads and feels like a professional portfolio case study: thoughtful research, paper wireframes, strong CMS/design architecture, accessible choices, and beautiful on-brand visuals" – Brad Hussey, Founder & Creative Director, Brightside Studios Inc.
In this project, the challenge was not only to meet the technical brief, but to make the whole system feel coherent, intuitive, and aligned with a real estate brand aiming for a more elevated presence.
Project Goals
The goal was to create an elegant, aspirational real estate experience that loaded quickly, relied on a scalable CMS, and guided users naturally towards one clear action: booking a viewing. I approached the whole project mobile-first, reflecting how people actually browse today, from featured properties on the homepage to filters and detail pages deeper in the journey.
The intention was not simply to fulfil a brief, but to design a showcase that felt light for the user and manageable for the agency, with clear calls to book a viewing and a structure ready to grow without rebuilding the site each time.
Design Approach
I used the project as an opportunity to study a real estate agency that could genuinely benefit from Wix Studio. Beyond the technical requirements, the focus stayed on elevating brand perception: thoughtful typography, a consistent colour palette, and design decisions that feel high-end from the very first screen.
In luxury real estate, the visual language needs to match what is being sold. That is why I chose elegant typography, generous spacing, and hero sections shaped by high-quality imagery and video that invite the user to pause. Scroll and hover animations stay soft and purposeful, adding life without getting in the way of the information people actually need.
A CMS Designed for Real Agency Workflows
I configured the CMS around the reality of a working agency, where adding or updating a property needs to feel as simple as completing a record. From there, the site pulls through the full content structure: property listings, agents or partners, and key supporting blocks. Each update happens once and flows automatically across cards, sliders, and dynamic pages, which avoids duplication and reduces the risk of error.
The structure also supports labels such as “For Sale” or “Sold” and manages full multimedia galleries, so each property can tell its story through images and video without adding complexity for the team. Reference fields connect properties and agents across collections without duplicating content, which keeps the catalogue and the people behind it aligned: the right agent appears on the right listing, and users immediately understand who will guide them through the viewing.
Homepage
The homepage opens with a featured properties section connected directly to the CMS. Instead of editing the design every time, I only need to tick a “featured” checkbox in the collection: the boolean field decides what appears in the main showcase, keeping control within the content panel.
Each card shows the essentials people need before deciding whether to explore further: exterior image, property name, number of bedrooms and bathrooms, price, and a clear call to view the details. The same content works across sliders and grids, always connected to the dataset, so any change in the CMS updates consistently across all modules without duplicate work.
Light microinteractions, such as an animated arrow suggesting scroll, encourage exploration without overloading the interface. This makes the homepage work like a visual dashboard connected to the CMS: it decides what to surface first, keeps everything in sync, and guides users from a quick overview into a full property page with minimal maintenance.
Filters that Help People Decide, Not Just Search
I designed the listing page so users can browse the catalogue at their own pace and refine their search according to what genuinely matters to them: number of bedrooms and bathrooms, location, price range, and sorting by date or price. Each filter connects directly to the CMS dataset, so results update instantly and always reflect the current state of the collection.
In practice, that means users can adjust criteria and see only the properties that match their preferences, without delays or inconsistent results. For the agency, the logic lives in the CMS and datasets: what appears, how it sorts, and how it filters all sits in one place, avoiding duplicate configurations and keeping the site easy to manage over time.
Filter by property characteristics
Filter by property price
Sort by latest and price (low to high & high to low)
Each Property Shown With Depth
Every property has its own dynamic page generated from the CMS, with clean URLs and fast publishing. The design connects directly to the property collection, so any change in the CMS appears immediately on the relevant listing page.
Each page combines a full gallery with lightbox, an expandable description, and a block of key details such as bedrooms, bathrooms, square footage, and price. The CMS multimedia gallery field allows each property to hold multiple images or videos and display them efficiently, without managing separate fields for every file. For the agency, this creates rich, visual property pages updated from one place. For the user, it creates a clear browsing experience that shows the overall atmosphere while still offering the depth needed to make a decision.
Maps and Location
Each property page includes an integrated Google Map that shows the exact location. From the page itself, users can place the home in context, explore the surrounding area, and get directions without leaving the site.
The CMS stores address data in a structured way, which makes it possible to connect that information to the map and, in future, build broader map views with multiple properties shown at once. In that sense, location stops being a simple line of text and becomes a visual layer that supports decision-making: where the property sits, what surrounds it, and how easy it is to reach.
Forms That Start Conversations
Each property includes a form for booking a viewing or sending an enquiry, integrated directly into the listing page. When someone submits the form, the system automatically adds a unique property ID, invisible to the user but recorded in the CMS. This allows agents to filter enquiries by specific property and reply with context from the very first message.
I also set up automations that send confirmation emails as soon as an enquiry arrives, keeping communication active without manual effort. The responsible agent also appears dynamically on each property, which builds trust before the user even hits send and makes it clear who will be on the other side of the conversation.
Accessibility and Mobile
I carried out accessibility checks across contrast, focus order, and overall usability. The responsive design is optimised for every device, ensuring the experience feels smooth and dependable on mobile as well as desktop.
Brand and Visuals
A consistent brand system keeps the experience cohesive across the whole site. I also used Wix Studio’s AI image generator to speed up the creation of visuals that still feel aligned with the brand.
What the Agency Gains from this System
Behind the visual layer, the system is designed to help the agency work with more clarity and better results:
Smoother navigation: content stays organised and filters feel intuitive, so users find what they need quickly and spend longer exploring properties.
Less maintenance: the CMS reduces manual tasks; updating price, availability, or property details happens in one place and flows across the whole site.
More qualified enquiries: forms and automations capture leads and reply instantly, opening conversations with people who have already shown interest in a specific property.
Room to grow without rebuilding: the dynamic structure allows the agency to add new properties, sections, or features without redesigning the entire site each time.
A better experience for everyone: accessibility work and responsive design make the website usable across devices and for different types of users, widening its potential reach.
Together, this creates a website that feels light for the user and manageable for the agency: a polished property showcase that turns visits into real opportunities.
How this Project Could Grow
This foundation leaves room to refine the experience even further, from standardising price formats and adding downloadable brochures to introducing live chat, improving automations, and building map views with multiple properties.
Standardise price formats for greater clarity.
Add a downloadable brochure to each property.
Include a fuller property details table.
Add social sharing options.
Introduce live chat.
Implement double opt-in and improve automations.
Expand dynamic pages and explore custom code.
Create map views with multiple properties.
Comments