Refresh or redesign? This was a popular discussion point in the web community a couple of years back, advocating that not all websites need a big redesign every few years. Instead small incremental changes can be made over time ensuring the site continuously adapts to a changing company.

This approach will work for many business where their services never change, or change only slightly year on year. But for some businesses their approach can change so much that keeping the existing website could do more harm than good. It’s this thinking that led The Behaviour Expert to become Jez Rose.

Some backstory

Since 2010 we have designed, developed, refreshed and redesigned a number of websites for Jez Rose. While most have centred on the realm of Behaviour Insight a few have been side interests of Jez’s. Throughout all this time one site has remained; The Behaviour Expert.

Though self-branded, Jez Rose, in 2010 the site has undergone changes big and small over the past 7 years, with a big redesign undertaken in 2013 and a couple of refreshs completed in 2014 and 2015.

fig 1. Jez Rose through the years

Two years later

While keeping us on our toes with regular updates, in mid-2017 Jez returned with the plan to change the entire content available in the website, as well as some of the design elements in order to reflect a growing nature theme within his offerings.

As the conversation progressed we concluded that a redesign was the best solution in delivering Jez’s goals. While the current design could adapt to new content, the proposed design tweaks was going to stretch the design too far and would likely leave the website looking like Frankenstein’s Monster.

Through a fresh redesign we could approach the new requirements with a blank canvas while a rebuild would allow us to benefit from advancing technologies, different browser compatibility standards and the ability to clear out the bloat that occurs in websites over time.

But getting the client on board with a redesign isn’t always so straightforward…

Meeting expectations

Getting a small business to commit to the cost of a new website is often more difficult as the costs are felt more greatly than for a multi-national who often have marketing budgets to use up. So in such instances it’s important to instil confidence in the client that this is the best option.

We went back and forth with Jez a few times regarding this to make sure that he understood what we were wanting to do and that we understood what he was looking for. Whether it was clear in our minds or not we both had an idea about what the website would be at the end of the project and we needed to get to a point where our ideas aligned.

When asking a client to pay more than they possibly expected for work they’ve maybe not explicitly asked for it was important to be clear on what we were planning to deliver so that we could meet or even surpass expectations. At the end of the project, to leave a client with a website they feel wasn’t worth the investment or worse than what came before would be incredibly disappointing.

In discussing a new design Jez and his support team posed wider questions about the company internally, and with our consultation. One such decision made was to return to branding the website under Jez Rose rather than The Behaviour Expert. This would better reinforce the personal approach of the company, because as far as his customers are concerned, Jez is the company.

Eventually we agreed on the spec for the new website, spoke about the direction of the design, agreed the costs and then set to work…

Wireframes

For some smaller projects we may not create wireframes for a number of reasons, but given the changes being made to this website it seemed best to create a wireframe in this case. Though rather than create a rough wireframe that would mostly be limited to layout and hierarchy we also chose to include some of the design ideas too.

The reason for this was that it would quickly confirm that the direction being taken with the design was correct, within the client’s expectations, and also that some of the changes to areas like site structure and navigation weren’t going to be problematic.

This approach also prepared the client for the final design, making this much less of a surprise. As well as giving greater insight into what we had planned at an earlier stage in the process it would make any changes easier and be less disruptive than if we had created a full design that may not easily accommodate requested changes without causing a domino effect of alternations through the design.

fig 2. Wireframe

After a few edits we moved onto the final design…

An exercise in watercolour

While we maintain Jez’s main website he does employee other designers for some of his side projects. One such project was his ‘Insights’ training resources. With a logo created for this that utilised a watercolour mask it was Jez’s desire to mimic this style in the new website. He felt it would give a more unique look to the website, especially within his marketplace and it provided us a feature to build the design around.

fig 3. Insights logo [not by Bronco]

The challenge in a style like this, especially in the way we’ve approached this, is that utilising this kind of imagery is more of a challenge in responsive websites. When responsive design first emerged it led to a rather boxy web as previous graphically complex interfaces became trickier to implement when also dealing with flexible elements where size and position would frequently change.

As the community become more proficient with responsive design, and as technologies such as flexbox emerged, we’ve seen more complex graphics return to our designs and our use of complex watercolours here is one such example.

fig 4. Final Design

One downside to images like these are that they can lead to large file sizes and a heavy website…

Keeping things speedy

Replacing a website with a faster version than the last is a personal goal of mine. I’ll do as much as I can to make a website faster but not at the cost of ease of future edits; a website is often a balancing act.

With Jez’s new site I knew the watercolour images, and stylised photography were going to amount to a high percentage of the overall page weight; almost 50% prior to launch. With build tools like Gulp to take care of compressing static assets and a PHP image resizer script to allow for dynamically resized images (useful for responsive images) I knew that the images would be well optimised.

As JavaScript often accounts for a high percentage of overall page weight I continued my learning with vanilla JavaScript, again ditching jQuery as the website required minimal JavaScript that made the extra ~100kb an unnecessary expense.

After seeing the effect that loading a YouTube video was having on the site it was decided that these would be lazy loaded to ensure they didn’t affect the perceived speed of the website.

While we could have gone farther and lazy loaded a number of images I’m always concerned on relying on JavaScript to serve information in this way. With YouTube videos I know these don’t work without JavaScript so there is no drawback in the approach we have taken, however with images I need to spend time investigating the options to find a solution that checks all the boxes.

The result of all these efforts is a website that has a slightly smaller footprint in desktop and that is 33% smaller on mobile. Given the change of style in the website and the high use of imagery I’m fairly happy for the overall page weight (fully loaded) of the homepage to remain similar to the old site at ~1.2MB. But with every other stat showing good improvements and a 33% reduction in page weight on mobile, where data and time is at a greater premium, I’m pretty happy.

fig 5. Site speed comparison

So much effort, but was it all worth it?

The reaction

When first presenting the completed website Jez responded with the following…

“I have to say you have surpassed yourself with this one! It’s possibly the best website I’ve had to date – ever.”

While ultimately the success of a website depends on user reaction, conversion and revenue it’s a great feeling to know that a client is happy with the work provided and that nudging them into a redesign has, at least, resulted in work that they are pleased with.