After 4 years the Honeystone website was starting to feel its age. Functionally it was great, the content was pretty good too, and it performed well (100% on PageSpeed Insights), yet it just felt a bit dull and dated - I wanted to rebuild it!

I couldn’t just rebuild the website based on my own subjective opinion, so before jumping into a new build, I decided to assess the website using our standard QA process. Well, 130 items checked off, and it’s an almost perfect score. I decided the QA checklist needed work too!

I figured it would be a good idea to ask for some opinions around the office. I wasn’t alone (thankfully). The general consensus was that it was dated, unengaging and had readability issues. When compared to our latest builds, the typography was just a bit too harsh. Black text on a white background is the accessibility ideal, but didn’t make the reader feel particularly comfortable. A better balance needed to be struck, so I had my excuse!

The approach

Functionally the website suits us perfectly, the information architecture is great and the content resonates well with our customers, so a redesign was unnecessary. The approach would be to restyle the whole website without making any changes to the existing content structure.

We would also take the opportunity to switch to a TALL stack (Tailwind, Alpine.js, Livewire, Laravel) as this brings the website inline with our current preferred development stack. Earlier this year, we started using Livewire and Alpine.js for the Honeystone website, so the switch to Tailwind alongside a full restyle makes a lot of sense.

We wanted to complete the refresh within a window of 2-3 days between other active projects. To this end, we decided to scope the changes to just Blade templates and primarily just classes i.e. new elements would be avoided unless absolutely necessary (yeah, this went out the window after about 5 mins).

A mockup was created with a new twist on the existing colour palette and some new typography. The structure would remain completely the same, with the only changes being to colours and fonts.

Howie did it

Naturally we started by removing all of the old Sass files, Bootstrap, FontAwesome, Mix, and other related dependencies, and installed Vite and Tailwind in their place. Now it looked really daunting - the whole design was gone.

An impromptu process unfolded from here. I styled the layout, header, footer and main container, and then distributed the work by project domains (e.g. blog, portfolio, testimonials, etc). 

We created as many reusable components as necessary immediately - this would give us a consistent set of styled elements (yes, the ‘only CSS classes‘ thing is already out of the window). We then set about implementing these components in the place of the existing elements in our respective domains, occasionally stopping to add components or agree adjustments.

At this point it was just a grind fest, with our domains all taking shape slowly. Once we were done the whole thing was brought together for a complete review. We’d done pretty well, with about 15 items on the snag list, we were on the home straight. 

We met our target, and completed the refresh in just 3 days. During the Quality assurance process, we took the opportunity to pop a couple more items on the checklist. Although subjective, we wanted to make sure our team and our customers considered some additional points: are titles comprehended without undue reading effort and is the reading experience comfortable. 

The final result

Well, you’re looking at it. It’s just like the original website, but better. It’s more engaging, easier to read, more accessible, and has a more flexible colour palette. 

Our website now also serves as a fantastic example of what a refresh can achieve even on a tight budget. Had we billed this out, the total cost would be a little over £2,000.

We’re very happy with the outcome, but would love to hear your opinions too. Please consider posting a comment below.

If you’d like to consider a design refresh of your own, please get in touch. It’s likely to be even better value if you’re not migrating your entire CSS framework at the same time!