Recently I launched the new and improved website for the chaps at AT8 Group. They approached me back in April with a view to redesign and launch their website.
Their current site at the time had been in place for a number of years and although it had served them well, they felt they had outgrown it. It was time to freshen things up and consider the use of the website.
This is what their current site looked like :
After our initial meeting, I got things going…
STEP 1 : Get access to their Google Analytics (GA) data.
In my opinion it’s incredibly important with any existing website to get to understand what it’s visitors are doing. GA provides an incredible amount of detail, and it’s a real shame if you don’t use it.
By analysing the data, it soon became apparent what the primary functions of the site were. People wanted to read the recent blog posts, and access their library of press mentions.
STEP 2 : Clear the paths
You might be wondering what I mean when I say “clear the paths”. It’s a term I like to use to describe the process of optimising a site, and it’s layout, to make the primary functions as easy as possible to access. With AT8′s site, that simply meant making the process of accessing the blog posts and library as quick & painless as possible.
One of the first pieces of feedback I gave to AT8 was to do with new visitors to their site. I mentioned that their older site didn’t really explain in “everyday language” what it is that they do. I’m not a potential client of their’s (well, not yet!) and if i wasn’t able to work out what they did, it didn’t bode well for someone else to understand it.
We worked together to come up with an early idea for how their new homepage could be laid out, and it looked like this:
STEP 3 : Honest feedback, or else!
The one part of this job I hate is when clients don’t provide honest feedback. I do what I do because I want to improve the web presence of my clients. I can’t do that if a client is stopping themselves from having a site that works for them, and their visitors.
The AT8 chaps were always honest, but not in a brutal way (hence why I’m still typing this post!). Their constructive comments made it clear that this design didn’t quite have the jazz they were after. No problem at all!
Other web designers will agree (hopefully!); you can never have too much feedback. We had frequent chats online using Skype (or twitter) and this helped keep the project moving. I can’t think of a single point in the project where it had come to a stop for any reason.
The feedback from the first idea was clear; it was too boxy, lacked imagery and needed to use the AT8 Group logo / branding somewhere else too.
STEP 4 : Design and Un-design
With plenty of ideas on how to improve, I went back to the design to incorporate the suggestions. As with any form of design, it’s very easy to go “over-the-top” and over-design something. The web design community seem to believe that every design should be cut back to the core, but I think it depends on the project. With AT8 Group’s website, I made a point to keep it clean and clear. By removing visual clutter the visitor isn’t distracted or given a hard time navigating the site. This is key to a successful site.
After toying with a few ideas, the design progressed to the following :
Which in turn led to :
STEP 5 : Coding it up, migration and launch
Despite the fact the design showed a goldfish jumping, and the real site uses a video, nothing else really changed from the design. At this point, the design had been signed off, and work started on converting the flat design into a working WordPress theme.
It was the first project where I developed a theme with a theme admin panel within WordPress. About a fortnight after I setup the site, Nigel from AT8 called me and asked how to change the text within the three “AT8 bubbles” on the homepage.
I had actually developed the admin panel so that the text there would be editable by AT8, and Nigel was particularly impressed that he had full control of it!
Once the design was built on the staging server, I then gave a quick run-through on how to manage the site through WordPress. Thankfully, AT8 had used WordPress previously on their blog, but used a different CMS for their main site.
Before their new site went live, I migrated the previous blog posts from their older WordPress installation to the new site. Thankfully it was a WordPress to WordPress migration, and their export and import tools made it a breeze! Although URLs changed, their new WordPress site has been setup with an impressive suite of SEO tools and plugins to make sure that the world knows when they update the site.
The launch went smoothly, one or two kinks, but they got ironed out that same morning. The response on twitter was impressive and the feedback from everyone was that it was a great redesign / launch. I was told by AT8 that one of their customers had joked that their new site looked “professional” and their services came across “more expensive”!
I would say that’s a good response!
Conclusion
From day one, I was raring at the bit to work with the guys at AT8 Group. They are brilliant and know exactly what they want and how to articulate their thoughts.
The project taught me a lot about the challenges of re-designing an already successful website, and I couldn’t have done it without AT8 Group’s input and Google Analytics’ data!
Hopefully you’ve enjoyed reading about this project, and if you’re interested in starting a project with [codepotato] please get in touch.