Overview
Client: Vision Property Advisors
Industry: Property Investment Advisory
Scope: HTML-to-WordPress conversion, CMS development, responsive implementation, content migration and website launch
Timeline: 10 days
Platform: WordPress (custom-built theme)
Live site: visionpropertyadvisors.com.au
Vision Property Advisors came to us with a clear vision for its new website.
The client had already completed much of the early strategic work, including the branding, website copy, page structure and preferred visual direction. Using Claude, the client had also created a detailed HTML prototype showing how the website should look and how the content should be presented.
The prototype provided a strong starting point, but it was still a collection of static HTML pages rather than a complete, production-ready website.
Our role was to take the client’s approved concept and turn it into a functional WordPress website that could be managed, updated and expanded without working directly with HTML code.
The Starting Point
The client had already made the major creative decisions and was happy with the visual direction of the Claude-generated prototype. The project was therefore less about replacing the existing concept and more about translating it into a reliable website system.
The supplied materials included:
- A four-page HTML website covering Home, Strategies, Services and Insights
- Completed branding and website copy
- A library of 28 property-investment articles and guides
- A defined homepage structure and content hierarchy
- Enquiry and consultation booking flows
- Desktop and mobile styling
- The client’s preferred layouts, colours, typography and visual components
This gave us a detailed reference for the final result, but the original format had significant limitations.
The Challenge
The HTML prototype looked close to a completed website on the surface, but it was not practical for long-term business use.
The entire website operated through a single HTML file with JavaScript-based page switching. Articles were stored as separate static files, and updating content required editing the source code directly.
There were also unresolved functionality issues, particularly on mobile devices. Navigation buttons, enquiry interactions and page transitions did not always behave reliably across different browsers and screen sizes.
Most importantly, the client needed to be able to manage the website independently after launch.
The finished website needed to allow the Vision Property Advisors team to:
- Edit existing page content
- Add new insights and educational articles
- Organize content by topic
- Publish future case studies and resources
- Update calls to action and business information
- Manage images and page sections
- Maintain the site without editing HTML
- Expand the website as the business grows
The challenge was to preserve the client’s chosen design while rebuilding the underlying structure into something maintainable, responsive and suitable for ongoing use.
Project Goals
The main goals of the project were to:
- Preserve the client-approved visual direction
- Convert the static HTML prototype into WordPress
- Create editable page and content structures
- Improve mobile navigation and interactive elements
- Organize the large article library within the CMS
- Connect enquiry and consultation-booking functionality
- Build a foundation for future posts, resources and case studies
- Make day-to-day website management simple for the client
Rather than redesigning the website unnecessarily, we focused on making the original concept work properly.
From AI-Generated Prototype to WordPress
AI-generated code can be useful for exploring layouts and quickly developing a visual concept. However, a prototype and a production website serve very different purposes.
The supplied HTML demonstrated the intended appearance, content and user journey, but it was not structured around a content management system. Many elements were tightly connected to the original static file, making future updates difficult.
We reviewed the prototype section by section and identified which parts needed to become reusable WordPress components.
The original layouts were then recreated within WordPress while keeping the visual appearance close to the client’s selected version.
This involved translating static sections into manageable website templates, separating content from layout and replacing prototype-only behaviour with reliable WordPress functionality.
WordPress CMS Development
One of the most important parts of the project was giving the client control over the website.
Instead of treating each page as a fixed HTML document, the site was organized around reusable WordPress structures. This makes it possible to update content without affecting the design or accidentally breaking the layout.
The WordPress implementation supports:
- Editable core website pages
- A structured Insights section
- Individual article pages
- Topic-based content organization
- Reusable calls to action
- Consistent headers and footers
- Editable business and contact information
- Future posts, resources and case studies
The Insights library was a particularly important part of the build. The client had already prepared 28 educational articles covering property strategy, finance, risk, tax, market cycles and portfolio planning.
These articles were moved from individual static HTML files into a proper WordPress publishing system. The client can now add, edit, categorize and publish new educational content through the WordPress dashboard.
Responsive and Functional Improvements
The original prototype included mobile styling, but several interactions were not working consistently across devices.
We rebuilt and tested the website navigation and interactive elements so that the experience remained consistent across desktop, tablet and mobile screens.
The implementation included:
- Responsive desktop and mobile navigation
- Reliable mobile menu behaviour
- Functional internal page navigation
- Responsive multi-column and single-column layouts
- Working enquiry interactions
- Consultation-booking links
- Consistent calls to action throughout the website
- Mobile-friendly forms and buttons
- Cross-browser layout and functionality testing
Special attention was given to preserving the original content hierarchy. The client had intentionally arranged the homepage to introduce the business, establish trust, explain the advisory process and then guide visitors toward booking a strategy session.
That structure was retained while improving the underlying implementation.
Enquiries and Consultation Bookings
The website was designed to support two primary conversion paths.
Visitors can book a free strategy session through the client’s Calendly booking flow or submit an enquiry directly through the website.
Calls to action were connected across the homepage, services, strategy and insights sections so visitors can take the next step from multiple points in their journey.
The enquiry form was also structured to help visitors identify the type of support they are looking for, including property advisory, mortgage broking, legal services, accounting, property inspections and property management.
Content and Compliance
Because Vision Property Advisors operates within the property-investment industry, clear educational and compliance messaging was an important part of the website.
The client had already prepared the required wording and disclosures. We ensured that these elements were presented consistently across the relevant pages and article templates.
This included:
- General information disclaimers
- Investment suitability notices
- Enquiry-form consent language
- Consistent calls to seek appropriate professional advice
- Structured article layouts for educational content
The result is a website that presents detailed information clearly without losing the direct and approachable tone established by the client.
Collaboration and Process
The client was closely involved throughout the project and provided unusually detailed source materials.
Because the preferred design, copy and content direction were already established, the collaboration focused primarily on implementation, functionality and usability.
Our process included:
- Reviewing the supplied HTML, content and project handover
- Identifying technical and mobile issues
- Planning the WordPress page and content structure
- Rebuilding the approved layouts
- Migrating the educational content
- Connecting forms and booking links
- Testing desktop, tablet and mobile experiences
- Preparing the website for launch and future client management
This approach allowed us to respect the work the client had already completed while providing the technical structure needed to turn it into a real website.
Results
The completed Vision Property Advisors website retains the direction and personality of the client’s original concept while providing a much stronger technical foundation.
What began as a Claude-generated HTML prototype is now a functioning WordPress website that the client can manage and expand.
The new website:
- Preserves the client’s preferred design and messaging
- Provides a clear presentation of investment strategies and advisory services
- Includes a structured library of property-investment insights
- Supports enquiries and consultation bookings
- Works consistently across screen sizes
- Allows the client to edit content through WordPress
- Makes publishing future articles and case studies significantly easier
- Provides a scalable foundation for continued business growth
Key Outcomes
- Static HTML prototype converted into a functional WordPress website
- Client-approved design preserved during development
- Twenty-eight educational articles organized within the CMS
- Editable website pages and reusable content structures
- Improved mobile navigation and interactive behaviour
- Integrated enquiry and Calendly booking flows
- Easier long-term website management
- Flexible foundation for new posts, resources and case studies
This project demonstrates that a client does not always need to begin with a traditional design process.
When a business already has a strong idea, clear content and a visual concept it believes in, our role can be to provide the technical expertise needed to turn that work into a dependable, maintainable website.
