Red's Chair Website 2.0

Overview

This project started because my client’s previous website was built with WordPress and had become increasingly difficult to maintain. Making relatively simple changes to content was cumbersome, and over time the website went almost completely untouched. Eventually, an attempt to update some of its aging plugins broke several parts of the site, and rather than continuing to fight with it, the decision was made to take the website offline altogether.

For a while, the client went without a website. Eventually, though, it became clear that having even a relatively simple online presence was still valuable—particularly as a place for new clients to learn about the salon, browse services and pricing, and find out how to book an appointment. That gave me an opportunity to start over completely rather than trying to salvage the old WordPress site.

Finding the Right Direction

This project ended up becoming a much longer design exercise than I originally expected. At the time, I was still fairly new to designing complete websites in Figma, so I spent several months experimenting with different layouts, styles, and ideas without ever really settling on something I was happy with.

I initially tried building the website directly in Webflow, thinking I could design and develop everything in one place. That experiment didn't last particularly long. I eventually moved over to Framer and spent some time trying to make that work instead, but I ran into many of the same frustrations. After bouncing between tools for a while, I finally stopped trying to design and build the website at the same time and moved the design process entirely into Figma.

That ended up being the turning point for the project. Working strictly in Figma gave me much more freedom to experiment without worrying about how I was going to build every idea as I designed it. It also gave me an opportunity to become much more comfortable with Figma itself and establish a proper visual direction before touching the final implementation.

From Figma to Production Website

Once I was happy with the design, I took a completely different approach to development. Rather than manually recreating everything from Figma, I used Figma’s MCP with Claude Code to translate the design into a working Next.js 16 website. From there, I could iterate directly on the implementation while still using the Figma design as the visual source of truth.

I paired the website with Sanity CMS, which solved one of the biggest problems with the original site: content management. The client can manage the information that actually changes without needing to dig through page layouts, plugins, or website code. Services and pricing can be presented clearly on the site, while the booking experience hands users directly off to the salon's existing appointment system.

I also designed the website to support more than just the basic salon information. Seasonal colour analysis, for example, has its own dedicated page explaining the service and what clients can expect, rather than being buried inside a generic list of services. The site also includes a CMS-backed blog with categories for salon updates, hair care, guides and tutorials, and new products, giving the client room to expand the website over time without needing another redesign.

Designing Around the Client

A major goal with the new design was to keep the experience simple. This isn't a website that needs dozens of pages or an elaborate navigation system. The important information is what the salon offers, how much it costs, who the client will be working with, and how to book.

The homepage reflects that by putting the salon's personality front and centre, followed by information about the owner, services and pricing, and a straightforward way to get in touch. The visual design is intentionally warm and personal rather than trying to make a small home salon feel like a giant luxury brand. The photography, typography, spacing, and relatively minimal interface are there to support the personality of the business rather than compete with it.

Looking back, the slightly chaotic journey through WordPress, Webflow, Framer, Figma, and finally Next.js was probably more useful than taking the shortest possible route. This was one of the projects where I started becoming much more comfortable separating design from implementation, using Figma to properly explore ideas first, and then choosing development tools based on what the project actually needed.

Most importantly, the finished website fixes the problem that started the project in the first place: the client finally has a website that can evolve without being afraid that changing something will cause half of it to spontaneously combust.