Case Study: Logic 1st

website redesign before and after

My first case study! I’ve been wanting to write this up for ages, but I have been grateful to be absolutely booked up with client work since the day I launched (I must have done something right in a previous life), and blogging has taken a bit of a back seat. I’m working more efficiently now, so I’m hoping to be able to share a little bit more with you and keep you up to date with what I’m up to.

Logic 1st was one of the first companies I worked with and they came to me with a website they had been running for a number of years that they weren’t really happy with. They wanted more control over their site and a more modern look. They wanted more engagement with their customers and potential customers and their existing site wasn’t helping them to do this.

They also wanted a full migration to WordPress as they had been running on an alternative CRM that they hadn’t enjoyed using – this was the most important thing, but they also felt that a refresh of their design and layout would be helpful.

I started out talking to them about the kind of look they wanted and made sure I understood all of their requirements up front.

Website redesign

I spent a lot of time creating an initial mock up for their new site. The original website had been running for a number of years and although it contained all of the information they needed, navigation was a little confused and the graphics were out of date:

website redesign before and after

They wanted something much more modern and with a more dynamic feel to reflect the work that they were doing. They also felt that a bit of a logo refresh would be good. Here’s the original logo:

logo refresh before and after

This was was the first thing I worked on. I removed the rather dated shadowing, opted for a deep blue text colour rather than grey, chose a slightly stronger, slab-serif font and added a brighter accent colour. The logo also needed to be crisper and less pixelated for modern displays:

logo refresh before and after

Next I created a mock-up of the home page. After some discussion over the design, and valuable feedback from them, we finally settled on a third revision of the initial concept. I created bespoke icons for various services that they offered and re-organised the navigation so that each part of the site could be reached within two clicks. I think this is so important on sites today with the brief time you have to show visitors what you can do and the huge amount of competing information there is out there.

I also made sure that parts of the site that had been hidden (such as their free health check) were visible on the home page where potential clients where more likely to see them, and I put a really great testimonial on the home page as Logic are a long established company with a loyal customer base and I think it’s great to highlight that.

I also did important little things like make sure social media links were present, the site was optimised for speed and security, and add a favicon that you can see in the browser tab:

web design favicon

Final design

The final design looked like this:

web site redesign before and after

Development

Once I had sign off on the design, the real work could begin.

I am a full stack developer, which means I do everything from hosting and back-end programming to front end design. This makes for a seamless experience for my clients because they don’t have to bounce between different people or even different freelancers pulling everything together.

I created the entire site on a staging server, which is how I always present new live websites to clients, leaving their old website intact until everything was finalised.

Installation

I agreed a date with Logic’s IT team for site changeover, and on the day installed a ‘maintenance mode’ index page while I installed WordPress and migrated the database. My record for a site installation is 35 minutes (yay!), but on the day we had some database compatibility issues that I had to track down as the database software on my staging server and their hosting servers were slightly different variants. Logic’s IT team were brilliant (obviously!) and with their support I managed to find the problem and get things up and running after a few hours of nail-biting debugging.

Preserving link integrity and SEO

The last thing that I did was make sure the site would utilise a solid 301 redirection plan. When you are redesigning a site that already exists it is imperative that you consider the effect of changing page URLs and links. Anything linking to the old site will break and this can cause detrimental results in google page rankings. To prevent this I crawl every page of a site before installation and then redirect any pages that will no longer exist to an appropriate page on the new site. I use the .htaccess file to manage redirections rather than relying on a WordPress plugin.

Overall, I was really pleased with how this turned out and I got great feedback from Logic 1st. It was a pretty big project. I have worked in IT for years, and have a solid understanding of the market, so this was a great site redesign that I really enjoyed my time on.

Leave a Comment