Project Summary
Phoenix Remedial is a fast, user-friendly small-business website I rebuilt from the ground up to replace a slow, text-heavy WordPress site. Phoenix Remedial is a remedial massage clinic based in MacGregor, Brisbane, offering therapeutic massage services to help clients recover from injury and reduce stress. My goal was to transform their outdated site into a modern application that not only loads quickly and looks great on any device but also captures leads more effectively. As my first paid client project, this engagement taught me invaluable lessons in DNS configuration, hosting, SEO, and end-to-end project delivery.
Project Background
Existing Site
The original Phoenix Remedial website suffered from multiple performance and usability issues. Built on WordPress with unoptimized images, the site loaded slowly and struggled to maintain performance scores. Walls of unstructured text made it difficult for visitors to find key information, and inconsistent styling led to a disjointed user interface. On mobile devices, the layout was particularly problematic - text overflowed containers, images did not scale properly, and navigation menus were broken.
Client Needs
The clinic needed a streamlined, responsive site that clearly communicated their services, showcased pricing, and enabled visitors to book or inquire easily. Fast load times were essential to reduce bounce rates, while an intuitive contact form would help convert visitors into clients. Strong SEO was required to ensure good Google results. The client also wanted a solution they could update in the future without technical knowledge, so maintainability and transparent hosting processes were high priorities.
Proposed Solution
Tech Stack and Frameworks
I chose Next.js for its hybrid static/server-rendered capabilities, Shadcn UI for accessible and reusable components, and Tailwind CSS for rapid, consistent styling. The codebase is hosted in a GitHub repository with CI/CD deployed to Vercel, ensuring every push automatically builds and publishes the live site.
Contact Form Emails
Replacing the WordPress contact system, I implemented a custom email system using Resend and react email. This setup not only ensures reliable delivery of inquiry emails but also provides clear, branded notifications to the clinic, ultimately improving lead generation and conversion tracking.
Design and UX Approach
Drawing on the clinic's logo and color palette, I adopted calming neutrals for consistency with the brand. Content was reorganized into scannable sections with clear headings and concise descriptions. Readability was prioritized through ample white space, a legible type scale, and mobile-first breakpoints to ensure the site feels welcoming on all devices.
Internationalization
To better serve Phoenix Remedial's diverse client base, I implemented built-in language switching using local storage. The site supports English and Traditional Chinese, allowing visitors to toggle between languages seamlessly. All static content - including service descriptions, navigation labels, and form placeholders - were translated and stored in static JSON files, enhancing accessibility and user experience for both English and Chinese-speaking audiences. This also allows quick and easy changes to the text and content of the website without programming background.
Challenges and Solutions
Email System
Abandoning generic email templates, I built a custom contact notification powered by Resend's API and react-email components. Client-side form validation and server-side secure request routing allowed for a robust system the clinic can rely on for timely customer responses.
Hosting and DNS
Setting up Vercel deployment alongside my first custom domain introduced me to DNS intricacies. I navigated Porkbun's dashboard to create the necessary records, troubleshoot propagation delays, and configure SSL. These steps solidified my understanding of domain management and gave me confidence in handling DNS for future clients.
SEO and Indexing
While originally using internalization with Next.js and i18n, key pages were flagged with Google Search indexing issues due to poor implementation. I concluded that the approach of using i18n and dynamic routes for each language (/en and /zh) was not necessary and bluntly inefficient. I decided to switch to a smaller localStorage based solution, and developed a solution for automatic language detection based on the device's default language (it's pretty neat). The translations now occurred instantly without a page reload. I then achieved full indexing. This process helped me to understand the importance of proactive monitoring in Google Search Console and improve search engine rankings.
Results and Impacts
Features
The new Phoenix Remedial site features a clean, branded design with concise service descriptions, a functional contact form and optimized image use. Non-technical staff can update text in two languages via JSON files in the GitHub repository, which automatically trigger re-deployments.
Performance
After extensive testing and reiteration, final tests revealed consistent Lighthouse Performance scores of 100 across all categories (performance, accessibility, best practices, and SEO). Users experience near-instant page loads on both desktop and mobile, contributing to a lower bounce rate and higher engagement.
SEO and Analytics
Quality SEO ensured that the website could easily rank highly on Google as a local business. I used available tools like Lighthouse, AIOSEO SEO Analyzer, and Google Search Console to fix related SEO and indexing issues. Vercel Analytics was also implemented to better understand key metrics like visitors and bounce rate, which provide insights to user behavior and journey.
Client Feedback
The clinic reported a noticeable increase in web traffic and digital enquiries after the launch and indexing fixes. They praised the speed, clarity of information, and ease of future updates.
Reflection
Phoenix Remedial was a super rewarding project that deepened my technical expertise in DNS and hosting, SEO best practices, and the delicate balance between aesthetics, UX, and performance for small businesses. Delivering this contract from start to finish built my confidence in managing client expectations and timelines.
It also taught me an incredible valuable lesson on the deployment side of web development, which I had never really explored yet. Along the way, I learned everything from SEO optimization to website performance to Google indexing and much more, all in a practical development scenario.
While I recognize there is still much to learn in the freelance and agency space, this first project laid a strong foundation and demonstrated the value of a thoughtful, performance-driven approach to web development. For my next client project, I've identified clear areas of improvement in my client management and communication ability. Looking forward to the next one :)