Housefit Fitness Studio Website Redesign
Timeline:
July 2025 - October 2025
Role:
UI/UX Designer & Web Developer (end-to-end redesign, asset creation, and Squarespace build)
Client:
HouseFit - a personal training studio in Toronto
AI & Tools:
Figma
Squarespace
Photoshop
Illustrator
DSLR Camera
ChatGPT 5
Squarespace AI
UX Pilot AI
Adobe Firefly
WHY SHOULD WE CONSIDER REDESIGNING THIS WEBSITE ?
Firstly, the navigation was complex with outdated content in pages
Secondly, site analytics revealed more problems
Finally, the website did not match the current gym space look
But Housefit was doing one thing really well…
The copy of the current website made the SEO ranking really high. All Headings, image alt texts and page descriptions performed really well ranking the website high in Google Maps and Search engines compared to its competitors.
SO HOW DO WE APPROACH THIS REDESIGN ?
Re-working the information architecture
Leveraging market study and current website analytics, the information architecture can be improved.
Mobile-first design
70% of traffic on Mobile Safari and hence mobile-first was a must.
Brand overhaul
The new website had to consider newer colors, typography and spacing inspired by its clients and the physical space.
Squarespace 7.0 to 7.1
I needed to redesign the website using the same platform on which the old website was built and hosted but with better features.
CORE CHANGES IN THE INFORMATION ARCHITECTURE
I started with fixing the information architecture & tell a better story on each page.
Simplified navigation
OLD
NEW
Changed the primary CTA
OLD
Difficult to understand what to expect after clicking
NEW
Clear implication of the next step + 'free' as a selling feature
Eliminated orphan pages
OLD
Multiple orphan pages without any connection to the core website architecture
NEW
Inter-linked pages to make visitor stay in the same website
WIREFRAMES
Next, I experimented with AI-assisted wireframing to accelerate ideation.
I turned my information architecture into structured prompts for ChatGPT and UX Pilot AI. The AI-generated layouts offered fast, diverse explorations of hierarchy and flow, helping me visualize how “conversion” and “credibility” could coexist on the homepage.
Once I had multiple variations, I transitioned to Figma to refine spacing, rhythm, and hierarchy, translating the AI’s raw layouts into a cohesive brand experience that felt deliberate and human.
Key features in wireframes
6-column, 8px grid to balance creativity and responsiveness
Creative play with text, images and white space to naturally guide the eye while abiding with evolving brand direction
Vertical CTA button for instant action to reduce bounce and exit rates
VISUAL DIRECTION
The next step was to give these raw screens a finished look and so I came up with a 'brand language'. A real fun part!
Brand Discovery
Housefit's brand was rediscovered through conversations with the client and offering different directions. The physical space also played a major role. Overall, the website needed to be felt minimal, with a lot of white space and colors only occurring from the photos used.
Mood board
Colors
Fonts
Asset Creation
My design skills were further showcased by creating visual assets for the redesigned website including team headshots, gym space photos, stock photos for landing sections and iconography. All these were created keeping the minimal, white space background as the direction.
Team headshots and gym space photography
Redesigning the logo
OLD
NEW
Iconography
BINDING IT ALL TOGETHER
Using the created brand language, I converted the wireframes into UI using Squarespace 7.1
Responsive Layouts
I leveraged Squarespace's fluid engine to create responsive layouts. I started with mobile first and scaled up for bigger screens
Custom HTML/CSS
Created components such as pricing cards, testimonial carousel and sticky buttons using custom HTML and CSS
Since the redesigned site is not yet live, I’m unable to share the final public link. However, if you’d like to explore the complete build, feel free to contact me directly, and I’ll be happy to provide a private preview.
CONTACT KUNAL
I TOOK IT TO THE NEXT LEVEL…
Housefit was already Search Engine Optimized. I took it to the next level by optimizing for AI.
AI Optimization Example:
Strong SEO Meta Description (keywords specific)
“At HouseFit, our certified trainers help you achieve your fitness goals with personalized workout plans and proven techniques. Start today!”
AI Optimized Description (contextual and natural language)
“Looking for a personal trainer in Toronto who actually tracks your progress? Housefit coaches design adaptable programs that evolve with you, improving mobility, strength, and confidence at every stage. Book a free consultation to start your transformation.”
SO HAPPENED POST REDESIGN?
Impact (work in progress)
The redesigned HouseFit website is set to launch soon, and I’ll be actively tracking its performance across engagement and conversion metrics, including bounce rate, average session duration, and consultation bookings.
This section will be updated once post-launch analytics are available, reflecting how the redesign performs against business and user goals.
