Case Study - Rebuilding the Classic Gymnastics website
I redid the Classic Gymnastics website in Next.js to improving website performance and adjust the styling to be more inline with modern standards.
- Date
- Client
- Classic Gymnastics
- Roles
- Designer,
- Developer
- Tech
- Remix,
- Tailwind CSS,
- Radix UI
The Challenge
Classic Gymnastics was using Webflow for their initial website build, but they didn't like the idea of having to pay for a CMS (they don't need one) and the lack of control over the website. Their site was also a single landing page with slightly too much content on the one page (a bit overwhelming for site visitors).
I suggested that I could do a rebuild of the site using a modern frontend framework that would improve performance, and I could also take the opportunity to redesign the website to be more inline with modern standards. Plus, hosting it on my own infrastructure would mean that they wouldn't have to pay for a separate hosting service (they get it pretty much free through my own Vercel account).
My Approach
In a meeting with the client I just schaffolded out the main page structure-they were adding in some pages. We discussed everything to keep in the current website and roughly how they wanted things to look (branding and colour scheme to remain the same, etc).
The website was super simple, so I just put in a few hours to build out a 'template' that I could tweak while in a meeting with them (no need for a full design stage beforehand as we wanted to keep things cheap and quick).
There is no need for a CMS as the website's content doesn't need to change and there was only one 'integration' with the client's booking system (a simple redirect to an external booking page).
I used Next.js for the frontend and tailwindcss for styling. I also used the shadcn/ui library for rapid prototyping.
The Outcome
The website was launched in a couple of days (from initial meeting to live) and the client was very happy with the results. The site scores much better on Google lighthouse than before too. I've kept the design very clean and minimalistic and have separated out the content of the website into separate pages (great for SEO and user experience).
Limitations
The only real limitation was that the client currently cannot change small copy on the website without my help. This is something I am currently working on by making my own tiny open source CMS that I can host on my own infrastructure (and provide to my clients for free).
The client did request that the site navigation for 'classes' and 'contact' both be pointing to sections within the landing page. I usually prefer that links in the navigation all be for different pages, but we both made the call that this doesn't particularly detract from the user experience in this case.